小程序map切换不同的标记点

1 问题

如何利用小程序的自定义组件实现map切换不同的标记点

2 方法

1. 创建一个组件mapchart
   

   
   
   图中的mapchart就是一个自定义组件，自定义组件为了规范通常放在conponents里。

2. 在map页面的json文件里引用组件

   {
    "usingComponents": {
      "mapchart":"/components/mapchart/mapchart"
    },
   }

   引用后就可以在wxml文件里使用该自定义组件。

3. 给自定义组件定义方法和属性
   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": {
    }
   }

4. 在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）