0

我是 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);

   }
}
});
4

2 回答 2

0

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

我添加了 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;
}
于 2013-11-16T10:59:28.960 回答
0 
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");
});
于 2014-02-26T09:42:14.617 回答