vue + SuperMap iClient（Leaflet）拖

<template>
  <div id="mapView"></div>
</template>

<script>
var host = "https://iserver.supermap.io";
var map,
  url = host + "/iserver/services/map-china400/rest/maps/China_4326",
  addressUrl =
    host + "/iserver/services/addressmatch-Address/restjsr/v1/address",
  addressMatchService = L.supermap.addressMatchService(addressUrl);

var iconMarker = new L.Icon({
  iconUrl:
    "https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/images/marker-icon.png",
  shadowUrl:
    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41],
});
import L from "leaflet";
export default {
  mounted() {},
  methods: {
    addMap(x, y) {
      let centX = x ? x : "116.383572",
        centY = y ? y : "116.383572";
      let _this = this;

      if (map) {
        // map.remove();
      } else {
        map = L.map("mapView", {
          crs: L.CRS.EPSG4326,
          center: [centY, centX],
          maxZoom: 18,
          zoom: 11,
        });
        L.supermap.tiledMapLayer(url).addTo(map);
      }

      let marker = null;

      // console.log(marker);
      if (marker) {
        // 如果有marker,则移除
        map.removeLayer(marker);
      }

      // 如果传入经纬度  将这个点展示到地图上
      if (x && y) {
        marker = L.marker([y, x], {
          icon: iconMarker,
          draggable: true,
        });

        map.addLayer(marker);
      }

      map.on("click", function (evt) {
        // console.log(evt);
        let lat = evt.latlng.lat,
          lng = evt.latlng.lng;
        // console.log(lat, lng);
        _this.getAddr(lng, lat);
        if (marker) {
          // 如果有marker,则移除
          map.removeLayer(marker);
        }
        marker = L.marker([lat, lng], {
          icon: iconMarker,
          draggable: true,
        });

        map.addLayer(marker);

        marker.on("dragend", function (e) {
          // console.log(e);
          // console.log(marker.getLatLng());
          let lat = marker.getLatLng().lat; //{lat: 39.943885803222656, lng: 116.35001285665902}
          let lng = marker.getLatLng().lng;
          _this.getAddr(lng, lat);
        });
      });
    },

    // 获取经纬度 解析地址
    getAddr(lng, lat) {
      let _this = this;
      var geoDecodeParam = new SuperMap.GeoDecodingParameter({
        filters: "",
        fromIndex: "0",
        geoDecodingRadius: "-1",
        maxReturn: "-1",
        prjCoordSys: "{epsgcode:4326}",
        toIndex: "10",
        x: lng,
        y: lat,
      });
      addressMatchService.decode(geoDecodeParam, function (result) {
        // console.log(result);
        if (result.result.length > 0) {
          // console.log(result.result[0]);
          let obj = {
            centerx: lng,
            centery: lat,
            position: result.result[0].address,
          };
          _this.$emit("getAddr", obj);
        } else {
          _this.$message({
            message: "未解析出地址，请重新选择",
            type: "warning",
          });
        }
        // map.setView(L.latLng(39.914714, 116.383572), 10);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#mapView {
  width: 100%;
  height: 500px;
}
</style>