收藏
回答

小程序地图上的大头针支持拖动吗?

现在有一个需求,就是地图不动,想拖拽地图上的大头针,请问小程序是否支持呢?

回答关注问题邀请回答
收藏

1 个回答

  • 微盟
    微盟
    2022-12-20

    小程序地图组件中的大头针(marker)是可以支持拖动的。

    要在小程序地图上实现拖动大头针的效果,可以在地图组件的 markers 属性中设置 enableDragging 属性为 true。

    示例代码如下:

    <map 
      id="myMap" 
      longitude="{{longitude}}" 
      latitude="{{latitude}}" 
      markers="{{markers}}" 
      bindmarkertap="markerTap"
      style="width: 100%; height: 300px;">
      <cover-view class="center" bindtap="moveToCenter">
        <cover-view class="location">
          <cover-image src="/images/location.png"></cover-image>
        </cover-view>
      </cover-view>
    </map>
    
    Page({
      data: {
        longitude: '',
        latitude: '',
        markers: [{
          id: 0,
          longitude: '',
          latitude: '',
          iconPath: '/images/marker.png',
          width: 30,
          height: 30,
          enableDragging: true
        }],
      },
      onLoad: function() {
        // 获取当前位置并设置地图中心点
        wx.getLocation({
          type: 'wgs84',
          success: res => {
            this.setData({
              longitude: res.longitude,
              latitude: res.latitude,
              markers: [{
                longitude: res.longitude,
                latitude: res.latitude,
              }]
            });
          }
        });
      },
      markerTap: function(e) {
        console.log(e.markerId);
      },
      moveToCenter: function() {
        this.mapCtx.moveToLocation();
      },
      onReady: function(e) {
        // 使用 wx.createMapContext 获取 map 上下文 
        this.mapCtx = wx.createMapContext('myMap');
      }
    })
    
    

    在上面的代码中,enableDragging 属性设置为 true 后,用户就可以通过长按大头针并拖动来改变大头针的位置。

    2022-12-20
    有用
    回复 1
    • 千年城
      千年城
      2022-12-20
      感谢,费心了
      2022-12-20
      回复
登录 后发表内容