Google地理编码 - 自定义标记不会显示 [英] Google Geocoding - custom marker does not appear
本文介绍了Google地理编码 - 自定义标记不会显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试将Google Maps API与地理编码结合使用。
标记出现在需要的位置，但只有红色图标出现，就像该函数忽略图标参数一样。
请注意，我没有Geo - 代码和标记图标的显示方式应该是相同的，这个问题只存在于地理编码中。
这里的代码：
<！DOCTYPE html>
< html>
< head>
< title>简易地图< /标题>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta charset =utf-8>
< style>
html，body，＃map-canvas {
height：100％;
margin：0px;
填充：0px
}
< / style>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js>< / script>
< script src =jquery.xml2json.jstype =text / javascriptlanguage =javascript>< / script>
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false>< / script>
< script>
var markers = [];
$ .get（'Customers.xml'，function（xml）{
var jsonObj = $ .xml2json（xml）;
$ .each（jsonObj.Marker，function（）{
var stat = this.site_status ==Critical？redgoogle.png：green_marker.png;
var mark = {
title：this.title，
location ：this.site_location，
lati：this.latitude，
longi：this.longitude，
icon：stat
}
markers.push（mark）;
}）;
}）;
函数initialize（）{
var chicago = new google.maps.LatLng（35.442579，-40.895920）;
var mapOptions = {
zoom：4，
center：chicago，
mapTypeId：google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）;
for（var i = 0; i< markers.length; i ++）{
var maddress = markers [i] .location;
var image = markers [i] .icon;
var geocoder = new google.maps.Geocoder（）;
geocoder.geocode（{'address'：maddress}，function（results，status）{
$ b $ if（status == google.maps.GeocoderStatus.OK）
{
var myLatlng = new google.maps.LatLng（results [0] .geometry.location.lat（），results [0] .geometry.location.lng（））;
var iconBase ='https： //maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker（{position：results [0] .geometry.location，icon：image，map：map} ）;
}
else
{
alert（由于以下原因，Geocode不成功：+ status;
}
}）;
}
}
google.maps.event.addDomListener（window，'load'，initialize）;
调试器;
< / script>
< / head>
< body>
< div id =map-canvas>< / div>
< / body>
< / html>
预先致谢。
解决方法
地理编码是异步的，当循环结束时i = marker.length
var image = markers [ markers.length] .icon;
不是有效的图标。
您可以通过函数关闭来解决此问题，将参数传递给函数以将图标与地理编码器响应关联：
for（var i = 0; i< markers.length; i ++）{
var maddress = markers [i] .location;
var image = markers [i] .icon;
geocodeAddress（maddress，image，map）;
函数geocodeAddress（maddress，image，map）{
var geocoder = new google.maps.Geocoder（）;
geocoder.geocode（{'address'：maddress}，function（results，status）{
if（status == google.maps.GeocoderStatus.OK）{
var myLatlng = new google .maps.LatLng（results [0] .geometry.location.lat（），results [0] .geometry.location.lng（））;
var iconBase ='https://maps.google.com/ mapfiles / kml / shapes /';
var marker = new google.maps.Marker（{position：results [0] .geometry.location，icon：image，map：map}）;
} else {
alert（由于以下原因Geocode不成功：+ status;
}
}）;
}
在页面加载事件和AJAX加载之间也存在争用条件标记数组。
I am trying to use the Google Maps API with Geo-coding. The marker's appear in the needed location but only red icon appear, as if the function ignores the icon parameter.
Note, I have the same code without Geo-coding and the marker icon's appear as they should, the issue exists only with Geo-coding.
Here the code:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.xml2json.js" type="text/javascript" language="javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var markers = [];
$.get('Customers.xml', function(xml) {
var jsonObj = $.xml2json(xml);
$.each(jsonObj.Marker, function(){
var stat = this.site_status == "Critical" ? "redgoogle.png" : "green_marker.png";
var mark = {
title: this.title,
location: this.site_location,
lati: this.latitude,
longi: this.longitude,
icon: stat
}
markers.push(mark);
});
});
function initialize() {
var chicago = new google.maps.LatLng(35.442579,-40.895920);
var mapOptions = {
zoom: 4,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for(var i=0; i< markers.length; i++){
var maddress = markers[i].location;
var image = markers[i].icon;
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': maddress}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
var myLatlng = new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng());
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({ position: results[0].geometry.location,icon: image,map:map });
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
debugger;
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Thanks in advance.
解决方案
geocoding is asynchronous, when the loop ends i = marker.length
var image = markers[markers.length].icon;
Is not a valid icon.
You can fix this with function closure, pass the arguments into a function to associate the icon with the geocoder response:
for(var i=0; i< markers.length; i++){
var maddress = markers[i].location;
var image = markers[i].icon;
geocodeAddress(maddress, image, map);
}
function geocodeAddress(maddress, image, map) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': maddress}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myLatlng = new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng());
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({ position: results[0].geometry.location,icon: image,map:map });
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
You also have a race condition between the page load event and the AJAX load of the markers array.
这篇关于Google地理编码 - 自定义标记不会显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
