<!-- .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 () {
}
})
微信解决了吗
2022年快过去了真机不生效问题还没解决
2021年国庆节都过了,这问题还没解决。。。
😅😅😅😅😅
padding无效,includePoints回调里面设置scale也不行。
padding到现在都没用,官方设置这么个参数有什么用?
回来设置scale或地图updated完成再设置scale也没用
Android不行,ios可以
我也碰到了这样的问题。 请问这个问题解决了吗?
还没有
我重新新建一个帖子吧
我希望地图在展示多个标记点的时候能够自动缩放视野以包含所有的点,最初我采用map的include-points属性来实现,发现工具上没有任何效果,真机上可以实现,但是其中有两个点处于地图可视范围的边缘,导致气泡有部分超出了屏幕,于是我尝试给map设置padding如下:
map{
padding
:
50
rpx;
}
但是不起作用,反而超出屏幕的范围更多了。后来我尝试用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,
}]
})
}
})
麻烦按照要求来补全信息,按照教程来提供代码片段,另外回复信息请在我的评论下回复,不然无法收到回复
你好,代码片段见此链接:https://developers.weixin.qq.com/s/yRBmZUm17G3U,问题描述我想我已经说的很清楚了。麻烦看一下
请问楼主现在这个问题解决了吗?我也遇到了这个问题。。但是现在在网上好像搜不到类似的解决方案啊。。
你好,请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
同样出现这个问题,半年过去了,至今没修复
使用楼主的代码片段在真机是有效果的哦,可以将微信版本升级至7.0.4看下