vue对接高德地图

vue对接高德地图

官网：https://lbs.amap.com/

目前对接的文档：https://lbs.amap.com/api/javascript-api/guide/abc/quickstart

没有太多时间解释，先做一个案例。不用其他插件，只需要这句代码即可执行，没有在其其他文件中做任何配置。

<template>
  <div>
    <div id="container"></div>
    <input
      type="text"
      readonly="true"
      id="lnglat"
      value="106.679559, 26.559994"
    />
  </div>
</template>

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=af261609c943b01b28c7cf835c5344df"></script> 
<script>
export default {
  data() {
    return {
      gpsapi: [106.679559, 26.559994],
    };
  },

  components: {},

  created() {},
  methods: {},

  mounted() {
    window.onLoad = function () {
      var markers = [];
      var map = new AMap.Map("container", {
        pitch: 60, // 地图俯仰角度，有效范围 0 度- 83 度
        zoom: 17, //级别
        center: [sessionStorage.getItem("lng"), sessionStorage.getItem("lat")], //中心点坐标
        viewMode: "3D", //使用3D视图
        resizeEnable: true, // 获取鼠标点的位置
      });
      // 创建一个 Marker 实例：
      var marker = new AMap.Marker({
        position: new AMap.LngLat(
          sessionStorage.getItem("lng"),
          sessionStorage.getItem("lat")
        ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      });
      //   将创建的点标记添加到已有的地图实例：
      map.add(marker);
      // 将标记添加到数组中
      markers.push(marker);

      //为地图注册click事件获取鼠标点击出的经纬度坐标
      map.on("click", function (e) {
          // 移除已创建的 marker
        map.remove(markers);
        sessionStorage.setItem("lng", e.lnglat.lng);
        sessionStorage.setItem("lat", e.lnglat.lat);
        // 创建一个 Marker 实例：
        var marker = new AMap.Marker({
          position: new AMap.LngLat(
              // 将经纬度保存到浏览器中，以为这里采用的是document操作，而vue不是使用document操作的，所以保存到浏览器中作为中间数据传输对象
            sessionStorage.getItem("lng"),
            sessionStorage.getItem("lat")
          ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        });
        markers.push(marker);
        // 将创建的点标记添加到已有的地图实例：
        map.add(marker);
      });
    };

    var key = "af261609c943b01b28c7cf835c5344df";
    var url = `https://webapi.amap.com/maps?v=1.4.15&key=${key}&callback=onLoad`;
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  },
};
</script>

<style>
#container {
  width: 100%;
  height: 2000px;
}
</style>