vue + 高德地图如何实现拖拽监听？

Z时代
2024-03-03
分类：IT

为什么这样拖拽地图时不会触发‘success’回调执行console输出？
网上的方法都是通过

<script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.ToolBar'></script>
<!-- UI组件库 1.0 --><script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>

这样的方式实现，但是我想通过AMapLoader实现

// 初始化
    initMap(){
      const that = this
      AMapLoader.load({
          key:"myKey",             // 申请好的Web端开发者Key，首次调用 load 时必填
          version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins:['AMap.Geolocation'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          AMapUI: {// 加入UI组件，重点就是这个
            version: '1.1',
            plugins: ['misc/PositionPicker']//SimpleMarker设置自定义图标，PathSimplifier轨迹展示组件
          }
      }).then((AMap)=>{
        that.AMap = AMap
        that.map = new AMap.Map("mapcontainer",{  //设置地图容器id
            viewMode:"3D",    //是否为3D地图模式
            zoom: 15,           //初始化地图级别
            center: that.mapCenter, //初始化地图中心点位置
            enableHighAccuracy: true, //是否使用高精度定位，默认:true
            zoomToAccuracy: true,
            scrollWheel: false,
            dragEnable: true, //是否可拖动
            resizeEnable: true,
            rotateEnable: true,
        });
        that.initDrapMap()
      }).catch(e=>{
          console.log(e);
      })
    },
initDrapMap(){
      const that = this
      AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
        that.positionPicker = new PositionPicker({
            mode:'dragMap',//拖动地图模式
            map: that.map,
        });
        //成功回调函数
        that.positionPicker.on('success', function(positionResult) {
          console.log("positionResult",positionResult)
        });
        //失败回调函数
        that.positionPicker.on('fail', function(positionResult) {
        });
      });    },