vue项目引入高德地图

1.npm下载

npm i @amap/amap-jsapi-loader --save
npm install coordtransform  --涉及到坐标转换不想自己写的可以安装这个

2.index.html文件中引入

  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "安全秘钥",
    };
  </script>

3.具体页面中定义容器

<div class="bottom" id="detailsMap"></div>

4.

//引入高德地图
import AMapLoader from "@amap/amap-jsapi-loader";
 AMapLoader.load({
        key: "应用key",
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺少时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.GeoJSON", "AMap.Geocoder"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等，更多插件请看官方文档
      })
        .then((AMap) => {
          this.map = new AMap.Map("detailsMap", {
            zoom: 13, //设置地图的缩放级别
            zooms: [8, 20], //设置地图的缩放级别区间
            center: [104.167501, 31.12678], //设置地图中心点坐标
            // mapStyle: "amap://styles/darkblue", //设置地图的显示样式，更改darkblue为你想要的样式
            features: ["road", "point"], //设置地图的底图元素，缺少则显示全部元素，bg区域面、point兴趣点、road道路及道路标注、building建筑物
          });
          this.geocoder = new AMap.Geocoder({
            radius: 1000 //范围，默认：500
          });
          this.map.on('click', this.clickMap);  //监听地图点击事件
        })
        .catch((err) => {
          console.log(err, "err");
        });