vue接入高德地图(web端地图、地图点标记Marker、地理编码)

1、接入准备工作，高德官方文档：

• 1.1、注册开发者账号。
• 
• 1.2、登录之后，点击控制台进入「应用管理」 页面「创建新应用」
• 
• 1.3、为应用添加key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」。
• 
• 1.4、2.0版本添加成功后，可获取到key值和安全密钥jscode

 

2、使用npm方式安装loader。

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

3、vue2中使用如下，vue3在高德官方文档中有示例。

• 创建地图容器，其中id在地图初始化的时候需要使用，具体看代码与注释。

<template>
  <div id="map"></div>
</template>

<script>
//引入 amap-jsapi-loader
import AMapLoader from "@amap/amap-jsapi-loader";
//安全密钥引入
window._AMapSecurityConfig = {
  securityJsCode: "申请的key对应的密钥",
};

export default {
  data() {
    return {
      map: null, //高德实例
      marker: null, //点标记 Marker
      geocoder: null, //逆向地理
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    //初始化
    initMap() {
      AMapLoader.load({
        key: "申请的key", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.CitySearch", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
          // 实例化
          this.map = new AMap.Map("map", {//设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 16, //初始化地图级别
            center: [106.583541,29.563475], //初始化地图中心点位置
          });

          // 自动获取用户IP，返回当前城市
          let citysearch = new AMap.CitySearch();
          citysearch.getLocalCity((status, result) => {
            if (status === "complete" && result.info === "OK") {
              console.log(result);
            }
          });

          // 地图点击事件--点标记标注
          this.map.on("click", this.handleClick);

          // 逆向地理编码插件
          this.geocoder = new AMap.Geocoder({
            // city: "010", //城市设为北京，默认：“全国”
            radius: 1000, //范围，默认：500
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 地图点击之后更新点标记
    handleClick(e) {
      let longitude = e.lnglat.getLng(); //经度
      let latitude = e.lnglat.getLat(); //纬度
      // 逆向地理编码
      this.geocoder.getAddress([longitude, latitude], (status, result) => {
        if (status === "complete" && result.info == "OK") {
          let address = result.regeocode.formattedAddress;
          // 更新点标记
          this.updateMap(address, [longitude, latitude]);
        } else {
          console.log("定位失败，请稍后重试");
        }
      });
    },
    // 更新点标记
    updateMap(address, lnglat) {
      // 移除已创建的 marker
      if (this.marker) this.map.remove(this.marker);
      // 同时设置地图中心点和缩放级别
      this.map.setZoomAndCenter(16, lnglat);
      // 自定义标记点
      this.marker = new AMap.Marker({
        position: lnglat,
        icon: "http://vdata.amap.com/icons/b18/1/2.png",
        anchor: "top-center",
        offset: new AMap.Pixel(-10, -10),
      });
      // 添加到实例
      this.marker.setMap(this.map);
      // 设置label标签，label默认蓝框白底左上角显示，样式className为：amap-marker-label
      this.marker.setLabel({
        direction: "top-center",
        offset: new AMap.Pixel(10, 0), //设置文本标注偏移量
        content:"<div style='width:250px;'>" + address + "</div>", //设置文本标注内容
      });
    },
  },
}
</script>

<style lang="scss">
#map {
  width: 600px;
  height: 300px;
}
</style>