使用缩放更改谷歌地图自定义图标答案

【问题标题】：change google maps custom icon with zoom使用缩放更改谷歌地图自定义图标
【发布时间】：2013-09-25 05:38:49
【问题描述】：

我正在尝试更改我的谷歌地图标记，以便当缩放小于 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 是一个您可以查看当前正在运行的其余代码的地方

【问题讨论】：

仅供参考 - MarkerImage 对象已被弃用，替换为 google.maps.Icon 对象规范。当用户缩小时，您可能希望图标变回来。

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

【解决方案1】：

您在定义 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);
      }

  });
}

【讨论】：