1 引言
解决小程序地图切换标记点闪屏问题，提升用户体验。
2 问题
如何解决小程序地图切换标记点闪屏问题。
3 方法
解决思路：给顶部选项卡设置id并给其绑定相关标记点的信息，通过识别选项卡id实现切换不同标记点。
index.wxml
<!-- 主页面,地图页面 -->
<view style="width: 100%;">
<cover-view class="navbar" >
<cover-view wx:for="{{buildlData}}" wx:key="id" id="{{index}}">
<!-- style 的作用是用来进行点击变色的 -->
<!-- data-num 的作用是在'changePage'中传递过去的参数num -->
<view style="color:{{item.fId==currentItemId?'#FFCC00':'#000'}}" data-num="{{item.fId}}" class="box "
bindtap="changePage" >
<cover-view >{{item.name}}</cover-view>
</view>
</cover-view>
</cover-view>
<map
bindtap="close"
longitude="{{longitude}}"
latitude="{{latitude}}"
style="width: 100%; height: 1414.5px;"
scale="{{buildlData[isSelectedBuildType].scale}}"
markers="{{buildlData[isSelectedBuildType].data}}"
bindmarkertap="markertap"
label="{{buildlData[isSelectedBuildType].name}}"
id="map"
data-num="{{buildlData[isSelectedBuildType].data}}">
</map>
</view>index.js
//index.js
//获取应用实例
const app = getApp()
var map= [
{
"fId":"1",
"name": "科普点",
"scale": 16,
"latitude": "39.935755",
"longitude": "116.336711",
"iconPath":"",
"data": [
{
"name": "狮虎山",
id: 0,
"latitude": "39.94158",
"longitude": "116.340182",
"iconPath": "",
"width": "30",
"height": "35",
label:{
content:'狮虎山',//气泡内显示的内容
fontsize:15,//文字大小
borderRadius:10,//边框圆角
bgColor:'#fff',//气泡背景颜色
anchorX:-25,//气泡的二维坐标
anchorY:3,
padding:5,//文本边缘留白
},
"img": [
"/img/动物园.png",
"/img/厕所.png"
],
"description": "这里是狮虎山"
},
{
"name": "火烈鸟馆",
id: 1,
"latitude": "39.940578",
"longitude": "116.335972",
"iconPath": "/img/动物园.png",
"width": "30",
"height": "35",
label:{
content:'火烈鸟馆',
fontsize:15,
borderRadius:10,
bgColor:'#fff',
anchorX:-25,
anchorY:3,
padding:5,
},
},
{
"name": "鹦鹉馆",
id: 2,
"latitude": "39.941588",
"longitude": "116.335554",
"iconPath": "/img/动物园.png",
"width": "30",
"height": "35",
label:{
content:'鹦鹉馆',
fontsize:15,
borderRadius:10,
bgColor:'#fff',
anchorX:-25,
anchorY:3,
padding:5,
},
},
]
},
{
"fId":"2",
"name": "动物场馆",
"scale": 16.4,
"latitude": "39.937419",
"longitude": "116.336612",
"iconPath":"",
"data": [
{
"name": "貘科动物馆馆",
id: 0,
"latitude": "39.941386",
"longitude": "116.336655",
"iconPath": "/img/数据折转房子.png",
"width": "30",
"height": "35",
label:{
content:'貘科动物馆',
fontsize:15,
borderRadius:10,
bgColor:'#fff',
anchorX:-35,
anchorY:3,
padding:5,
}
},
{
"name": "澳洲动物区",
id: 1,
"latitude": "39.94234",
"longitude": "116.338558",
"iconPath": "/img/数据折转房子.png",
"width": "30",
"height": "35",
label:{
content:'澳洲动物区',
fontsize:15,
borderRadius:10,
bgColor:'#fff',
anchorX:-35,
anchorY:3,
padding:5,
}
},
{
"name": "水禽湖",
id: 2,
"latitude": "39.939922",
"longitude": "116.336749",
"iconPath": "/img/数据折转房子.png",
"width": "30",
"height": "35",
label:{
content:'水禽湖',
fontsize:15,
borderRadius:10,
bgColor:'#fff',
anchorX:-35,
anchorY:3,
padding:5,
}
},
]
},
{
"fId":"3",
"scale": 15.9,
"name": "游览点",
"latitude": "39.937419",
"longitude": "116.336612",
"iconPath":"/img/bj.png",
"data": [
{
"name": "休闲广场",
id: 0,
"latitude": "39.942343",
"longitude": "116.33601",
"iconPath": "/img/公园游乐场.png",
"width": "30",
"height": "35",
label:{
content:'休闲广场',
fontsize:15,
borderRadius:10,
bgColor:'#fff',
anchorX:-35,
anchorY:3,
padding:5,
}
},
{
"name": "依绿亭",
id: 1,
"latitude": "39.941373",
"longitude": "116.339201",
"iconPath": "/img/公园游乐场.png",
"width": "30",
"height": "35",
label:{
content:'依绿亭',
fontsize:15,
borderRadius:10,
bgColor:'#fff',
anchorX:-35,
anchorY:3,
padding:5,
}
},
{
"name": "陆谟克堂",
id: 2,
"latitude": "39.939767",
"longitude": "116.335898",
"iconPath": "/img/公园游乐场.png",
"width": "30",
"height": "35",
label:{
content:'陆谟克堂',
fontsize:15,
borderRadius:10,
bgColor:'#fff',
anchorX:-35,
anchorY:3,
padding:5,
}
},
]
},
{
"fId":"4",
"name": "卫生间",
"scale": 15.3,
"latitude": "39.937419",
"longitude": "116.336612",
"iconPath":"/img/bj.png",
"data": [
{
"name": "卫生间1",
id: 0,
"latitude": "39.940565",
"longitude": "116.335611",
"iconPath": "/img/厕所.png",
"width": "30",
"height": "35",
},
{
"name": "卫生间2",
id: 1,
"latitude": "39.944379",
"longitude": "116.338024",
"iconPath": "/img/厕所.png",
"width": "30",
"height": "35",
},
{
"name": "卫生间3",
id: 2,
"latitude": "39.941432",
"longitude": "116.331798",
"iconPath": "/img/厕所.png",
"width": "30",
"height": "35",
},
]
},
]
Page({
data: {
takeSession: false,
latitude: 39.937419, //默认定位纬度
longitude: 116.336612, //默认定位经度
scale:15.4,
buildlData: map,
isSelectedBuildType: 0,
currentItemId:"1",
},
//展示标志点
changePage: function (event) {
this.setData({
currentItemId:event.currentTarget.dataset.num,
isSelectedBuildType: event.currentTarget.dataset.num-1,
longitude:map[event.currentTarget.dataset.num-1].longitude,
latitude:map[event.currentTarget.dataset.num-1].latitude,
scale: 18,
});
},
})index.wxss
/* pages/map.wxss */
page{
display: flex;
flex-direction: column;
height: 100%;
}
.navbar{
flex:none;
display:flex;
background: rgb(255, 255, 255);
}
.box {
display: inline;
text-align:center;
font-weight: 500;
font-size: 15px;
margin: 10em;
background-color: #ffffff;
}4 实验结果与讨论
上述方法可解决小程序地图切换标记点闪屏问题，并实现切换不同标记点时地图的缩小放大
