vue项目中引入高德地图

• 1、最终的效果图

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7tDhdbva-1629082364076)(images/image-20210816080301246.png)]
  

• 2、高德地图上注册自己账号并且创建属于自己的key

• 3、在vue中安装依赖包

  npm install @amap/amap-jsapi-loader
  

• 4、在main.js中引入

  import AMapLoader from '@amap/amap-jsapi-loader';
  
  AMapLoader.load({
    // 替换你自己的key
    key: '52a1ae0xxxb038e69e82e7',
    version: '2.0',
    plugins: [
      'AMap.MoveAnimation',
      'AMap.ToolBar',
      'AMap.MarkerCluster',
      'AMap.CircleEditor',
    ],
  }).then((AMap) => {
    Vue.prototype.$AMap = AMap;
  });
  

• 5、在组件中使用

  <div id="map-container" class="overview__map"></div>
  

  methods: {
      mapInit() {
        this.mapSpin = true
        if (this.map === null) {
          setTimeout(() => {
            this.map = new this.$AMap.Map("map-container", {
              // 行政区域
              zoom: 15,
              // 是否缩放
              resizeEnable: true,
              // 鼠标样式
              defaultCursor: 'pointer',
              //初始地图中心点
              center: [121.498586, 31.239637], 
            })
            this.map.on("complete", () => {
              this.mapSpin = false
            })
          }, 100)
        } else {
          this.mapSpin = false
        }
      },
  }
  

• 6、更多的参数配置，请参考