谷歌地图V3 - 我无法调和关闭

时间:2012-09-04 20:55:51

标签: javascript google-maps

我知道这是一个常见的问题,但我已经盯着,看了googled并盯着更多,但我看不出有什么问题。

我从MySql表中填充我的地图,对英国邮政编码进行反向地理编码,在结果周围绘制一个圆圈,但我无法理解为什么我的闭包功能不起作用。

据我所知,闭包原则是关于从循环范围之外访问变量,我试图用函数来完成 - 但是对于我的生活,我无法让它工作。

我相信有人会得到我明显错误的答案,我将不胜感激任何人都能给予的帮助。

var mapOptions = {
    zoom : 8,
    center : new google.maps.LatLng(37.09024, -95.712891),
    mapTypeId : google.maps.MapTypeId.ROADMAP
};

var infowindow = new google.maps.InfoWindow({
    content : contentString
});

var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var contentString;
var i

downloadUrl("getXML.php", function(data) {

    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        contentString =(name);
        var postcode = markers[i].getAttribute("postcode");
        var dateadded = markers[i].getAttribute("dateadded");
        var extra = markers[i].getAttribute("extra");

        geocoder.geocode({
            'address' : postcode
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map : map,
                    clickable : true,
                    position : results[0].geometry.location
                })
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(name );
                        infowindow.open(map, marker);
                    }
                })(marker, i));

                var circle = new google.maps.Circle({
                    map : map,
                    radius : 12070.99, // 15 miles in metres
                    fillColor : '#AA0000'
                });
                circle.bindTo('center', marker, 'position');

            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }

        });

    }

});

1 个答案:

答案 0 :(得分:0)

我使用函数闭包函数用于标记(createMarker)和地理编码器(geocodeMarker)

var mapOptions = {
    zoom : 8,
    center : new google.maps.LatLng(37.09024, -95.712891),
    mapTypeId : google.maps.MapTypeId.ROADMAP
};

var infowindow = new google.maps.InfoWindow({
    content : contentString
});

var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var contentString;
var i;
function createMarker(latlng, name, html)
{
   var marker = new google.maps.Marker({
         map : map,
         clickable : true,
         position : latlng
     })
     google.maps.event.addListener(marker, 'click', function() {
         infowindow.setContent(name );
         infowindow.open(map, marker);
     });

     var circle = new google.maps.Circle({
         map : map,
         radius : 12070.99, // 15 miles in metres
         fillColor : '#AA0000'
     });
     circle.bindTo('center', marker, 'position');
}

function geocodeMarker(postcode, name, html)
{
  geocoder.geocode({
      'address' : postcode
  }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          createMarker(results[0].geometry.location, html);
      } else {
          alert('Geocode was not successful for the following reason: ' + status);
      }

  });
}

downloadUrl("getXML.php", function(data) {

        var xml = xmlParse(data);
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        contentString =(name);
        var postcode = markers[i].getAttribute("postcode");
        var dateadded = markers[i].getAttribute("dateadded");
        var extra = markers[i].getAttribute("extra");
        geocodeMarker(postcode, name, contentString);

    }

});