[英]Google maps V3 InfoWindow error
I use a simple Google Maps API on a simple webpage.我在一个简单的网页上使用了一个简单的谷歌地图 API。 The map contains a few custom icons and an infoWindow is set up. map 包含一些自定义图标并设置了一个信息窗口。 When opening the infoWindow/bubble by clicking on an icon the map does not do autopan and clicking on the X on the info bubble does not close it.通过单击图标打开信息窗口/气泡时,map 不会自动平移并且单击信息气泡上的 X 不会关闭它。
I am using JQuery but did the test without it and it still did not work.我正在使用 JQuery 但在没有它的情况下进行了测试,但仍然无法正常工作。 After clicking an icon and looking at the Firebug console I see the following error message:单击图标并查看 Firebug 控制台后,我看到以下错误消息:
bO is not a function bO 不是 function
(75 out of range 42) (75 超出范围 42)
I have set up a jsFiddle test case for this but I am also including the code here (the JavaScript is in the body because the code is part of a control).我为此设置了一个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), new google.maps.Point(0, 36));
var shadow = new google.maps.MarkerImage(imagesPath, new google.maps.Size(55, 45), new google.maps.Point(0, 0), new google.maps.Point(0, 45));
var shape = {
coord: [0, 0, 36, 0, 36, 36, 0, 36],
type: 'poly'
};
var image_own = new google.maps.MarkerImage(imagesPath, new google.maps.Size(36, 36), new google.maps.Point(0, 0), new google.maps.Point(0, 36));
var image_small = new google.maps.MarkerImage(imagesPath, new google.maps.Size(20, 20), new google.maps.Point(0, 0), new google.maps.Point(0, 20));
var shadow_small = new google.maps.MarkerImage(imagesPath, new google.maps.Size(30, 25), new google.maps.Point(0, 0), new google.maps.Point(0, 25));
var shape_small = {
coord: [0, 0, 20, 0, 20, 20, 0, 20],
type: 'poly'
};
var image_small_own = new google.maps.MarkerImage(imagesPath, new google.maps.Size(20, 20), new google.maps.Point(0, 0), new google.maps.Point(0, 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),
icon: image_own,
shape: shape,
shadow: shadow,
title: 'Test2',
map: map_plants
});
google.maps.event.addListener(mrk1, 'click', 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),
icon: image_own,
shape: shape,
shadow: shadow,
title: 'Test3',
map: map_plants
});
google.maps.event.addListener(mrk2, 'click', 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),
icon: image_own,
shape: shape,
shadow: shadow,
title: 'Test4',
map: map_plants
});
google.maps.event.addListener(mrk3, 'click', 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),
icon: image_own,
shape: shape,
shadow: shadow,
title: 'Test5',
map: map_plants
});
google.maps.event.addListener(mrk4, 'click', 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>
It appears your event listeners are incorrect..看来您的事件侦听器不正确..
google.maps.event.addListener(mrk1, 'click', function() {
infowindow.close();
infowindow.setContent(GetMapBubbleContent(1131));
infowindow.open(1131, mrk1);
});
The infowindow open line should be:信息窗口打开行应该是:
infowindow.open(map_plants, mrk1);
Open takes as param the map and then the mark so this worked for me in your fiddle. Open 将 map 作为参数,然后是标记,所以这对我有用。
Working fiddle update here.工作小提琴更新在这里。
EDIT: Also, upvote for a well thought out, detailed example where we see you've done the work.编辑:另外,请为我们看到您已完成工作的经过深思熟虑的详细示例投票。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.