Question

我是Google API V3的新手。我想更改缩放图标上的图标。完整的代码按预期运行，这是我给出了一个地图更改事件以捕获缩放更改的最后一点，这样我就可以将图标从简单的圆圈更改为Google标准的红色图标。请检查并建议更正，非常感谢。

<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
  var infowindow;
  var map;
  function initialize() {
    var myLatlng = new google.maps.LatLng(20, 0);
    var myOptions = {
    zoom: 3,
    panControl:true,
    zoomControl:true,
    mapTypeControl:true,
    scaleControl:true,
    streetViewControl:true,
    overviewMapControl:true,
    rotateControl:true,    
    center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
downloadUrl("worldcities.xml", function(data) {
  var markers = data.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                parseFloat(markers[i].getAttribute("lng")));
var circleOptions = {
    strokeColor: '#FF0000',
    strokeOpacity: 0.65,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.25,
    map: map,
    center: latlng,
    radius: parseInt(markers[i].getAttribute("population"))/25
    };

    var marker = createMarker(markers[i].getAttribute("name"), latlng,         markers[i].getAttribute("population"), markers[i].getAttribute("countrycode"), markers[i].getAttribute("region"));
var onekmcircle = new google.maps.Circle(circleOptions);
}
 });
}

function createMarker(name, latlng, popl, cntry, rgon) {
    var marker = new google.maps.Marker({
position: latlng, 
map: map,
icon: {
    path: google.maps.SymbolPath.CIRCLE,
scale: 2

    }, 
title: name});
var contentstring = '<b>'+name+'</b>'+'<br>Population: '+popl+'<br>Country: '+cntry+'<br>Region: '+rgon;


google.maps.event.addListener(marker, "click", function() {
  if (infowindow) infowindow.close();
  infowindow = new google.maps.InfoWindow({content: contentstring});
  infowindow.open(map, marker);
  var zoomLevel = map.getZoom();
  map.setCenter(marker.getPosition());
  if (zoomLevel<6)
{
    map.setZoom(6);

}

});



return marker;
}

google.maps.event.addListener(map, 'zoom_changed', function() {

var url ='http://maps.google.com/mapfiles/ms/icons/red-dot.png';
var icon = google.maps.MarkerImage(url);
var currentZoom = map.getZoom();
  if (currentZoom >9){
for(i=0; i< markers.length; i++ ) {
    markers[i].setIcon(icon);

   }
}
});

Answer 1

在这里你去...我为你修复了你的代码......你有一些错误。最大的一个原因是您没有将创建的标记保存到数组中以在事件侦听器上循环。

我添加了gMarkers数组。我在您网站的控制台中运行了代码并且运行正常。如果您有任何问题，请告诉我。

 var infowindow;
 var map;
 var gMarkers=[];

  function initialize() {
    var myLatlng = new google.maps.LatLng(20, 0);
    var myOptions = {
        zoom: 3,
        panControl:true,
        zoomControl:true,
        mapTypeControl:true,
        scaleControl:true,
        streetViewControl:true,
        overviewMapControl:true,
        rotateControl:true,    
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    downloadUrl("worldcities.xml", function(data) {
        markers = data.documentElement.getElementsByTagName("marker");
    });

    for (var i = 0; i < markers.length; i++) {
        var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
        var circleOptions = {
            strokeColor: '#FF0000',
            strokeOpacity: 0.65,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.25,
            map: map,
            center: latlng,
            radius: parseInt(markers[i].getAttribute("population"))/25
        };

        gMarkers.push(createMarker(markers[i].getAttribute("name"), latlng,markers[i].getAttribute("population"), markers[i].getAttribute("countrycode"), markers[i].getAttribute("region")));
        var onekmcircle = new google.maps.Circle(circleOptions);    
    }


    google.maps.event.addListener(map, 'zoom_changed', function() {
        var url ='http://maps.google.com/mapfiles/ms/icons/red-dot.png';
        var icon = google.maps.MarkerImage(url);
        var currentZoom = map.getZoom();
          if (currentZoom >9){
            for(var i=0; i< gMarkers.length; i++ ) {
                gMarkers[i].setIcon(icon);
            }
          }else{
                for(var i=0; i< gMarkers.length; i++ ) {
                    gMarkers[i].setIcon({path: google.maps.SymbolPath.CIRCLE,scale: 2});
                }
          }
    });

 }


function createMarker(name, latlng, popl, cntry, rgon) {
    marker = new google.maps.Marker({
        position: latlng, 
        map: map,
        icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 2

        }, 
        title: name
    });

    var contentstring = '<b>'+name+'</b>'+'<br>Population: '+popl+'<br>Country: '+cntry+'<br>Region: '+rgon;

    google.maps.event.addListener(marker, "click", function() {
        if (infowindow) infowindow.close();
        infowindow = new google.maps.InfoWindow({content: contentstring});
        infowindow.open(map, marker);
        var zoomLevel = map.getZoom();
        map.setCenter(marker.getPosition());
        if (zoomLevel<6){
            map.setZoom(6);
        }
    });

    return marker;
}

Answer 2

google.maps.event.addListener(marker,\'mouseover\', function() {
    marker.setIcon("fileadmin/new_templates/images/home_map_notification_hover.png");
    $.ajax({
    type: "POST",
    async : false,
    data: \'address=\'+add ,
    success: function(html){

            infowindow.setContent(html); 
            infowindow.open(map,marker);
        },
    });
});
// On Mouse out
google.maps.event.addListener(infowindow, \'mouseout\', function () {
marker.setIcon("fileadmin/new_templates/images/home_page_map_notification.png");
});
// On Infowindow close
google.maps.event.addListener(infowindow, \'closeclick\', function () {
marker.setIcon("fileadmin/new_templates/images/home_page_map_notification.png");
});

无法在更改活动的Google地图中获取不同的图标

2 个答案: