<!-- .wxml -->
<map id=‘myMap’ longitude=’{{longtitude}}’ latitude=’{{latitude}}’ show-location scale=‘12’ markers=’{{markers}}’ bindmarkertap=‘tapToShowCard’ bindcallouttap=‘tapToShowDetail’></map>
<!-- .js -->
var sourceMarker = [{
latitude: 24.508513,
longitude: 118.107597,
iconPath: ‘…/…/sources/marker.png’,
width: 22,
height: 30,
callout: {
content: ‘查看详情’,
fontSize: 16,
borderRadius: 5,
padding: 8,
display: ‘ALWAYS’
}
},{
latitude: 24.508439,
longitude: 118.10778,
iconPath: ‘…/…/sources/marker.png’,
width: 22,
height: 30,
callout: {
content: ‘查看详情’,
fontSize: 16,
borderRadius: 5,
padding: 8,
display: ‘ALWAYS’
}
},{
latitude: 24.5084,
longitude: 118.107168,
iconPath: ‘…/…/sources/marker.png’,
width: 22,
height: 30,
callout: {
content: ‘查看详情’,
fontSize: 16,
borderRadius: 5,
padding: 8,
display: ‘ALWAYS’
}
}]
Page({
/**
* 页面的初始数据
*/
data: {
latitude: 0,
longtitude: 0,
markers: sourceMarker,
points: sourcePoints
},
/**
* 生命周期函数–监听页面加载
*/
onLoad: function (options) {
var that = this;
wx.getLocation({
success: function(res) {
that.setData({
latitude: res.latitude,
longtitude: res.longitude
})
that.mapCtx = wx.createMapContext(‘myMap’);
that.includePoints();
},
})
},
includePoints: function () {
this.mapCtx.includePoints({
padding: [20],
points: [{
latitude: 24.508513,
longitude: 118.107597,
}, {
latitude: 24.508439,
longitude: 118.10778,
}, {
latitude: 24.5084,
longitude: 118.107168,
}]
})
},
/**
* 生命周期函数–监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数–监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数–监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数–监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数–监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
你好，请具体描述问题出现的流程，并提供能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。
我希望地图在展示多个标记点的时候能够自动缩放视野以包含所有的点，最初我采用map的include-points属性来实现，发现工具上没有任何效果，真机上可以实现，但是其中有两个点处于地图可视范围的边缘，导致气泡有部分超出了屏幕，于是我尝试给map设置padding如下：
map{ padding: 50rpx;} |
但是不起作用，反而超出屏幕的范围更多了。后来我尝试用Api ：map.includePoints实现，发现工具可以实现且展示均匀不超出屏幕，但真机还是和上一个方案的效果一样，会超出屏幕，padding设置后也是没有效果，反而超出屏幕的范围更多了。相关代码如下：
wxml部分
<map id='myMap' longitude='{{longtitude}}' latitude='{{latitude}}' show-location scale='12' markers='{{markers}}' include-points='{{points}}' bindmarkertap='tapToShowCard' bindcallouttap='tapToShowCard'> |
wxss部分
page { height: 100%;}map { width: 100%; height: 100%;} |
js部分
var sourceMarker = [{ id: 0, latitude: 24.508513, longitude: 118.107597, iconPath: '../../sources/marker.png', width: 22, height: 30, callout: { content: '查看详情', fontSize: 16, borderRadius: 5, padding: 8, display: 'ALWAYS' }},{ id: 1, latitude: 24.508439, longitude: 118.10778, iconPath: '../../sources/marker.png', width: 22, height: 30, callout: { content: '查看详情', fontSize: 16, borderRadius: 5, padding: 8, display: 'ALWAYS' }},{ id: 2, latitude: 24.5084, longitude: 118.107168, iconPath: '../../sources/marker.png', width: 22, height: 30, callout: { content: '查看详情', fontSize: 16, borderRadius: 5, padding: 8, display: 'ALWAYS' }}]var sourcePoints = [{ latitude: 24.508513, longitude: 118.107597,}, { latitude: 24.508439, longitude: 118.10778,}, { latitude: 24.5084, longitude: 118.107168,}]Page({ /** * 页面的初始数据 */ data: { showCard: false, cardBottom: 0, latitude: 0, longtitude: 0, markers: sourceMarker, points: sourcePoints }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; wx.getLocation({ success: function(res) { that.setData({ latitude: res.latitude, longtitude: res.longitude }) that.mapCtx = wx.createMapContext('myMap'); that.includePoints(); }, }) }, includePoints: function () { this.mapCtx.includePoints({ padding: [10], points: [{ latitude: 24.508513, longitude: 118.107597, }, { latitude: 24.508439, longitude: 118.10778, }, { latitude: 24.5084, longitude: 118.107168, }] }) } }) |
强力驱动