vue中使用高德地图——加载高德地图几种方法

vue中使用高德地图——加载高德地图几种方法

总结在vue中 几种使用高德地图 api方法
引入原生高德地图报错’AMap’ is not defined的解决方法

文章目录

• vue中使用高德地图——加载高德地图几种方法
• 一、JS引入
• • 1.index.html
  • 2.vue.config.js
  • 3.vue文件中
• 二、npm下载
• • 1.参考高德地图官方文档，引入
  • 2.initAmap（）
  • 3.初始化后，再次调用地图

一、JS引入

1.index.html

在index.html（项目文件public文件夹）中引入的JS位置：1、头部 2、尾部 3、body中

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=YOURKEY"></script>

2.vue.config.js

module.exports = { }中

    configureWebpack: {
        externals: {
          'AMap': 'AMap' // 高德地图配置
        }
      }

3.vue文件中

<script>
import AMap from 'AMap'
</script>

二、npm下载

1.参考高德地图官方文档，引入

官方文档---->
https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-vue

在vue文件中与第一个不同，且调用地图方式不同

import AMapLoader from "@amap/amap-jsapi-loader";

2.initAmap（）

记得在data（）里写个map变量

data() {
    return {
      map: "",
    };
  },

如果你在网上看到使用AMap.xxx这种方法，要在 .then((AMap) => {}里才能使用AMap.xxx

initAMap() {
      AMapLoader.load({
        key: "xxx", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 13.5, // 初始化地图级别
          });

          //描绘签到范围
          let circle = new AMap.Circle({
            center: [0, 0], 
            radius: 700,
            fillColor: "#1772b4",
            fillOpacity: 0.2,
          });
          this.map.add(circle);

          this.map.addControl(new AMap.Scale());
          this.map.plugin(["AMap.ToolBar", "AMap.Scale"], () => {
            var toolbar = new AMap.ToolBar({
              position: "LT",
            });
            this.map.addControl(toolbar);
          });

          let geolocation = null;
          this.map.plugin(["AMap.Geolocation"], () => {
            geolocation = new AMap.Geolocation({
              enableHighAccuracy: true, // 是否使用高精度定位，默认：true
              timeout: 10000, // 设置定位超时时间，默认：无穷大
              buttonOffset: new AMap.Pixel(10, 20), // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
              //zoomToAccuracy: true, //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
              position: "RB", //  定位按钮的排放位置,  RB表示右下,LT LB RT RB
              GeoLocationFirst: true,
              showCircle: false,
            });
            this.map.addControl(geolocation); //添加控件
            geolocation.getCurrentPosition(); //自动定位
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },

3.初始化后，再次调用地图

load再次调用时不用像初始化里写key，甚至可以什么都不写
注意load里的{}不能少，及时里面没有内容（我就是少了个{}一直报错）

functionA() {
      AMapLoader.load({
        plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.Geolocation"],
      }).then((AMap) => {
        //load的{}不能少
        this.map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 15, // 初始化地图级别
          center:[0,0]
        });

        this.map.addControl(new AMap.Scale());
        this.map.plugin(["AMap.ToolBar", "AMap.Scale"], () => {
          var toolbar = new AMap.ToolBar({
            position: "LT",
          });
          this.map.addControl(toolbar);
        });

        //描绘签到范围
        let circle = new AMap.Circle({
		  center:[0,0]
          radius: 700,
          fillColor: "#1772b4",
          fillOpacity: 0.2,
        });
        this.map.add(circle);

        this.map.plugin(["AMap.Geolocation"], () => {
          var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认：true
            timeout: 10000, // 设置定位超时时间，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20), // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
            //zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
            buttonPosition: "RB", //  定位按钮的排放位置,  RB表示右下
            GeoLocationFirst: true,
            showCircle: false,
          });

这里分了两部分
在使用geolocation过程中触发事件推荐用以下方法

          this.map.addControl(geolocation); //添加控件
          geolocation.getCurrentPosition((status, result) => {
            if (status == "complete") {
              onComplete(result);
            } else {
              onError(result);
            }
          });

在geolocation的事件方法中，即使你是在 .then((AMap) => {}里，在事件function中也不能调用this.map添加组件(不知道为什么，希望有大佬指导一下，万分感谢)；为了解决这个问题，用了个迂回方法
let map2 = this.map;
再在function中使用map2去添加组件

          // let map2 = this.map;
          function onComplete(data) {
            curLng = data.position.getLng();
            curLat = data.position.getLat();

            // //描绘当前位置所在点
            // let curPointMarker = new AMap.Marker({
            //   position: [curLng, curLat],
            //   title: "当前所在位置",
            //   offset: new AMap.Pixel(70, 0), //偏移量，默认以marker左上角位置为基准点,前一个左右，后一个上下
            // });
            // map2.add(curPointMarker);
          }
          function onError(data) {
            // 定位出错
            alert("失败原因排查信息:" + data.message);
          }
        });
      });
    },