從左側欄位獲取藥局位置

當我們在左設攔點擊藥局列表時，左側的地圖區域不會帶我們到對應的位置，此時我們需要再做最後的設定。

首先在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基礎還不夠穩以至於在研讀的時候花了很多時間找資料...
結束了一個里程碑又是下一個的開始，學習之路要一直走下去!!! 在學程式的大家一起加油吧~~