今天又遇到了一个问题,困扰了我一上午。
问题点: 项目中用到了地图组件,需要有一批标记点,并且可以来回切换并且点击可以显示气泡,但是在切换一批标记点之后,点击某个标记点,就报错了,错误问题也让我摸不着头脑。
解决方案: 经过一个上午的摸索,最终发现可能是版本库太低的原因,我现在用到的是2.12.1的基础库,改成2.13.2之后这个问题就没了,真是让人哭笑不得,顺便记录一下使用map的过程吧~
错误提示
wxml
<map id="map" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markerss}}">
<cover-view slot="callout">
<cover-view marker-id="{{item.id}}" class="bg" wx:for="{{listtests}}" wx:for-item="item" wx:key="index">
<cover-image class="img" src="{{item.img}}"></cover-image>
<cover-view>{{item.name}}</cover-view>
</cover-view>
</cover-view>
</map>
<view class="click">
<view bindtap="clickOne" data-id="1">点我1111</view>
<view bindtap="clickTwo" data-id="2">点我2222</view>
<view bindtap="clickThree">切换</view>
</view>
js
Page({
data: {
longitude: 120.63212 ,
latitude: 31.26249,
markerss: [],
markerstests:[
{
id: 1,
baseId:1,
longitude: 120.63212 ,
latitude: 31.26249,
customCallout: {
display: 'BYCLICK'
}
},{
id: 4,
baseId:2,
longitude: 120.63812 ,
latitude: 31.26249,
customCallout: {
display: 'BYCLICK'
}
}
],
listtests:[
{
id: 1,
baseId:1,
img:'../../images/study1.png',
name:'河道1'
},
{
id: 4,
baseId:2,
img:'../../images/study1.png',
name:'河道1111111'
}
]
},
clickOne(e){
//切换标记点
let lists=this.data.markerstests.filter(item => item.baseId == e.currentTarget.dataset.id)
this.setData({
markerss:lists
})
},
clickTwo(e){
//切换标记点
let lists=this.data.markerstests.filter(item => item.baseId == e.currentTarget.dataset.id)
this.setData({
markerss:lists
})
}
})
图显