Vue集成高德地图

高德地图官网：​​https://lbs.amap.com/​​

地图jsapi2.0 ​​ https://lbs.amap.com/api/jsapi-v2/documentation#pixel​​

地图jsapi  ​​https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare​​

示例 ​​https://lbs.amap.com/demo/list/jsapi-v2​​

高德地图开始之前，我们要拿到一个key才可以。

首先注册账号（​​https://console.amap.com/dev/index​​）然后进图应用管理 -> 我的应用 -> 创建新应用 -> 然后添加key 应该就可以了

引入 高德地图相关资源

public/index.html 

//注意（您在2021年12月02日申请以后的key需要配合您的安全密钥一起使用）
<script src="/AMap/load_amap_jsapi.js"></script> // 一定在上方
// 为了不出问题 版本写成1.4.15（2）
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.ToolBar"></script>

其中
AMap/load_amap_jsapi.js文件 

window._AMapSecurityConfig = {
  securityJsCode:'「您申请的安全密钥」',
}

注意：key和安全密钥要一块儿使用，如果只配置key，可能会有写api用不了 

 引入完成之后，我们可以全局或者随便找个组件打印一下AMap类

 这时候就可以使用了。

先给定一个地图容器（一定要有宽高），给予一个id，在实例化的时候传入的第一个参数就是该容器的id

 下面是我写的一个示例，大家可以参考一下，按需修改

<template>
  <div id="GaodeMapContainer">
    <input id="myInput" v-model="inputValue" type="text">
  </div>
