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) {
},
})
实现效果
注:这里的标记点是测试 ,实际的要根据数据库来实现