小程序腾讯地图 标记点事件 代码示例

点击某一个标记点：

弹出框：

index.wxml: （使用：bindmarkertap="markertap"）

<view class="map-view-container">
  <view class="map-view-content">

    <view class="map-container plr20" style="position: relative;">
      <map class="map" id="map" latitude="{{location.latitude}}" longitude="{{location.longitude}}" scale="{{scale}}" markers="{{markers}}" bindmarkertap="markertap">
      </map>
      <view class="zoom-in" bindtap="zoomIn">+</view>
      <view class="zoom-out" bindtap="zoomOut">-</view>
    </view>
  </view>
</view>

index.js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    scale: 16.5,
    location: {
      latitude: 31.241135,
      longitude: 121.545778,
    },

    markers: [{
      id: 1,
      latitude: 31.241135,
      longitude: 121.545778,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '/assets/icon/coffee.png'
    },{
      id: 2,
      latitude: 31.241,
      longitude: 121.546,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '/assets/icon/coffee.png'
    },{
      id: 3,
      latitude: 31.242,
      longitude: 121.545,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '/assets/icon/coffee.png'
    },{
      id: 4,
      latitude: 31.240,
      longitude: 121.545,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '/assets/icon/coffee.png'
    },{
      id: 5,
      latitude: 31.240,
      longitude: 121.546,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '/assets/icon/coffee.png'
    },{
      id: 6,
      latitude: 31.241,
      longitude: 121.547,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '/assets/icon/bakery.png'
    },{
      id: 7,
      latitude: 31.242,
      longitude: 121.547,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '/assets/icon/bakery.png'
    },{
      id: 8,
      latitude: 31.242,
      longitude: 121.546,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '/assets/icon/bakery.png'
    },{
      id: 9,
      latitude: 31.240,
      longitude: 121.544,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '/assets/icon/bakery.png'
    },{
      id: 10,
      latitude: 31.243,
      longitude: 121.546,
      joinCluster: true,
      width: 24,
      height: 24,
      iconPath:  '/assets/icon/bakery.png'
    }],
   
  },

 
  // 点击标记点事件处理函数
  markertap(e) {
    const { markerId } = e;
  const marker = this.data.markers.find(marker => marker.id === markerId);
  
  if (marker) {
    const { latitude, longitude } = marker;
    console.log(`Clicked marker ${markerId}: Latitude ${latitude}, Longitude ${longitude}`);
  }
  },
  
  zoomIn() {
    console.log("zoomIn scale=" + this.data.scale);
    let currentScale = Number(this.data.scale);  // 确保 scale 是一个数字
    if (currentScale < 20) { // 最大缩放级别为 20
      this.setData({
        scale: currentScale + 1
      });
    }
  },
  zoomOut() {
    console.log("zoomOut scale="+this.data.scale)
    let currentScale = Number(this.data.scale);  // 确保 scale 是一个数字
    if (currentScale > 3) { // 最小缩放级别为 3
      this.setData({
        scale: currentScale - 1
      });
    }
  },
  

})

index.wxss:

.map-view-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  background: #F8F8F7;
  width: 100%;
}
.map-view-content {
  width: 100%;
  background: #FFF;
  padding:20px 0 20px;
  margin-top: 10px; 
}
.map {
  width:100%;
  height:400px;
  position: relative;
}


.zoom-in, .zoom-out {
  position: absolute;
  width: 40px;
  height: 40px;
  color:#3fc971;
  background-color: white;
  border: 1px solid #3fc971;
  text-align: center;
  line-height: 40px;
  font-size: 30px;
  box-sizing: border-box;
  font-weight: bold;
  
}

.zoom-in {
  right: 10px;
  bottom: 88px;
}

.zoom-out {
  right: 10px;
  bottom: 50px;
}