2

カスタム情報ウィンドウを取得するために、Google Maps API V3 の InfoBox プラグインを初めて使用しています。クリックすると Google Places API コンテンツが開くインフォボックスがあります。しかし、新しいマーカーをクリックすると、前の情報ボックスが閉じません。一度に 1 つのインフォボックスのみを開きたい。この質問のガイダンスに従おうとしました: Google マップ V3 -自分のコードで一度に表示できる情報ボックスは 1 つだけです。私のコードの関連セクションは次のとおりです。

 var boxText = document.createElement("div");
 boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";


 var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              background: "url('') no-repeat"
              ,opacity: 0.75
              ,width: "280px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
    };

 var ib = new InfoBox(myOptions);
  var request =  {
      reference: place.reference
};
google.maps.event.addListener(marker,'click',function(e){
    service.getDetails(request, function(place, status) {

      if (status == google.maps.places.PlacesServiceStatus.OK) {
        boxText.innerHTML = '<br><div><div style="font-size: 18px; vertical-align:top; border:2px solid; background-color:; color: #555555;"><b>&nbsp;'+place.name+'</b>';
        if (!!place.website) contentStr += '&nbsp;<a target="_blank" href="'+place.website+'"><img src="img/arrow.png" style="position:absolute; bottom:0px: right:0px; height:22px; width:22px;"></img></a></div></div>';
        ib.close(); 
        ib.open(map, marker); 
      } else { 
        var contentStr = "<h5>No Result, status="+status+"</h5>";
        ib.close(); 
        ib.open(map, marker); 
       }
    });

});
gmarkers.push(marker);

残念ながら、一度に複数の情報ウィンドウが表示されます。また、別のスクリプトをロードする必要のない Google API 情報ウィンドウのスタイルを設定する別のオプションはありますか? これはモバイル Web サイトで実行される予定で、CSS3 のみを使用する方法があればそれが望ましいでしょう。

4

1 に答える 1

1

このフォーラムの投稿https://groups.google.com/forum/?fromgroups=#!topic/google-mapsからピックアップしたこの例http://www.geocodezip.com/fredag​​smat_se_infoboxA.htmlを使用して問題を解決しました-js-api-v3/gLHyTaKlJ2c .

私の理解が正しければ、infobox 変数を初期化関数の外に配置してグローバルにする必要があります。私の場合、var ib = null;. 次に、ib = new InfoBox({}); を配置します。初期化関数を閉じる直前。関数を呼び出す方法は、特定の JavaScript によって異なりますが、ガイダンスについては例を参照してください。

于 2012-11-25T21:10:31.287 に答える