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: 'http://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('http://www.oxxostudio.tw/img/articles/201801/google-maps-5-marker-click-event-markericon-02.png');
    }else{
      marker.setIcon('http://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;
});

小結

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

有興趣瞧瞧其他新文章嗎?