2

クリック可能なポリラインとポリゴンに関するインフォボックスがあります。

それらのいずれかをクリックすると、非表示のマーカーが作成され、infoxboxがポップアップ表示されます。

問題は、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

ポリラインに同様のスタイルの 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

于 2013-01-03T12:16:27.100 に答える
0

いくつかの問題があります。

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

マップ作成コードを提供していませんが、変数mapObjectはマップ オブジェクトである必要があります...これは、マップ オブジェクトへの他の参照には適合しませんmap。

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

event.LatLng 値を解析する必要はありません。すでに緯度/経度の値になっています。

上記の修正を加えた実際の例を次に示します。undefinedは定義されていないため、InfoBox が出力され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 に答える