从左侧栏位获取药局位置

当我们在左设拦点击药局列表时，左侧的地图区域不会带我们到对应的位置，此时我们需要再做最後的设定。

首先在data位置加上markers阵列来存标记

data() {
  return {
    map: {},
    markers:[]
  };
},

再回到addMarker改写

addMarker(item) {
  //...省....

  // 替marker加入id与经纬度资讯
  marker.markerId = item.id;
  marker.lng = item.longitude;
  marker.lat = item.longitude;

  //将marker push 到阵列
  this.marker.push(marker);
},

最後要记得在clearMarkers时清空阵列

methods: {
    clearMarkers() {
      //清除地图所有标记
      this.map.eachLayer((layer) => {
        if (layer instanceof L.Marker) {
          this.map.removeLayer(layer);
        }
      });

      //清空阵列
      this.markers.length = 0;
    },
  },

再来在maskMap.vue的methods加上triggerPopup，点列表会让右侧标记的位置有个文字框显示要局名称

triggerPopup(markerId){
    //找目标标记
    const marker = this.markers.find((d)=>d.markerId===markerId)
    //将地图中心指向目标标记，并开启pop
    this.map.flyTo(new.L.LatLng(marker.lng,marker.lat),15)
    marker.openPopup()
}

到这边功能并没有和左侧做连结，所以要回到asideMenu.vue的<li class="store-info wraps">加上click事件，此时会发现一个问题，在maskMap身上的triggerPopup要怎麽和asideMenu和click事件做到跨元件传递methods? 答案就是先前学过的$emit

首先先在App.vue的asideMenu和maskMap加上ref，asideMenu加上自定是件

<template>
  <div id="app">
    <!-- aside-menu 左侧栏 -->
    <asideMenu @triggerMarkerPopup="openPopup" ref="menu" />

    <!-- 地图区块 -->
    <maskMap ref="map" />

    <!-- lightBox -->
    <light-box />
  </div>
</template>

同时在这边也要加上openPopup，透过this.$refs.map执行对应map的triggerPopup

methods: {
  ...mapActions(["fetchLocations", "fetchPharmacies"]),
  openPopup(id) {
    this.$refs.map.triggerPopup(id);
  },
},

回到asideMenu.vue将原本的

<li class="store-info wraps" v-for="s in filteredStores" :key="s.id">

改成

<li
  class="store-info wraps"
  v-for="s in filteredStores"
  :key="s.id"
  @click="$emit('triggerMarkerPopup', s.id)"
>

地图大功告成!!!!!!!

终於完成了30天挑战，觉得好像又多会的一点东西，同时也发现很多自己不足的地方，js基础还不够稳以至於在研读的时候花了很多时间找资料...
结束了一个里程碑又是下一个的开始，学习之路要一直走下去!!! 在学程序的大家一起加油吧~~