Question

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

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

问题是，当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);

});

有人可以帮我解决这个问题吗？

谢谢

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

Answer 2

我想为我的折线使用类似风格的InfoBox，但我认为需要通过点击位置。原始的简单代码是

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

单击标记时，谷歌地图消失

2 个答案: