谷歌地图V3信息窗口错误

发布于 11-15 02:42 字数 5716 浏览 5 评论 0原文

我在一个简单的网页上使用一个简单的 Google 地图 API。该地图包含一些自定义图标并设置了一个信息窗口。通过单击图标打开信息窗口/气泡时,地图不会自动平移,并且单击信息气泡上的 X 也不会将其关闭。

我正在使用 JQuery,但在没有它的情况下进行了测试,但它仍然无法工作。 单击图标并查看 Firebug 控制台后,我看到以下错误消息:

bO 不是函数

(75 超出范围 42)

我已经设置了 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>

I use a simple Google Maps API on a simple webpage. The map contains a few custom icons and an infoWindow is set up. 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.

I am using JQuery but did the test without it and it still did not work.
After clicking an icon and looking at the Firebug console I see the following error message:

b.O is not a function

(75 out of range 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).

<!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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

美人如玉2024-11-22 02:42:57

看来您的事件侦听器不正确。

    google.maps.event.addListener(mrk1, 'click', function() {
    infowindow.close();
    infowindow.setContent(GetMapBubbleContent(1131));
    infowindow.open(1131, mrk1);
});

信息窗口打开行应该是:

infowindow.open(map_plants, mrk1);

Open 将地图作为参数,然后是标记,因此这在您的小提琴中对我有用。

这里是工作小提琴更新。

编辑:另外,为我们看到的经过深思熟虑的详细示例投赞成票已经完成工作了。

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.

Working fiddle update here.

EDIT: Also, upvote for a well thought out, detailed example where we see you've done the work.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文