Vue高德地图使用

1、首先去高德地图开放平台官网注册一个账号

https://lbs.amap.com/product/wia

申请好web端开发者key就可以开始使用啦

1、安装

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

2、封装地图组件

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

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  beforeCreate() {
    AMapLoader.load({
      key: "aa3dac8335f8831b0bf80a66a28b57e4", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      AMapUI: {
        // 是否加载 AMapUI，缺省不加载
        version: "1.1", // AMapUI 缺省 1.1
        plugins: [], // 需要加载的 AMapUI ui插件
      },
      Loca: {
        // 是否加载 Loca， 缺省不加载
        version: "1.3.2", // Loca 版本，缺省 1.3.2
      },
    })
      .then((AMap) => {
        this.$nextTick(() => this.initMap(AMap));
      })
      .catch((e) => {
        console.error(e);
      });
  },
  mounted() {
    // console.log(window.AMap, "window.AMap");
  },
  methods: {
    initMap(AMap) {
      // 初始化map实例
      this.map = new AMap.Map(this.$refs.mapcontainer);
      var that = this;
      AMap.plugin(["AMap.Geolocation", "AMap.Driving"], function () {
        //异步同时加载多个插件
        var geolocation = new AMap.Geolocation();
        that.map.addControl(geolocation);
        // var driving = new AMap.Driving(); //驾车路线规划
        // driving.search(/*参数*/);
      });

      // 或者使用 $refs 获取节点
      // this.map = new AMap.Map(this.$refs.container);
    },
  },
};
</script>

<style scoped lang="scss">
#map {
  width: 800px;
  height: 500px;
  background-color: pink;
  margin: 0 auto;
  margin-top: 15px;
}
</style>

3、在需要的地方引入组件并使用

 //使用组件
<templete>
   <MyMap/>
</templete>

//引入组件
import MyMap from './MyMap.vue'
components:{
MyMap //祖册组件
}