1.在小程序官方文档中有一个实例可以参考
2.导入本地实现
3.小程序里面来实现一下
.wxml 文件中
<view class="page-body"> <view class="page-section page-section-gap"> <map id="myMap" style="width: 100%; height: 300px;" latitude="{{latitude}}" longitude="{{longitude}}" bindmarkertap="markertap" bindcallouttap="callouttap" bindlabeltap="labeltap" markers="{{markers}}" scale="16" > <cover-view slot="callout"> <block wx:for="{{customCalloutMarkerIds}}" wx:key="*this"> <cover-view class="customCallout" marker-id="{{item}}" > <cover-image class="icon" src="/image/voice.png"></cover-image> <cover-view class="content"> {{num}}-{{item}}-{{index}} </cover-view> </cover-view> </block> </cover-view> </map> </view> </view>
在 .wxss 中
.page-section-gap{ box-sizing: border-box; padding: 0 30rpx; } .page-body-button { margin-bottom: 30rpx; } .customCallout { box-sizing: border-box; background-color: #fff; border: 1px solid #ccc; border-radius: 30px; width: 150px; height: 40px; display: inline-flex; padding: 5px 20px; justify-content: center; align-items: center; } .circle { width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 50%; } .icon { width: 16px; height: 16px; } .content { flex: 0 1 auto; margin: 0 10px; font-size: 14px; }
在.js 文件中
Page({ data: { latitude: 30.870915522712245, longitude: 121.69552166954041, markers: [ { id: 1, latitude: 30.872771084672426, longitude: 121.69159491554261, iconPath: '/image/location.png', width:100, hight:100 }, { id: 2, latitude: 30.872941444638506, longitude: 121.70530636802674, iconPath: '/image/location.png', width:100, hight:100 }, { id: 3, latitude: 30.871960719601645, longitude: 121.68974419132233, iconPath: '/image/location.png', width:100, hight:100 } ], customCalloutMarkerIds: [], num: 1 }, onReady: function (e) { }, })
实现效果
注:这里的标记点是测试 ,实际的要根据数据库来实现