小程序标记点切换闪屏问题的解决方法

Posted 2021-12-25 算法与编程之美

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序标记点切换闪屏问题的解决方法相关的知识，希望对你有一定的参考价值。

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">


<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 实验结果与讨论

上述方法可解决小程序地图切换标记点闪屏问题，并实现切换不同标记点时地图的缩小放大。

实习编辑：李欣容

稿件来源：深度学习与文旅应用实验室（DLETA）

以上是关于小程序标记点切换闪屏问题的解决方法的主要内容，如果未能解决你的问题，请参考以下文章

JQuery Mobile - 解决切换页面时，闪屏，白屏等问题

flutter app闪屏冻结任何方法解决