2009-12-21 124 views
95

使用Google Maps API v3,如何以編程方式更改標記圖標?Google Maps API v3:如何動態更改標記圖標?

我想要做的是,當有人懸停在一個鏈接上 - 讓地圖上的相應標記圖標改變顏色來表示相關標記。

本質上,與Roost所做的功能基本相同。

當你將鼠標懸停在左側家上市後,在右邊的相應標記改變顏色

+0

您的示例已停用。只是想讓你知道。我認爲它與airbnb.com發生的情況類似? – FujiRoyale 2015-04-30 18:23:08

回答

158

調用marker.setIcon('newImage.png') ......看here的文檔。

您是否在問實際的方法?您可以創建每個div,並添加一個mouseovermouseout偵聽器,該偵聽器將更改圖標並返回標記。

+7

這應該被標記爲最佳答案。 – 2012-10-24 14:32:16

+5

,幫助我弄清楚如何更改標記的動畫:'markersArray [0] .setAnimation(google.maps.Animation.BOUNCE);' – Ray 2012-10-26 17:40:19

5

GMaps Utility Library有一個名爲MapIconMaker的插件,可以方便地生成不同的標記樣式。它使用Google Charts來繪製標記。

有一個很好的演示here,它顯示了你可以用它做什麼樣的標記。

+3

MapIconMaker不適用於地圖API v3 – benjisail 2010-08-18 09:04:29

+0

[StyledMarker](http:/ /儘管如此,API v3的/google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/)。 HTH。 – tatlar 2011-11-12 00:21:05

+1

不幸的是,Google Charts API最近已被Google正式棄用:( – 2013-06-09 12:22:29

8

此線程可能已經死機,但StyledMarker可用於API v3。只需使用addDomListener()方法將想要的顏色更改綁定到正確的DOM事件。這example是非常接近你想要做的。如果你看一下頁面的源代碼,更改:

google.maps.event.addDomListener(document.getElementById("changeButton"),"click",function() { 
    styleIcon.set("color","#00ff00"); 
    styleIcon.set("text","Go"); 
}); 

喜歡的東西:

google.maps.event.addDomListener("mouseover",function() { 
    styleIcon.set("color","#00ff00"); 
    styleIcon.set("text","Go"); 
}); 

這應該是足以讓你一起移動。

DOM Events上的維基百科頁面也將幫助您定位要在客戶端捕獲的事件。

運氣好(如果你仍然需要它)

+0

有沒有辦法將地圖指針更改爲任何自定義形狀? – 2015-03-30 06:23:10

+0

是的,但更改地圖指針是通過更改CSS中的遊標屬性完成的,而不是在地圖中API - 請參閱[文檔](http://www.w3.org/TR/css3-ui/#cursor) – tatlar 2015-03-31 12:52:18

+0

This [StackOverflow question and answers](http://stackoverflow.com/questions/8652178)可能會進一步指導你。 – tatlar 2015-03-31 12:54:35

14

你也可以使用一個圓形的標記圖標,例如:

var oMarker = new google.maps.Marker({ 
    position: latLng, 
    sName: "Marker Name", 
    map: map, 
    icon: { 
     path: google.maps.SymbolPath.CIRCLE, 
     scale: 8.5, 
     fillColor: "#F00", 
     fillOpacity: 0.4, 
     strokeWeight: 0.4 
    }, 
}); 

,然後,如果你要動態地改變標記(像鼠標懸停),就可以了,例如:

oMarker.setIcon({ 
      path: google.maps.SymbolPath.CIRCLE, 
      scale: 10, 
      fillColor: "#00F", 
      fillOpacity: 0.8, 
      strokeWeight: 1 
     }) 
4

你可以試試這個代碼

<script src="http://maps.googleapis.com/maps/api/js"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> 

<script> 

    function initialize() 
    { 
     var map; 
     var bounds = new google.maps.LatLngBounds(); 
     var mapOptions = { 
          zoom: 10, 
          mapTypeId: google.maps.MapTypeId.ROADMAP  
         }; 
     map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions); 
     var markers = [ 
      ['title-1', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.120850, '<p> Hello - 1 </p>'], 
      ['title-2', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.420850, '<p> Hello - 2 </p>'], 
      ['title-3', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -0.720850, '<p> Hello - 3 </p>'], 
      ['title-4', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.020850, '<p> Hello - 4 </p>'], 
      ['title-5', '<img style="width:100%;" src="canberra_hero_image.jpg"></img>', 51.508742, -1.320850, '<p> Hello - 5 </p>'] 
     ]; 

     var infoWindow = new google.maps.InfoWindow(), marker, i; 
     var testMarker = []; 
     var status = []; 
     for(i = 0; i < markers.length; i++) 
     { 
      var title = markers[i][0]; 
      var loan = markers[i][1]; 
      var lat = markers[i][2]; 
      var long = markers[i][3]; 
      var add = markers[i][4]; 


      var iconGreen = 'img/greenMarker.png'; //green marker 
      var iconRed = 'img/redMarker.png';  //red marker 

      var infoWindowContent = loan + "\n" + placeId + add; 

      var position = new google.maps.LatLng(lat, long); 
      bounds.extend(position); 

      marker = new google.maps.Marker({ 
       map: map, 
       title: title, 
       position: position, 
       icon: iconGreen 
      }); 
      testMarker[i] = marker; 
      status[i] = 1; 
      google.maps.event.addListener(marker, 'click', (function toggleBounce(i,status,testMarker) 
      { 
       return function() 
       { 
        infoWindow.setContent(markers[i][1]+markers[i][4]); 
        if(status[i] === 1) 
        { 
         testMarker[i].setIcon(iconRed); 
         status[i] = 0; 

        } 
        for(var k = 0; k < markers.length ; k++) 
        { 
         if(k != i) 
         { 
          testMarker[k].setIcon(iconGreen); 
          status[i] = 1; 

         } 
        } 
        infoWindow.open(map, testMarker[i]); 
       } 
      })(i,status,testMarker)); 
      map.fitBounds(bounds); 
     } 
     var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) 
     { 
      this.setZoom(8); 
      google.maps.event.removeListener(boundsListener); 
     }); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

<div id="mapDiv" style="width:820px; height:300px"></div>