如何解决Google映射V3 InfoWindow错误
| 我在一个简单的网页上使用了一个简单的Google Maps API。该地图包含一些自定义图标,并设置了一个infoWindow。通过单击图标打开infoWindow /气泡时,地图不会自动平移,并且单击info气泡上的X不会将其关闭。 我正在使用JQuery,但没有它就进行了测试,但仍然无法正常工作。 单击图标并查看Firebug控制台后,我看到以下错误消息: b.O不是函数 (范围42之75) 我为此设置了一个jsFiddle测试用例,但我也在这里包括了代码(JavaScript在主体中,因为代码是控件的一部分)。<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title></title>
</head>
<body>
<script type=\"text/javascript\" src=\"http://maps.google.com/maps/api/js?sensor=false\"></script>
<script type=\"text/javascript\">
function GetMapBubbleContent(id) {
return \'content\';
}
var infowindow = new google.maps.InfoWindow();
var map_plants;
function InitializeMap() {
var imagesPath = \'http://lh6.ggpht.com/eib8rqN0V8k1Jhnu56cqubkvaEPf_6BXgyEqBPUCj9mHo57xXpMZAMUqr6SPj5b3cUQrqnoNc4Ct3Ps0zRg=s36\';
var image = new google.maps.MarkerImage(imagesPath,new google.maps.Size(36,36),new google.maps.Point(0,0),36));
var shadow = new google.maps.MarkerImage(imagesPath,new google.maps.Size(55,45),45));
var shape = {
coord: [0,36,36],type: \'poly\'
};
var image_own = new google.maps.MarkerImage(imagesPath,36));
var image_small = new google.maps.MarkerImage(imagesPath,new google.maps.Size(20,20),20));
var shadow_small = new google.maps.MarkerImage(imagesPath,new google.maps.Size(30,25),25));
var shape_small = {
coord: [0,20,20],type: \'poly\'
};
var image_small_own = new google.maps.MarkerImage(imagesPath,20));
var latlng = new google.maps.LatLng(46.239343,5.399111);
var myOptions = {
zoom: 6,center: latlng,mapTypeId: google.maps.MapTypeId.HYBRID,pancontrol: false,zoomcontrol: true,scalecontrol: true
};
infowindow = new google.maps.InfoWindow();
map_plants = new google.maps.Map(document.getElementById(\"panelMap\"),myOptions);
var mrk0 = new google.maps.Marker({
position: new google.maps.LatLng(48.183909,10.977222),icon: image_own,shape: shape,shadow: shadow,title: \'Test1\',map: map_plants
});
google.maps.event.addListener(mrk0,\'click\',function () {
infowindow.close();
infowindow.setContent(GetMapBubbleContent(1218));
infowindow.open(1218,mrk0);
});
var mrk1 = new google.maps.Marker({
position: new google.maps.LatLng(45.574806,11.834682),title: \'Test2\',map: map_plants
});
google.maps.event.addListener(mrk1,function () {
infowindow.close();
infowindow.setContent(GetMapBubbleContent(1131));
infowindow.open(1131,mrk1);
});
var mrk2 = new google.maps.Marker({
position: new google.maps.LatLng(48.976219,16.977306),title: \'Test3\',map: map_plants
});
google.maps.event.addListener(mrk2,function () {
infowindow.close();
infowindow.setContent(GetMapBubbleContent(911));
infowindow.open(911,mrk2);
});
var mrk3 = new google.maps.Marker({
position: new google.maps.LatLng(1.000000,15.000000),title: \'Test4\',map: map_plants
});
google.maps.event.addListener(mrk3,function () {
infowindow.close();
infowindow.setContent(GetMapBubbleContent(1422));
infowindow.open(1422,mrk3);
});
var mrk4 = new google.maps.Marker({
position: new google.maps.LatLng(48.055114,9.052830),title: \'Test5\',map: map_plants
});
google.maps.event.addListener(mrk4,function () {
infowindow.close();
infowindow.setContent(GetMapBubbleContent(687));
infowindow.open(687,mrk4);
});
}
$(document).ready(function () {
InitializeMap();
});
</script>
<div id=\"panelMap\" style=\"height: 600px; width: 600px; overflow: hidden;\">
</body>
</html>
解决方法
看来您的事件监听器不正确。
google.maps.event.addListener(mrk1,\'click\',function() {
infowindow.close();
infowindow.setContent(GetMapBubbleContent(1131));
infowindow.open(1131,mrk1);
});
信息窗口的打开行应为:
infowindow.open(map_plants,mrk1);
Open将地图和标记作为参数,因此这对您有用。
工作小提琴在这里更新。
编辑:另外,赞扬一个经过深思熟虑的详细示例,我们在这里看到您已经完成了工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。