使用缩放更改Google地图自定义图标 [英] change google maps custom icon with zoom

问题描述

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

  //将图标放大到大陆级别的星级
 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 是一个你可以在其中看到其他代码的地方

>解决方案

您在定义busMap之前将您的zoom_changed侦听器添加到地图，因此它不会触发。将它添加到已定义的busMap中（在您的loadBusMap函数中）

 函数loadBusMap（）{
 
 //上面创建了空映射变量（'busMap'）。下面一行创建地图，并将其分配给此变量。下面这行也将地图加载到ID为'bus-map'的div中（请参阅下面的'body'标签内的代码），并应用'busMapOptions'（上面）来配置此地图。 
 busMap = new google.maps.Map（document.getElementById（bus-map），busMapOptions）; 
 
 directionsDisplay = new google.maps.DirectionsRenderer（）; 
 
 //将上面定义的两种地图样式分配给地图。 
 busMap.mapTypes.set（'map_styles_bus'，styled_bus）; 
 busMap.mapTypes.set（'map_styles_bus_zoomed'，styled_bus_zoomed）; 
 //将其中一个样式设置为默认地图加载。 
 busMap.setMapTypeId（'map_styles_bus'）; 
 
 //调用下面的函数加载所有地图标记和弹出框。 
 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）; 
} 
 
}）; 
} 
  

I am trying to change my google map markers so that when the zoom is < 5 they change from their custom markers to a star image. This is what I have so far (not working)

//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 is a where you can see the rest of the code in action currently

解决方案

You are adding your zoom_changed listener to the map before the busMap is defined, so it doesn't ever fire. Add it to busMap where that is defined (in your loadBusMap function)

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);
      }

  });
}

这篇关于使用缩放更改Google地图自定义图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！