微信小程序地图组件 手绘地图交互(标记和导航功能实现)

1. 加载地图并显示标记：通过调用 API 加载数据，并根据数据在地图上添加标记。标记的样式根据数据的类型不同而变化，比如使用不同的图标来表示不同的地点类型。
2. 点击标记切换标注显示状态：当用户点击地图上的标记时，可以切换标记的 callout 显示状态。通过点击标记，callout 的显示方式在 "BYCLICK" 和 "ALWAYS" 之间切换。
3. 点击 callout 导航：当用户点击标记的 callout 时，可以导航到特定页面。在本例中，通过点击 callout 可以导航到文章详情页，并传递了关于标记的信息作为参数。

这个小程序示例演示了如何在微信小程序中使用地图组件，以及如何在地图上添加标记和设置标记的交互功能，使用户能够查看地点的详细信息并进行导航操作。

<map
 id="map"
 latitude="{{latitude}}"
 longitude="{{longitude}}"
 markers="{{markers}}"
 show-location
 bindmarkertap="onMarkerTap"
 bindcallouttap="onCalloutTap"
 scale="{{scale}}"
 style="width: 100%;height:100vh;"
>
</map>

data:{
    latitude: 31.209652,
    longitude: 121.389248,
    scale: 12.5,
    markers: [],
   }
   
   async onLoad () {
       wx.showLoading({
          title: '加载中',
          mask: true
        })
        var search = "isPublish:true";
          if (this.data.currentTag) {
            search += ",type~" + this.data.currentTag;
          }
          search += "&sort=seqNo~asc,createTime~asc";
        var ret = await api.user.getActvenue(search, page, -1);
        const markers = ret.content.map((item, index) => {
          let iconPath;
          if (item.type === 'culture') {
            iconPath = '/images/culture.png';
          } else if (item.type === 'show') {
            iconPath = '/images/show.png';
          } else if (item.type === 'art') {
            iconPath = '/images/art.png';
          }else if (item.type === 'traval') {
            iconPath = '/images/traval.png';
          }else if (item.type === 'mall') {
            iconPath = '/images/mall.png';
          }else{
            iconPath = '/images/mapDraw.png';
          }
          let joinCluster;
          if (item.type === 'culture') {
            joinCluster = true;
          } else {
            joinCluster = false;
          }
          return {
            callout: {
              content: item.title + ' ﹥',
              color: '#000000',
              fontSize: 14,
              borderRadius: 10,
              bgColor: '#ffffff',
              padding: 5,
              display: 'BYCLICK',
            },
            width: 34,
            height: 34,
            id: index,
            latitude: Number(item.coordinate.latitude),
            longitude: Number(item.coordinate.longitude),
            iconPath: iconPath,
            'aria-id': item.id,
            'aria-name': item.title,
            'aria-type': item.type,
            // joinCluster: joinCluster,
          };

        });
        wx.hideLoading()
        this.mapCtx = wx.createMapContext('map')
        this.mapCtx.addGroundOverlay({
          id: 1,
          src: "https://jquee-dev.oss-cn-beijing.aliyuncs.com/hwxq/mapDraw2.png",
          bounds: {
            southwest: { //西南角
              latitude: 31.177728,
              longitude: 121.331381,
            },
            northeast: { //东北角
              latitude: 31.243749,
              longitude: 121.367216,
            }
          },
          success(res){
            console.log('wp', res)
          },
          fail(err){
            console.log('wperr', err)
          }
        })
   }
   

onMarkerTap 方法用于控制点击标记时 callout 显示状态的切换和地图的移动，而 onCalloutTap 方法用于处理点击标记 callout 时的导航操作

点击配置

   onMarkerTap(e) {
        const markerId = e.markerId;
        const marker = this.data.markers.find(m => m.id === markerId);
        if (marker) {
          // 切换标注的显示
          if (marker.callout.display === 'BYCLICK') {
            marker.callout.display = 'ALWAYS';
          } else {
            marker.callout.display = 'BYCLICK';
          }
          this.setData({
            markers: this.data.markers
          });
          this.mapCtx.moveToLocation({
            latitude: marker.latitude,
            longitude: marker.longitude
          });

          // this.setData({
          //   scale: 16
          // });
        }
      },
      
      onCalloutTap(e){
        const markerId = e.markerId;
        const marker = this.data.markers.find(m => m.id === markerId);
        if (marker) {
          wx.navigateTo({
            url: '/pages/article/artlook/detail/index?id=' + marker['aria-id'] + '&name=' + marker['aria-name'],
          });
        }
      },