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

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

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

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

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: [ ]

/* 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;
}