效果:
index.wxml:
<view class="map-view-container">
<view class="map-view-content">
<view class="map-container plr20">
<map class="map" id="map" latitude="{{location.latitude}}" longitude="{{location.longitude}}" scale="{{scale}}" markers="{{markers}}">
</map>
</view>
</view>
</view>
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;
}
index.js:
Page({
/**
* 页面的初始数据
*/
data: {
scale: 10.5,
location: {
latitude: 39.991104,
longitude: 116.377503,
},
markers: [{
id: 1,
latitude: 39.953416,
longitude: 116.480945,
joinCluster: true,
width: 24,
height: 24,
iconPath: '../../map/marker/imgs/Marker1_Activated@3x.png'
},{
id: 2,
latitude: 39.984104,
longitude: 116.407503,
joinCluster: true,
width: 24,
height: 24,
iconPath: '../../map/marker/imgs/Marker1_Activated@3x.png'
},{
id: 3,
latitude: 39.908802,
longitude: 116.497502,
joinCluster: true,
width: 24,
height: 24,
iconPath: '../../map/marker/imgs/Marker1_Activated@3x.png'
},{
id: 4,
latitude: 40.040417,
longitude: 116.373514,
joinCluster: true,
width: 24,
height: 24,
iconPath: '../../map/marker/imgs/Marker1_Activated@3x.png'
},{
id: 5,
latitude: 39.953416,
longitude: 116.380945,
joinCluster: true,
width: 24,
height: 24,
iconPath: '../../map/marker/imgs/Marker1_Activated@3x.png'
},{
id: 6,
latitude: 39.984104,
longitude: 116.307503,
joinCluster: true,
width: 24,
height: 24,
iconPath: '../../map/marker/imgs/Marker1_Activated@3x.png'
},{
id: 7,
latitude: 39.908802,
longitude: 116.397502,
joinCluster: true,
width: 24,
height: 24,
iconPath: '../../map/marker/imgs/Marker1_Activated@3x.png'
},{
id: 8,
latitude: 40.040417,
longitude: 116.273514,
joinCluster: true,
width: 24,
height: 24,
iconPath: '../../map/marker/imgs/Marker1_Activated@3x.png'
}],
isDisabled: false,
dialogShow: false,
link: 'https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html'
},
onShow() {
const mapCtx = wx.createMapContext('map', this);
mapCtx.initMarkerCluster({
gridSize:30
});
},
})