开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情

Vue 之中使用高德地图

第一种方式 高德web JSAPI 的使用

Vue 之中使用 高德地图（@amap/amap-jsapi-loader），通过申请的JSAPI的高德key来进行地图的渲染

需要环境准备 vue-amap ： vue-amap 基于 Vue 2.x 与高德的地图组件

高德官方介绍：地图 JS API

1、安装

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

2、引入

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

注意：

部分key需要同时添加安全密钥

// 添加高德安全密钥wz
window._AMapSecurityConfig = {
  securityJsCode: ""
};

3、使用

mounted挂载里面渲染一次key

 AMapLoader.load({
      key: "自己的key", // 申请好的Web端开发者Key，首次调用 load 时必填
      //version: "2.0",指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Driving', 'AMap.Marker'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
      console.log("成功")

    }).catch(e => {
      console.log(e);
})
this.initMap(); //调用方法initMap初始化地图

方法initMap初始化地图 ，地图可正确显示

// 初始化
   initMap() {
     AMapLoader.load({//可多次调用load
        // key: "a693b9da7fda26eff89fe723501f9bc4", // 申请好的Web端开发者Key，首次调用 load 时必填
        // version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        // plugins: ["AMap.AutoComplete", "AMap.PlaceSearch", "AMap.Driving", "AMap.DragRoute"],
        plugins: ['AMap.Marker']
      })
        .then((AMap) => {
          this.map = new AMap.Map("containerfo", {
            // 设置地图容器id
            viewMode: "2D", //  是否为3D地图模式
            zoom: 13, // 初始化地图级别
            center: [114.268691, 30.401227], //中心点坐标
            resizeEnable: true,
          });
          // 监听鼠标点击事件
          // this.map.on("click", this.clickMap);
          // 函数调用（写入你先所需要的事件函数）
          // this.searchMap(); // POI关键字搜索
          // ...其他
        })
        .catch((e) => {
          console.log(e);
      });
},
    

监听鼠标点击事件添加地图标记

地图渲染成功以后调用map点击事件

// 添加监听鼠标点击事件 this.map.on("click", this.clickMap);

点击调用clickMap方法

clickMap(e) {
      this.lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
      this.setMarker(this.lnglat);
  },

点击设置经纬度以后调用setMarker方法向地图之中添加标记

 //  地图之中添加标记
    setMarker(lnglat) {
      console.log("位置", lnglat); // lnglat=[经度,纬度]
      let marker = new AMap.Marker({
        position: lnglat,
      });
      marker.setMap(this.map);
      this.markers.push(marker); // 在data中记录标记点
},

❤功能补充

每次点击移除之前的标记

setMarker方法添加

this.removeMarker(); 是否移除之前的标记

removeMarker方法

 // 删除之前后的标记点
    removeMarker() {
    // 判断是否存被标记的点，有--->移除
      if (this.markers) {
        this.map.remove(this.markers);
      }
    },

后续待进一步补充中...

删除标记

关键字搜索

驾车路线

开发过程之中可能遇到的各种问题：欢迎补充

❤ 提示：AMap is not defined

解决1：出现这个问题可能是因为没有找到AMap对象：没效果

// 只需要在new 实例化对象AMap前面添加window就好。后面的xxx为你自己想要的操作。例如添加marker
// new window.AMap.Marker({})
    new window.AMap.xxx({
	
})

解决2：页面引入

 解决 √
 import AMapLoader from '@amap/amap-jsapi-loader';

❤ 提示：请填写key

更改自己使用的key，确保是同类型key

❤ 提示：没报错，但是地图出不来

查看是否设定容器的宽高

❤ 提示:高德逆地理编码 USERKEY_PLAT_NOMATCH 错误

请求中使用的key与绑定平台不符，例如：开发者申请的是js api的key，却用来调web服务接口 切换web端（JS api）的key就可以

❤ 提示: 高德地图报错 Uncaught TypeError: AMap.Geocoder is not a constructor

出现这个报错可以添加 AMap.plugin("AMap.Geocoder",function(){})`

1.npm 安装

npm install vue-amap --save

CDN方式，目前可通过unpkg.com/vue-amap获取最新版本的资源。

<script src="https://unpkg.com/vue-amap/dist/index.js"></script>