小程序map切换不同的标记点
Posted 算法与编程之美
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序map切换不同的标记点相关的知识，希望对你有一定的参考价值。
1 问题
如何利用小程序的自定义组件实现map切换不同的标记点
2 方法
创建一个组件mapchart
图中的mapchart就是一个自定义组件，自定义组件为了规范通常放在conponents里。在map页面的json文件里引用组件
"usingComponents":
"mapchart":"/components/mapchart/mapchart"
,引用后就可以在wxml文件里使用该自定义组件。
给自定义组件定义方法和属性
mapchart.wxml<view>
<map id="map"
longitude="longitude"
latitude="latitude"
scale="15"
controls="controls"
bindcontroltap="controltap"
bindcallouttap="test"
markers="markers"
bindmarkertap="markertap"
bindregiοnchange="regionchange"
show-location
style="width: 100%; height: 1414.5rpx;"
enable-overlooking="true" enable-building="true"
enable-3D="true"
show-scale="true">
</map>
</view>mapchart.js
// components/mapchart/mapchart.js
Component(
/**
* 组件的属性列表
*/
properties:
markers: Array,
polyline: Array,
latitude: Number,
longitude: Number,
tabs: Array,
datalist:Array,
bindmarkertap:Array,
scale:Number
,
/**
* 组件的初始数据
*/
data:
datalist: [],
,
/**
* 组件的方法列表
*/
methods:
bindcallouttap: function (e)
console.log("头上文字被点击", e)
,
test: function (event)
console.log(event)
wx.getLocation(
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: (res) =>
const latitude = res.latitude
const longitude = res.longitude
wx.openLocation(
//终点
latitude: event.currentTarget.dataset.item.latitude,
longitude: event.currentTarget.dataset.item.longitude,
address: event.currentTarget.dataset.item.name,
scale: 18
)
)
,
)mapchart.json
"component": true,
"usingComponents":
在map中使用该自定义组件
map.wxml
| <view class="navbar"> <label wx:for="navbar" wx:key="unique" data-idx="index" class="item currentTab==index ? 'active' : ''" bindtap="navbarTap" > item </label> </view> <view hidden="currentTab!==0" class="current"> <mapchart markers="markers_0" polyline="polyline" longitude="longitude" latitude="latitude" tabs="tabs_0" datalist="datalist_0 " > </mapchart> </view> <view hidden="currentTab!==1"> <mapchart markers="markers_1" polyline="polyline" longitude="longitude" latitude="latitude" tabs="tabs_1" datalist="datalist_1 " ></mapchart> </view> <view hidden="currentTab!==2"> <mapchart markers="markers_2" polyline="polyline" longitude="longitude" latitude="latitude" tabs="tabs_2" datalist="datalist_2" ></mapchart> </view> <view hidden="currentTab!==3"> <mapchart markers="markers_3" polyline="polyline" longitude="longitude" latitude="latitude" tabs="tabs_3" datalist="datalist_3" ></mapchart> </view> |
map.js
| const app = getApp() Page( data: //选项卡 navbar: ['科普点', '动物场馆', '游览点','卫生间'], longitude: 116.336590, //默认定位经度 latitude: 39.941127, //默认定位纬度 currentTab: 0, showDialog: false, mapId: "map", //wxml中的map的Id值 datalist: [], //科普点 markers_0: [ ]//里面写标记点的相关信息 //动物场馆 markers_1: [ ] //游览点 markers_2: [ ] //卫生间 markers_3: [ ] |
map.wxss
| /* pages/map.wxss */ page display: flex; flex-direction: column; height: 100%; .navbar flex: none; display: flex; background: #fff; .navbar .item position: relative; flex: auto; text-align: center; line-height: 80rpx; .navbar .item.active color: #FFCC00; .navbar .item.active:after content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 4rpx; background: #FFCC00; |
3 实验结果与讨论
最终结果如图：
4 结语
本次我们介绍了如何用自定义组件实现map上切换不同的标记点，使用本方法虽然可以实现我们的目标，但切换标记点时会有闪屏的情况，本质上还是属于切换到另外一个页面，并没有在同一个地图页面完成切换不同标记点，后续将对此进行改进。
实习编辑：李欣容
稿件来源：深度学习与文旅应用实验室（DLETA）
以上是关于小程序map切换不同的标记点的主要内容，如果未能解决你的问题，请参考以下文章