更改谷歌地图自定义图标与缩放

时间:2013-09-24 21:07:26

标签: javascript google-maps google-maps-api-3

我正在尝试更改我的谷歌地图标记,以便缩放时< 5他们从自定义标记变为星形图像。 这是我到目前为止(不工作)

//zoom icons to stars at continent level
google.maps.event.addListener(busMap, 'zoom_changed', function() {
    var markerIconStar = google.maps.MarkerImage("icons/star.png");
    var currentZoom = busMap.getZoom();
    if (currentZoom < 5){
        markerSanFran.setIcon(markerIconStar);
        markerLA.setIcon(markerIconStar);
        markerHollywood.setIcon(markerIconStar);
        markerSantaCruz.setIcon(markerIconStar);
        markerSanDiego.setIcon(markerIconStar);
        markerLasVegas.setIcon(markerIconStar);
        markerGrandCan.setIcon(markerIconStar);
        markerMamLakes.setIcon(markerIconStar);
        markerYosemite.setIcon(markerIconStar);
      }

});

http://screamingeagle.travel/map/map2.html是您可以在其中查看当前正在执行的其余代码的地方

1 个答案:

答案 0 :(得分:0)

在定义busMap之前,您正在将zoom_changed侦听器添加到地图中,因此它不会触发。将其添加到busMap中(在loadBusMap函数中)

function loadBusMap() {

//The empty map variable ('busMap') was created above. The line below creates the map, assigning it to this variable. The line below also loads the map into the div with the id 'bus-map' (see code within the 'body' tags below), and applies the 'busMapOptions' (above) to configure this map. 
busMap = new google.maps.Map(document.getElementById("bus-map"), busMapOptions);    

 directionsDisplay = new google.maps.DirectionsRenderer();

//Assigning the two map styles defined above to the map.
busMap.mapTypes.set('map_styles_bus', styled_bus);
busMap.mapTypes.set('map_styles_bus_zoomed', styled_bus_zoomed);
//Setting the one of the styles to display as default as the map loads.
busMap.setMapTypeId('map_styles_bus');

//Calls the function below to load up all the map markers and pop-up boxes.
loadMapMarkers();

google.maps.event.addListener(busMap, 'zoom_changed', function() {
  var markerIconStar = google.maps.MarkerImage("icons/star.png");

  var currentZoom = busMap.getZoom();
  if (currentZoom < 5){
        markerSanFran.setIcon(markerIconStar);
        markerLA.setIcon(markerIconStar);
        markerHollywood.setIcon(markerIconStar);
        markerSantaCruz.setIcon(markerIconStar);
        markerSanDiego.setIcon(markerIconStar);
        markerLasVegas.setIcon(markerIconStar);
        markerGrandCan.setIcon(markerIconStar);
        markerMamLakes.setIcon(markerIconStar);
        markerYosemite.setIcon(markerIconStar);
      }

  });
}