</template>
<script>
let areaPolygons = [] // 查询的行政区域
export default {
  data() {
    return {
      myMap: "", // 地图实例
      mouseTool: "", //鼠标工具实例
      district: '',  // 行政区划搜索实例
      inputValue: '',  // 用来搜索行政区
      // timer: null  // 防抖处理
    };
  },
  watch: {
    inputValue() {
      if(this.timer) clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.seachArea1()
      }, 1500)
    }
  },
  mounted() {
    console.log(AMap,'AMap-->>')
    // 初始化一个地图
    this.initMap();
  },
  methods: {
    initMap() {
      //  实例化
      this.myMap = new AMap.Map("GaodeMapContainer", {
        resizeEnable: true,
        center: [117.0, 36.4], //中心点坐标(东经， 北纬) (jinan)
        zoom: 10.7, //级别
        zooms: [6, 23],  //设置地图级别范围
        pitch: 35, // 地图俯仰角度，有效范围 0 度- 83 度
        viewMode: "3D", // 地图模式
        terrain:true,
        // mapStyle: "amap://styles/whitesmoke",//设置地图背景
      });
      // 坐标点（点点点标记哦）
      let marker = new AMap.Marker({
        position: new AMap.LngLat(117.0, 36.4), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "济南",
        offset: new AMap.Pixel(-100, -100),
        // icon: new AMap.Icon({
        //   size: new AMap.Size(50, 100),
        //   image: require("@/assets/img/bigScreen/screen1/选中.png"),
        //   imageSize: new AMap.Size(50, 100),
        // })
      });
      // 将创建的点标记添加到已有的地图实例：
      this.myMap.add(marker);
      marker.on("click", e => {  // 监听Marker的点击
        var newCenter = [117.0, 36.4];
        this.myMap.setZoom(19);
        this.myMap.setCenter(newCenter);
        //map.remove(this.videoMarkers); //移除之前的marker标记
      });
      // 异步加载多个插件 -- 同时引入工具条插件，比例尺插件和鹰眼插件
      AMap.plugin(
        [
          "AMap.ToolBar", // 工具条，控制地图的缩放、平移等
          "AMap.Scale", // 比例尺，显示当前地图中心的比例尺
          // "AMap.OverView",
          "AMap.MapType", // 图层切换，用于几个常用图层切换显示
          "AMap.Geolocation", // 定位，提供了获取用户当前准确位置、所在城市的方法
          "AMap.MouseTool", // 鼠标工具插件
          "AMap.DistrictSearch", // 行政区查询服务，提供了根据名称关键字、citycode、adcode 来查询行政区信息的功能
          // "Map3D"
        ], () => {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          this.myMap.addControl(new AMap.ToolBar());
 
          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          this.myMap.addControl(new AMap.Scale());
 
          // // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
          // this.myMap.addControl(new AMap.OverView({isOpen: true}));
 
          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          this.myMap.addControl(new AMap.MapType());
 
          // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
          this.myMap.addControl(new AMap.Geolocation());
          
          // 测距、测面积使用
          this.mouseTool = new AMap.MouseTool(this.myMap);
 
          /**
           *  行政区搜索使用
           */
          this.district = new AMap.DistrictSearch({
            level: 'city',// 关键字对应的行政区级别，country：国家 province：省/直辖市 city：市 district：区/县 biz_area：商圈
            showbiz: true,  // 是否显示商圈，默认值true 可选为true/false，为了能够精准的定位到街道，特别是在快递、物流、送餐等场景下，强烈建议将此设置为false
            extensions: 'all', //否返回行政区边界坐标点，默认值：base，不返回行政区边界坐标点，取值：all，返回完整行政区边界坐标点
            subdistrict: 1, //  0：不返回下级行政区 1：返回下一级行政区 2：返回下两级行政区 3：返回下三级行政区(默认值 1)
          });
        }
      );
      /**
       *  鼠标工具---------------------------
       */
      // this.startRanging()  // 测距调用
      // this.startMeasuredArea()  // 测面积调用
      // this.startPolygon()  // 鼠标绘制区域
      // 停止 测距、面积...
      // setTimeout(() => {
      //   this.mouseTool.close(true); //关闭，并清除覆盖物
      // }, 10000);
    },
    //  开始测距
    startRanging() {
      this.mouseTool.rule({
        startMarkerOptions: {
          //可缺省
          icon: new AMap.Icon({
            size: new AMap.Size(19, 31), //图标大小
            imageSize: new AMap.Size(19, 31),
            image: "//webapi.amap.com/theme/v1.3/markers/b/start.png",
          }),
          offset: new AMap.Pixel(-9, -31),
        },
        endMarkerOptions: {
          //可缺省
          icon: new AMap.Icon({
            size: new AMap.Size(19, 31), //图标大小
            imageSize: new AMap.Size(19, 31),
            image: "//webapi.amap.com/theme/v1.3/markers/b/end.png",
          }),
          offset: new AMap.Pixel(-9, -31),
        },
        midMarkerOptions: {
          //可缺省
          icon: new AMap.Icon({
            size: new AMap.Size(19, 31), //图标大小
            imageSize: new AMap.Size(19, 31),
            image: "//webapi.amap.com/theme/v1.3/markers/b/mid.png",
          }),
          offset: new AMap.Pixel(-9, -31),
        },
        lineOptions: {
          //可缺省
          strokeStyle: "solid",
          strokeColor: "#FF33FF",
          strokeOpacity: 1,
          strokeWeight: 2,
        },
        //同 RangingTool 的 自定义 设置，缺省为默认样式
      });
    },
    //  开始测面积
    startMeasuredArea() {
      this.mouseTool.measureArea({
        strokeColor: "#80d8ff",
        fillColor: "#80d8ff",
        fillOpacity: 0.3,
      });
    },
    //  鼠标绘制区域
    startPolygon() {
      this.mouseTool.polygon({
        strokeColor: "#1791fc",
        strokeOpacity: 1,
        strokeWeight: 1,
        fillColor: "#1791fc",
        fillOpacity: 0.4,
        strokeStyle: "solid",
        extData: {
          id: "123",
        },
      });
      this.mouseTool.on("draw", (event) => {
        let poly = event.obj; // 绘制完多边形实例对象
        console.log(poly.getOptions(), "绘制图形顶点信息列表-------->");
        console.log(poly.getOptions().path, "绘制图形的自定义属性--------> ");
        // this.mouseTool.close();
        // this.mouseTool = null;
      });
    },
    /**
     *  可以监听input框 去调用该方法
     *  最好是做个防抖处理
     *  行政区域查询
     */
    seachArea1() {
      if(!this.inputValue) {
        this.myMap.remove(areaPolygons)//清除上次结果
        return
      }
      console.log(this.inputValue,'value-->>')
      console.log(this.district,'district-->>')
      this.district.search(this.inputValue, (status, result) => {
        console.log(result,'result-->>')
        this.myMap.remove(areaPolygons)//清除上次结果
        areaPolygons = [];
        var bounds = result.districtList[0].boundaries;
        if (bounds) {
          for (var i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            var polygon = new AMap.Polygon({
              strokeWeight: 3,
              path: bounds[i],
              fillOpacity: 0,
              fillColor: '#80d8ff',
              strokeColor: 'red'
            });
            areaPolygons.push(polygon);
          }
        }
        //添加高度面 - 3D
        var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });
        this.myMap.add(object3Dlayer);
        var wall = new AMap.Object3D.Wall({
          path: bounds,
          height: 30000,
          color: "#0088ffcc",
        });
        wall.transparent = true;
        wall.backOrFront = "both";
        object3Dlayer.add(wall);
        //  - 3D 结束
        console.log(areaPolygons)
        this.myMap.add(areaPolygons)
        this.myMap.setFitView(areaPolygons);//视口自适应
      });
    },
    //  只显示搜索的区域
    seachArea2() {
      if(!this.inputValue) {
        this.myMap.remove(areaPolygons)//清除上次结果
        return
      }
      console.log(this.inputValue,'value-->>')
      console.log(this.district,'district-->>')
      this.district.search(this.inputValue, (status, result) => {
        // 外多边形坐标数组和内多边形坐标数组
        let outer = [
          new AMap.LngLat(-360, 90, true),
          new AMap.LngLat(-360, -90, true),
          new AMap.LngLat(360, -90, true),
          new AMap.LngLat(360, 90, true),
        ];
        let holes = result.districtList[0].boundaries;
        let pathArray = [outer];
        pathArray.push.apply(pathArray, holes);
        let polygon = new AMap.Polygon({
          pathL: pathArray,
          strokeColor: "rgb(35,226,246)",
          strokeWeight: 4,
          strokeOpacity: 0.5,
          fillColor: "#f4f4f4",
          fillOpacity: 1,
          strokeDasharray: [10, 2, 10],
        });
        polygon.setPath(pathArray);
        this.myMap.add(polygon);
      });
    }
  },
};
</script>
<style scoped>
#GaodeMapContainer {
  width: 100%;
  height: 100%;
  position: relative;
}
#myInput {
  position: absolute;
  left: 10%;
  top: 5%;
  z-index: 999;
}
</style>

另外一种方式： 

使用vue-amap 一套专门用于vue的高德地图插件

vue-amap参考文档 ​​https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install​​ 

1. 安装 

npm install vue-amap -S

2. main.js引入 

import VueAMap from 'vue-amap';

Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: 'your amap key',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
});

3. 组件中使用 

<el-amap :vid="'MapBox'" :zoom="zoom" :center="center"></el-amap>