2

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

当我单击其中任何一个时，会创建一个不可见的标记，并且会弹出 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);

});

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

谢谢

4

2 回答 2

0

有几个问题：

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>
于 2012-12-17T23:05:23.587 回答
0

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

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

于 2013-01-03T12:16:27.100 回答