我知道这是一个普遍的问题,但是我凝视,阅读谷歌并凝视了更多,但我看不出有什么问题.
我从MySql表中填充地图,对UK邮政编码进行反向地理编码,在结果周围画一个圆,但是我无法理解为什么我的闭包功能不起作用.
据我了解,闭包原理是关于从循环范围之外访问变量,而这个范围是我试图用函数来完成的,但是对于我而言,我无法使其正常工作.
我确信有人会为我的明显错误提供答案,并且我会很感激任何人都可以提供的帮助.
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 idownloadUrl("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); } }); }});
解决方法:
我对标记(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); }});
来源:https://www.icode9.com/content-1-501051.html
联系客服