vue中引入高德地图

地图场景经常出现在需求中，今天让我们用vue+高德地图写一个简单的地图页面(点击添加坐标点位)。

1.在项目中引入高德npm包

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

2.新建一个vue页面map.vue

引入amap脚手架

import AMapLoader from '@amap/amap-jsapi-loader';

3.注册高德地图账号，获取Key
高德地图官网

4.实例地图

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

这样我们的地图就出来了，是不是很简单。
现在为我们的地图添加点击事件

        let that = this;
        //添加点击事件
        this.map.on('click', function (ev) {
          // 如果存在标记清除标记
          if (that.marker) {
            that.map.remove(that.marker);
          }
          console.log(ev, "ev")
          // 获取经纬度
          var lnglatX = ev.lnglat.lng;
          var lnglatY = ev.lnglat.lat;
          // 点击地图添加标记
          that.marker = new AMap.Marker({
            position: new AMap.LngLat(lnglatX, lnglatY),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '位置'
          });
          // 添加标记
          that.map.add(that.marker);

这样我们的需求就做好了，让我们看看效果吧。

是不是很简单呢，快去试试吧。
下面为大家贴了完整代码