在Vue中使用高德地图

一，申请高德key和密钥

前往高德地图开发平台https://lbs.amap.com/，登录账号，前往控制台，点击我的应用，创建新应用，输入应用名字，选择类型，不晓得要用什么就选其他。新建好之后，点击添加，输入名称，选择你的服务平台。

提交之后就能看到你的key和安全密钥了。

二，在vue中的使用（添加了搜索功能）

1. 先安装 @amap/amap-jsapi-loader 

cnpm i @amap/amap-jsapi-loader -S

npm i @amap/amap-jsapi-loader -S

2.在项目中新建 MapContainer.vue 文件，用作地图组件。

3.在 MapContainer.vue 地图组件中创建 div 标签作为地图容器 ，并设置地图容器的 id 属性为 container；

<template>
    <div id="box">
        <span class="maplayouts">
            <input id="mapInput" class="mapInput" v-model="mapData.address" placeholder="请输入地址搜索" />
            <div id="container"></div>
        </span>
    </div>
</template>

4.设置地图容器样式

#container {
    padding: 0rem;
    margin: 0rem;
    width: 100%;
    height: 10.6667rem;
}

5.在地图组件 MapContainer.vue 中引入 amap-jsapi-loader 

6.地图初始化函数 initMap，这里简单实现了搜索功能

 methods: {
        initMap() {
            AMapLoader.load({
                key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ['AMap.AutoComplete', 'AMap.PlaceSearch'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                // "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                this.map = new AMap.Map("container", {  //设置地图容器id
                    viewMode: "2D",    //是否为3D地图模式
                    zoom: 10,           //初始化地图级别
                    center: [105.602725, 37.076636], //初始化地图中心点位置

                });
                var autoOptions = {
                    // 城市，默认全国 
                    // city: "北京",
                    // 使用联想输入的input的id
                    input: "mapInput"
                }
                this.auto = new AMap.AutoComplete(autoOptions);
                this.placeSearch = new AMap.PlaceSearch({
                    map: this.map,
                    // panel: "panel", // 结果列表将在此容器中进行展示。
                    // city: "010", // 兴趣点城市
                    autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                    extensions: 'base' //返回基本地址信息
                });
                this.auto.on("select", this.select);//注册监听，当选中某条记录时会触发
            }).catch(e => {
                console.log(e);
            });
        },
        select(e) {
            console.log(e, 78997);
            this.placeSearch.setCity(e.poi.adcode);
            this.placeSearch.search(e.poi.name);  //关键字查询查询
        },
        

7.调用地图初始化函数：mounted 函数会在 DOM 初始化完成后调用，建议在 mounted 函数中调用地图初始化方法。

mounted(){
    //DOM初始化完成进行地图初始化
    this.initMap();
}