作業 #8

[chelomg]

網址：https://chelomg.github.io/vue-ubike-information/ubike_map.html 貌似需要 api key，所以可能要請老師拉下來跑跑看 Orz

[chelomg]

補充使用說明：可以在右側搜尋欄搜尋站名，搜尋的結果的文字資料可以點擊呈現在地圖上。

[kurotanshi]

功能很明確，不需要太多說明就可以上手，這點很好。

有幾點建議：

1. 因為 infoWindow 的開啟/關閉事件綁定在 mouseover 與 mouseout 上，當 marker 在畫面中間的時候這點沒有問題，但是要是 marker 在地圖邊邊角角位置的時候，就會出現畫面這樣的狀況：

地圖會自動位移，導致 mouseout 事件被觸發導致 InfoWindow 被自動關閉，這點可以改用 click 事件來處理。

首先在 initalMap 階段替 InfoWindow 增加 isOpen，判斷 InfoWindow 是否被開啟

  initalMap: function(){

    /* 前略 */

    // add InfoWindow.isOpen()
    google.maps.InfoWindow.prototype.isOpen = function(){
      var map = this.getMap();
      return (map !== null && typeof map !== "undefined");
    };
  },

接著把原本的 InfoWindow 資訊掛到 marker 上，幫 marker 加上 click 事件，並在點擊的時候關閉其他開過的 InfoWindow。

initalMakers: function(){

  this.filterStops.forEach((coord, idx) => {
    const position = new google.maps.LatLng(coord.lat, coord.lng);
    const marker = new google.maps.Marker({
      position,
      map: this.map,
      sno: coord.sno,   // 新增站點 id
      title: coord.sna + ' 總停車格: ' + coord.tot + ' / 目前車輛: ' + coord.sbi,
      info: new google.maps.InfoWindow({
              content:`
                站場名稱: ${coord.sna}</br>
                區域地址: ${coord.sarea} - ${coord.ar} </br>
                總數量: ${coord.tot} </br>
                目前車輛數量: ${coord.sbi}</br>
                更新時間: ${this.timeFormat(coord.mday)}</br>`,
            })
    });

    // google.maps.event.addListener(marker, 'mouseover', () => info.open(marker.get('map'), marker));
    // google.maps.event.addListener(marker, 'mouseout', () => info.close());

    var self = this;

    google.maps.event.addListener(marker, 'click', function(){
      self.closeAllInfoWindow();
      // open InfoWindow of this marker.
      this.info.open( this.map, this );
    });

    this.markers.push(marker);
  });
},

新增 closeAllInfoWindow method。

closeAllInfoWindow(){
  // close all InfoWindow
  this.markers.map( m => { if(m.info.isOpen()) m.info.close(); });
},

2. 原本點擊列表的名稱，只會將地圖帶到站點的位置，但因為地圖的站點很多，所以除了移動地圖外，建議點擊名稱時可以自動開啟 InfoWindow。

setCenter(sno, lat, lng, key){
  // 改寫原本的 setCenter，加帶 sno (站點 id) 與呼叫 openCurrentInfo()
  this.setCurrentStop(key);
  this.map.setZoom(15);
  this.map.setCenter(new google.maps.LatLng(lat, lng));
  this.openCurrentInfo(sno);
},
openCurrentInfo(sno){
  // 判斷傳入的 sno 與 marker 的 sno 相同，就開啟 InfoWindow。
  var marker = this.markers.filter( d => { return d.sno === sno })[0];
  this.closeAllInfoWindow();
  marker.info.open( marker.map, marker );
},

還有就是 changePage() 時漏了檢查 this.currentStop 是否為 null 之類的小問題，這部分就還好。 整體來說做得很不錯。