Google Maps API - 地圖標記點擊事件

懂的如何放置地圖標記後，再來就用 Google Maps API 來玩玩點擊的事件，例如點下去可以讓標記彈跳，或是點擊標記後換圖，甚至也可以在點擊時打開資訊視窗，當然這些事件都只是初級階段，等之後玩到在地圖上繪製圖案，想必就會有更好玩的應用了。

點擊之後地圖標記會彈跳

地圖標記的事件，可以透過addListener來完成，可監聽的事件有 click、dblclick、mouseup、mousedown、mouseover 和 mouseout，這裡我透過 click 和地圖標記的動作效果，做出點擊地圖標記時標記會彈跳，再點一下它就會停止的效果。

要實現這個效果還要加上getAnimation()，來判斷現在地圖標記是否正在進行動畫效果，如果是 null 就是沒有進行動畫，最後使用setAnimation來將動畫效果設定到地圖標記上。

範例：點擊事件 AddListener

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: {
      lat: 25.0336962,
      lng: 121.5643673
    }
  });

  var marker = new google.maps.Marker({
    position: {
      lat: 25.0336962,
      lng: 121.5643673
    },
    map: map
  });

  marker.addListener('click',function(){
    if(marker.getAnimation()==null){
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }else{
      marker.setAnimation(null);
    }
  });
}

點擊後更換地圖標記圖片

除了動畫之外，也可以透過setIcon的方法，更換地圖標記的顯示圖片，這裏設定當滑鼠事件發生 click 的時候，圖片就會改變。

範例：點擊後更換地圖標記圖片

var map;
var a = -1;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: {
      lat: 25.0336962,
      lng: 121.5643673
    }
  });

  var marker = new google.maps.Marker({
    position: {
      lat: 25.0336962,
      lng: 121.5643673
    },
    map: map,
    icon: 'https://www.oxxostudio.tw/img/articles/201801/google-maps-5-marker-click-event-markericon-01.png'
  });

  marker.addListener('click',function(){
    a = a * -1;
    if(a > 0){
      marker.setIcon('https://www.oxxostudio.tw/img/articles/201801/google-maps-5-marker-click-event-markericon-02.png');
    }else{
      marker.setIcon('https://www.oxxostudio.tw/img/articles/201801/google-maps-5-marker-click-event-markericon-01.png');
    }
  });
}

點擊後開啟資訊視窗

在 Google 地圖裡，「資訊視窗 InfoWindow」常常會出現和地圖標記搭配，資訊視窗會在之後再找篇幅介紹，這裏先實作當我們點擊地圖標記時，就會把資訊視窗打開，然後再點一下，就可以把資訊視窗關閉的效果。

範例：點擊後開啟資訊視窗

var map;
var a = -1;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: {
      lat: 25.0336962,
      lng: 121.5643673
    }
  });

  var marker = new google.maps.Marker({
    position: {
      lat: 25.0336962,
      lng: 121.5643673
    },
    map: map
  });

  var infowindow = new google.maps.InfoWindow({
    content: '<h1>大家好</h1>'
  });

  marker.addListener('click',function(){
    a = a * -1;
    if(a > 0){
      infowindow.open(map, marker);
    }else{
      infowindow.close();
    }
  });
}

不過如果單純是上面的寫法，沒有判斷資訊視窗自帶的「x」關閉按鈕，所以要再加入下面這段代碼，監聽資訊視窗關閉按鈕的點擊事件，就會比較正常。

google.maps.event.addListener(infowindow, 'closeclick', function(){
  a = a * -1;
});

小結

地圖標記得點擊事件的入門，彷彿沒有想像中的複雜 ( 當然我相信要複雜還是可以很複雜 )，熟悉這些基本用法之後，應該就能夠來做些基本的地圖標記了。