高德地图,用AMapLoader组件,点击地图添加点并获取经纬度

效果如图所示

在这块我用的是高德地图,使用的是AMapLoader组件,这样就省去了很多配置步骤

代码如下

  // 打开地图
    openMap() {
      this.mapBox = true;
      this.$nextTick(() => {
        this.initMap();
      });
    },
    // 初始化高德地图
    initMap() {
      AMapLoader.load({
        key: "xxxxxxxxx", //key值是key值 和安全密钥不同
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.GeoJSON",
          "AMap.MarkerClusterer",
          "AMap.MouseTool",
          "AMap.Geocoder",
        ], // 需要使用的的插件列表,用到的再次注册，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        // 初始化地图
        this.map = new AMap.Map("mapContainer", {
          viewMode: "3D", // 是否为3D地图模式
          zoom: 13, // 初始化地图级别
          center: [114.885796, 40.768555], //中心点坐标
          resizeEnable: true,
        });
        this.map.on("click", (e) => {
          let lat = e.lnglat.lat;
          let lng = e.lnglat.lng;
          this.addForm.longlat = `${lng},${lat}`;
          this.markersPosition = [e.lnglat.lng, e.lnglat.lat];
          // 点击坐标
          this.removeMarker();
          // 设置新的标记
          this.setMapMarker();
        });
      });
    },
    // 设置点击位置的标记
    setMapMarker() {
      let marker = new AMap.Marker({
        map: this.map,
        position: this.markersPosition,
      });
      // 将 markers 添加到地图
      this.markers.push(marker);
    },

    // 删除之前后的标记点
    removeMarker() {
      if (this.markers) {
        this.map.remove(this.markers);
      }
    },