Google maps Google地理编码-未显示自定义标记
我正在尝试使用谷歌地图API与地理编码。 标记将显示在所需位置,但仅显示红色图标,就好像函数忽略图标参数一样 请注意,我有相同的代码,没有地理编码,标记图标的出现,因为他们应该,问题只存在与地理编码 代码如下:Google maps Google地理编码-未显示自定义标记,google-maps,google-maps-api-3,geocoding,Google Maps,Google Maps Api 3,Geocoding,我正在尝试使用谷歌地图API与地理编码。 标记将显示在所需位置,但仅显示红色图标,就好像函数忽略图标参数一样 请注意,我有相同的代码,没有地理编码,标记图标的出现,因为他们应该,问题只存在与地理编码 代码如下: <!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport" content="initial-scale=
<!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>
简单地图
html,正文,#地图画布{
身高:100%;
边际:0px;
填充:0px
}
var标记=[];
$.get('Customers.xml',函数(xml){
var jsonObj=$.xml2json(xml);
$.each(jsonObj.Marker,function(){
var stat=this.site\u status==“Critical”?“redgoogle.png”:“green\u marker.png”;
变量标记={
标题:这个,
地点:本网站地址:,
拉蒂:这个,纬度,
朗吉:这个,经度,
图标:stat
}
标记。推(标记);
});
});
函数初始化(){
var chicago=new google.maps.LatLng(35.442579,-40.895920);
变量映射选项={
缩放:4,
中心:芝加哥,
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map(document.getElementById('map-canvas'),mapOptions);
对于(var i=0;i
提前感谢。当循环结束时,地理编码是异步的,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);
}
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);
}
});
}
for(变量i=0;i
在页面加载事件和标记数组的AJAX加载之间还存在竞争条件
顺便问一下,有没有办法以循环方式自动放大每个标记?谢谢