vue项目引入高德js-api

如何在vue项目中使用高德地图
注意页面创建地图时要加延迟

1、package.json引入依赖 amap

  "devDependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
    }

2、项目 main.js 全局引入

import AMapLoader from "@amap/amap-jsapi-loader";
AMapLoader.load({
  key: "xxxx", // 申请好的Web端开发者Key，首次调用 load 时必填
  version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  plugins: [
      "Map3D",
      "AMap.DistrictSearch",
      "AMap.Icon",
      "AMap.Marker",
      "AMap.MoveAnimation",
      "AMap.Polyline",
  ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等，如果是地图控件，必须再 map.addControl添加
}).then(AMap => {
  Vue.use(AMap)
  console.log('高德地图初始化成功')
  // window.Amap = amap
}).catch(e => {
  throw (new Error('加载高德地图失败：' + e))
})

3、页面使用

注意页面创建地图时要加延迟，否则可能为空白页，因为 main.js 中全局引入还未成功

<template>
  <div class="amap-container">
    <!-- 地图容器 -->
    <div id="amapContainer" class="amap-content"></div>
  </div>
</template>

<script>
export default {
  name: 'Amap',
  data() {
    return {
    }
  },
  mounted() {
    // 初始化地图 加入延迟，否则地图可能为空白页面
    debugger
    setTimeout(() => {
        this.initMap()
    }, 2000);
    
  },
  methods: {
    // 初始化地图
    initMap() {
      debugger
      // 检查是否已加载高德地图API
      if (window.AMap) {
        this.qwe()
      }
    },

    //自动定位
    qwe() {
      let that = this;
      var map = new AMap.Map("amapContainer", {
        resizeEnable: true,
        viewMode: '3D',
        zoom: 13
      });

      var mapObj = new AMap.Map('amapContainer')
      mapObj.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, //是否使用高精度定位，默认:true
          timeout: 10000, //超过10秒后停止定位，默认：5s
          buttonPosition: "RB", //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            that.onComplete(result);
          } else {
            that.onError(result);
          }
        });
      });
    }, //解析定位结果
    onComplete(data) {
      console.log(data);
      var str = [];
      str.push("定位结果:" + data.position);
      str.push("定位类别:" + data.location_type);
      if (data.accuracy) {
        str.push("精度:" + data.accuracy + " 米");
      } //如为IP精确定位结果则没有精度信息
      str.push("是否经过偏移:" + (data.isConverted ? "是" : "否"));
      console.log("定位成功" + str); 
      str.join("<br>");
      alert(5555)
      var map = new AMap.Map("amapContainer", {
        resizeEnable: true,
        center:[data.position.lng, data.position.lat],
        zoom: 15
      });

      var marker = new AMap.Marker({
        postion:[data.position.lng, data.position.lat],
      });
      map.add(marker);

    },
    //解析定位错误信息
    onError(data) {
      alert(data);
    }
  }
}
</script>

<style scoped>
.amap-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 200px;
}

.amap-content {
  width: 100%;
  height: 100%;
}
</style>