vue 使用高德地图的 搜索 戳点功能

前言：

? ? ? ? 此文章只是目前自己用，不做过多的详细解说。以及我们在高德地图官网上以个人账号申请使用的有限制。比如我们做搜索功能好像是每天允许搜索100次。

一. 引入高德地图

? ? ? ? 这个只是简单说明一下，高德地图有官方文档。在index.html文件引入。

// confing.js 自己创建
<script src="./static/config.js"></script>

<script type="text/javascript">
    // 高德地图秘钥，必须在加载JSAPI load.js文件之前
    window._AMapSecurityConfig = {
       securityJsCode: gloableConfig.secretKey  // 开发环境使用
    }
</script>

2. confing.js

? ? ? ?key以及secretKey 自己在高德官网上申请

var gloableConfig = {
    "key": "xxxxxx",
    "secretKey": "xxxxxxx"
};

?二. 详细代码

? ? ? ? 其中，只要你地图引入的没问题。下面代码可以直接使用。其次我是按需要引入高德地图，

你可以直接引入高德地图??import AMap from 'AMap';

? ? ? ? 高德地图官网上??PlaceSearch 这个Api 是带有分页的 我没做只做了一页展示。可以自己打印看，自己处理一下。

<template>
    <!-- 首页 -->
    <div class="homebox">
        <!-- 搜索 -->
        <div class="searchMap">
            <el-input v-model="mapsearch" clearable id="tipinput" placeholder="请输入" @change="handlemapsearch"></el-input>
            <transition name="el-zoom-in-top">
                <div id="panel" v-if="searchData.length > 0">
                    <div class="item_word" v-for="(item, index) in searchData" :key="index" @click="handlemapkeywordbtn(item)">{{ item.name }}</div>
                </div>
            </transition>
        </div>
        <div id="mapcontainer" style="width: 100%; height: 100%"></div>
    </div>
</template>

<script>
if (netWorkFlag) { import("AMap"); } // 按需引入高德地图
export default {
    data() {
        return {
            /****************** 地图 ******************/
            mapsearch: null,            // 地图搜索关键字
            map: null,                  // 地图实例
            searchData: [],             // 搜索内容
            markerCurrent: null,        // 当前地图戳的点位
            markerTextCurrent: null,    // 当前地图戳的文字
        }
    },
    mounted() {
        this.initMap();     // 初始化地图
    },
    methods: {
        // 初始化地图
        initMap() {
            let _this = this;
            var map = new AMap.Map("mapcontainer", {
                resizeEnable: true,
                mapStyle: 'amap://styles/a9f8af7c51ff24b217818bd1cb4ed23d', // yyh 蓝白
                center: [116.109204, 40.21111],
                zoom: 11.2,
                zooms: [10, 20],
                resizeEnable: true,
                pitch: 0,                   // 地图俯仰角度，有效范围 0 度- 83 度
                viewMode: "3D",             // 地图模式
                buildingAnimation: true,    // 默认false,表示是否将建筑物动画显示
                animateEnable: true,
            });
            this.map = map;
            this.addMaptoolBar();                           // 添加地图控件
            this.map.on("click", _this.handlemapclickbtn);  // 地图添加点击事件
        },
        // 添加地图控件
        addMaptoolBar() {
            let _this = this;
            AMap.plugin(['AMap.ToolBar'], function(){
                // 在图面添加工具条控件, 工具条控件只有缩放功能
                _this.map.addControl(new AMap.ToolBar());
            });
        },
        // 搜索-input_change事件
        handlemapsearch(val) {
            if(!val) {
                this.searchData = [];
                return;
            }
            let _this = this;
            AMap.plugin('AMap.PlaceSearch', function () {
                let autoOptions = {
                    city: '北京',
                    pageSize: 20
                }
                let placeSearch = new AMap.PlaceSearch(autoOptions);
                placeSearch.search(_this.mapsearch, function (status, result) {
                    _this.searchData = result.poiList.pois || [];
                })
            })
        },
        // 点击搜索的关键字
        handlemapkeywordbtn(item) {
            let jwd = [item.location.lng, item.location.lat];
            this.mapsearch = item.name;
            this.map.panTo(jwd);
            this.map.setZoom(13);
            this.searchData = [];
        },
        // 地图点击点击事件
        handlemapclickbtn(e) {
            // 先清除
            if(this.markerCurrent) {
                this.markerCurrent.setMap(null);
                this.markerTextCurrent.setMap(null);
                this.markerCurrent = null;
                this.markerTextCurrent = null;
            }

            let bbox = [e.lnglat.getLng(), e.lnglat.getLat()];

            this.markerCurrent = new AMap.Marker({
                position: bbox,
                icon: new AMap.Icon({
                    image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                    imageSize: new AMap.Size(25, 30),
                    size: new AMap.Size(25, 30),
                }),
                extData: {
                    bbox: bbox
                },
            });
            this.markerCurrent.setMap(this.map);

            this.markerTextCurrent = new AMap.Text({
                text: '测试设备',
                anchor: "center", // 设置文本标记锚点
                cursor: "pointer",
                angle: 0,
                offset: [10, -10],
                style: {
                    "background-color": "#ffffff00",
                    border: "none",
                    "text-align": "center",
                    "font-size": ".14rem",
                    color: "#000",
                },
                extData: {
                    bbox: bbox
                },
                position: bbox,
            });
            this.markerTextCurrent.setMap(this.map);
        },
    }
}
</script>

<style lang="less" scoped>
.homebox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    // 搜索
    .searchMap {
        position: absolute;
        z-index: 9;
        top: 0.1rem;
        left: 0.2rem;
        /deep/.el-input__inner {
            width: 2.7rem;
            height: 40px;
        }
        #panel {
            width: 2.7rem;
            height: 3rem;
            margin-top: 0.1rem;
            border-radius: 0.05rem;
            background: #fff;
            overflow-y: scroll;
            .item_word {
                cursor: pointer;
                line-height: 0.3rem;
                padding-left: 0.1rem;
                box-sizing: border-box;
            }
        }
    }
}
</style>
<style>
.amap-logo {
    display: none !important;
}

.amap-copyright {
    bottom: -100px;
    display: none !important;
}
/* 兼容性隐藏滚动条 */
#panel {
    scrollbar-width: none;/* Firefox */
    -ms-overflow-style: none;/* IE 10+ */
}
#panel::-webkit-scrollbar {
    display: none;/* Chrome Safari */
}
</style>