小程序景区地图覆盖和标记点Demo

wxml

<!--pages/map/index.wxml-->
<!--请到真机预览查看，开发者工具无法显示背景图-->
<map
 id="map"
 latitude="{{latitude}}"
 longitude="{{longitude}}"
 markers="{{markers}}"
 show-location
 bindmarkertap="onMarkerTap"
 bindcallouttap="onCalloutTap"
 scale="{{scale}}"
 style="width: 100%;height:100vh;"
>
</map>

js

// pages/map/index.js
Page({

  /**
   * 页面的初始数据
   */
  data:{
    latitude: 31.19565618918707,
    longitude: 121.34083569986228,
    scale: 12,
    markers: [//标记点
      {
        callout: {
          content: "上海市动物园",
          color: '#000000',
          fontSize: 14,
          borderRadius: 10,
          bgColor: '#ffffff',
          padding: 5,
          display: 'BYCLICK',
        },
        width: 34,
        height: 34,
        id: 0,
        latitude: 31.192081979746106,
        longitude: 121.36423424266354,
        iconPath: "/assets/type1.png",
        'aria-id': 0,
        'aria-name': "上海市动物园",
        'aria-type': "type1",
      },
      {
        callout: {
          content: "虹桥机场",
          color: '#000000',
          fontSize: 14,
          borderRadius: 10,
          bgColor: '#ffffff',
          padding: 5,
          display: 'BYCLICK',
        },
        width: 38,
        height: 38,
        id: 1,
        latitude: 31.19565618918707,
        longitude: 121.34083569986228,
        iconPath: "/assets/type3.png",
        'aria-id': 1,
        'aria-name': "虹桥机场",
        'aria-type': "type2",
      }
    ],
   },
   onLoad () {
    this.mapCtx = wx.createMapContext('map');
    this.mapCtx.addGroundOverlay({
          id: 0,
          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,
            }
          },
          opacity:1,
          success(res){
            console.log('wp', res)
          },
          fail(err){
            console.log('wperr', err)
          }
        })
   },

   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'],
      });
    }
  },


 
})