点击标记时谷歌地图消失答案

【问题标题】：google map disappears when marker clicked点击标记时谷歌地图消失
【发布时间】：2012-12-04 13:19:45
【问题描述】：

我有一个关于可点击折线和多边形的信息框。

当我点击其中任何一个时，会创建一个不可见的标记，并且会弹出 infoxbox。

问题是当信息框出现时，地图消失了。

我没有收到任何 javascript 错误。

这是我的代码：（我已经注释掉了除内容文本之外的所有 infoxbox 功能）

google.maps.event.addListener(mapObject, 'click', function(event) {
        var invisibleMarker = new google.maps.Marker({
                        position: new google.maps.LatLng(event.latLng),
                        map: map
                    });

  var boxText = document.createElement("div");
  boxText.style.cssText = "background: none; padding: 0;";
  boxText.innerHTML = '<div style="margin: 0 0 20px 0;padding: 18px;background: white url(/media/images/map-marker-info-bg.gif) repeat-x top left;">' + content[0] + '</div>';

        var myOptions = {
             content: boxText
                             /*,latlng: event.latLng
                             ,alignBottom: true
            ,pixelOffset: new google.maps.Size(-470, -20)
            ,boxStyle: { 
              background: "transparent url('/media/images/map-marker-info-arrow.png') no-repeat bottom right"
              ,opacity: 1
              ,width: "470px"
             }
            ,closeBoxMargin: "18px 18px 2px 2px"
            ,closeBoxURL: "/media/images/map-marker-info-close.gif"
            ,infoBoxClearance: new google.maps.Size(5, 5)
            ,enableEventPropagation: false*/
    };

    var ib = new InfoBox(myOptions);
    ib.open(map, invisibleMarker);

});

谁能帮我解决这个问题？

谢谢

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-maps-markers infobox

【解决方案1】：

有几个问题：

1) google.maps.event.addListener(mapObject, 'click', function(event)

您尚未提供地图创建代码，但变量 mapObject 应该是地图对象...这不符合您对地图对象 map 的任何其他引用。

2)new google.maps.LatLng(event.latLng)

你不需要解析 event.LatLng 值，它已经是纬度/经度值了。

这是一个工作示例，上面提到了更正。 InfoBox 将输出undefined，因为content[0] 未定义，但这可以是您想要的任何有效文本。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
      html, body, #map_canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
    var map;
function test()
{
        var myOptions = {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

google.maps.event.addListener(map, 'click', function(event) {

        var invisibleMarker = new google.maps.Marker({
                        position: event.latLng,
                        map: map
                    });

  var boxText = document.createElement("div");
  boxText.style.cssText = "background: none; padding: 0;";
  boxText.innerHTML = '<div style="margin: 0 0 20px 0;padding: 18px;background: white url(/media/images/map-marker-info-bg.gif) repeat-x top left;">' + content[0] + '</div>';

        var myOptions = {
             content: boxText
                             /*,latlng: event.latLng
                             ,alignBottom: true
            ,pixelOffset: new google.maps.Size(-470, -20)
            ,boxStyle: { 
              background: "transparent url('/media/images/map-marker-info-arrow.png') no-repeat bottom right"
              ,opacity: 1
              ,width: "470px"
             }
            ,closeBoxMargin: "18px 18px 2px 2px"
            ,closeBoxURL: "/media/images/map-marker-info-close.gif"
            ,infoBoxClearance: new google.maps.Size(5, 5)
            ,enableEventPropagation: false*/
    };

    var ib = new InfoBox(myOptions);
    ib.open(map, invisibleMarker);

});
}
</script>
</head>
<body onload="test();">
    <div id="map_canvas"></div>
</body>
</html>

【讨论】：

1) 我发布的代码在函数 createInfoWindow(mapObject,content, objectType) 中。 'mapObject' 变量是点击的标记，然后 'map' 是在函数上方定义的地图对象。 2) InvisibleMarker 替换了 mapObject 用于我的测试，该函数现在使用“mapObject”。我认为这是问题所在，尽管我现在无法完全记住我刚才修复它的方式。 content 是一个数组，因此 content[0] 是一个用作 infoBox 副本的字符串。无论如何感谢您的提示
我知道问题出在哪里。我不应该按照 2) 新的 google.maps.LatLng(event.latLng) 解析 latlng 值。它修复了地图的消失。我现在还使用隐形标记在折线上方显示信息框，它工作正常。甚至解决了显示折线信息窗口的问题 - 我必须单击它 3 次才能显示标准信息窗口。感谢您的帮助

【解决方案2】：

我想为我的折线使用类似样式的信息框，但我认为需要传递点击位置。在原始的简单代码中是

infowindow.setContent(content[0]);
infowindow.position = event.latLng;
infowindow.open(map);

成功了

我不知道如何为 InfoBox 做这件事。我尝试在 InfoBox 选项中使用：

latlng: event.latLng

然后：

var ib = new InfoBox(myOptions);
ib.setPosition(event.latLng);
ib.open(map, mapObject);

但我得到了：

错误：anchor.getPosition 不是函数

源文件：http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js

【讨论】：