多个地理编码器请求谷歌地图api v3
嗨我一直在使用谷歌地图API v3和地理编码器来显示地图,它的运行良好。当我试图在同一页面上显示另一张地图时,只加载第一张地图。第二张地图只显示一个灰色区域。没有地图加载。我必须做多个地址解析器请求,但我该如何解决它。这是我到目前为止的代码:多个地理编码器请求谷歌地图api v3
var geocoder;
var map;
var map2;
var marker;
var infobox;
function initialize() {
//Geocoder
geocoder = new google.maps.Geocoder();
var address = 'Times Square, New York';
geocoder.geocode({ 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
//Marker
var companyLogo = new google.maps.MarkerImage('images/pin.png',
new google.maps.Size(20,20),
new google.maps.Point(0,0),
new google.maps.Point(10,10)
);
//Marker shadow
var companyShadow = new google.maps.MarkerImage('images/pin_shadow.png',
new google.maps.Size(25,33),
new google.maps.Point(0,0),
new google.maps.Point(0, 25)
);
//Display the marker
var marker = new google.maps.Marker({
map: map,
icon: companyLogo,
shadow: companyShadow,
position: results[0].geometry.location,
title:"Some title"
});
//Infobox
infobox = new InfoBox({
content: document.getElementById("infobox"),
disableAutoPan: false,
maxWidth: 320,
pixelOffset: new google.maps.Size(-142, -150),
zIndex: null,
boxStyle: {
opacity: 1,
width: "300px"
},
closeBoxMargin: "0px",
closeBoxURL: "images/close_tooltip.png",
infoBoxClearance: new google.maps.Size(1, 1)
});
//Open infobox
google.maps.event.addListener(marker, 'mouseover', function() {
infobox.open(map, this);
map.panTo(geocoder);
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
//Map options
var myOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
scrollwheel: false
}
//Call Maps
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
用来设置了第二张地图不包含center
属性,所以第二个地图无法集中的myOptions
对象。
当地理编码器被调用时,您将第一个地图的中心:
map.setCenter(results[0].geometry.location);
,但你不设置第二个地图。
没有设置地图的中心,它将保持灰色和空白。
感谢,使地图出现,但当然只有在两个地图中的同一位置。我现在有两张相同的地图。你能否指出我如何获得两个或更多不同地点的解决方案? – Uhura 2012-08-08 16:53:03
您*可以*只是重复您已经拥有的“地图”代码,但使用'map2',以便将结果应用于正确的地图。但是,无论如何,每次打开页面时都不应该对已知位置进行地理编码。只需找到想要显示的地点的坐标,并用'setCenter()'设置每个地图的中心。更少的代码出错,减少对Google资源的调用(对用户来说也更快)。 – 2012-08-08 17:50:51
感谢您的提示。我期待着使用Wordpress,所以这些位置将是未知的,并且由用户为每个帖子添加。无论如何,我想出了一些东西。 – Uhura 2012-08-09 08:52:59
“它不工作”... *什么*不工作?地理编码器?第二张地图? “不工作”是什么意思?错误控制台中记录了哪些错误? (等等) – 2012-08-08 16:37:09
抱歉,我应该指定。第一张地图工作正常。第二张地图根本不会出现。 – Uhura 2012-08-08 16:42:26