VUE中使用高德地图

1.下载高德地图插件

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

2.新建js文件，封装地图引入初始化代码

引入下载的插件
import AMapLoader from "@amap/amap-jsapi-loader";

//前段小葛

//抛出initMap初始化方法
export const initMap = () =>
  AMapLoader.load({
    key: "8dfbf62bdc04abbb13bbeca*********", // 申请好的Web端开发者Key，
                                                首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      "AMap.PolygonEditor",
      "AMap.Autocomplete",
      "AMap.PlaceSearch",//这些都是高德支持的部分API，选择需要得使用
      "AMap.Scale",
      "AMap.OverView",
      "AMap.ToolBar",
      "AMap.MapType",
      "AMap.PolyEditor",
      "AMap.CircleEditor",
      "AMap.Geocoder",
      "AMap.HeatMap",
    ],
  });

3.搜索高德地图API，进入高德地图官方页

4.注册账号，认证开发者，新建应用，获取key

 

 5.将代码中的key替换成你自己的key

 key: "8dfbf62bdc04abbb13bbeca*********", // 替换成你自己的key

 6.*.vue文件中引入该方法

//引入代码并建立地图盒子
<template>
  <div class="container" id="containerAdd"></div>
</template>

<script>
import { initMap } from "@/components/map/map.js";
export default {}
</script>
<style>
<style lang="scss" scoped>
.container {
//必须设置其尺寸
  height: 100vh;
  width: 100%;
}
</style>

7.地图加载

 data() {
    return {
      //必须清除原有才可以新建，否则一直都是旧的
      map: null,
      AMap: null,
    };
  },  
mounted() {
    //地图初始化
    initMap()
      .then(async (Amap) => {
        this.AMap = Amap;
        this.map = new Amap.Map("containerAdd", {
          //地图容器id与盒子id一致
          viewMode: "3D", //是否为3D地图模式
          zoom: 11, //初始缩放比例
          center: [118.040303, 35.690348], //中心点位置
        });
        //缩放到合适的比例
        this.map.setFitView();
        // this.polyEditor.open();
      })
      .catch((e) => {
        console.log(e);
      });
  },

实现效果

 8.去除高德地图的logo

<style lang="scss" scoped>
.container {
  height: 100vh;
  // height: calc(80vh - 45px);
  width: 100%;
}
>>> .amap-logo { //将其放到最底层即可
  z-index: -1;
}
>>> .amap-copyright {  
  z-index: -1;
}

实现效果