1 问题
如何利用小程序的自定义组件实现map切换不同的标记点
2 方法
图中的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"
bindregionchange="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.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上切换不同的标记点,使用本方法虽然可以实现我们的目标,但切换标记点时会有闪屏的情况,本质上还是属于切换到另外一个页面,并没有在同一个地图页面完成切换不同标记点,后续将对此进行改进。