1

一度に 1 つの情報バブルのみが表示されるように、つまり、情報バブルを切り替えるようにしようとしています。マーカーは、for ループでこのイベント ハンドラーに割り当てられ、マーカー配列をループします。

現時点では、これはインフォバブルを開きますが、閉じることはありません。複数のマーカーをクリックすると、前のマーカーを閉じなくてもそれぞれにインフォバブルが表示されます

Iv を追加しようとしましinfobuble2.close();たが、前の情報バブルを閉じるには、マーカーを 2 回クリックする必要があります。

また、情報バブルが開いているかどうかをテストしようとしましたが、それはinfoBubble2.isOpen()偽のようです。

そして、はい、私がinfowindowを試してみて、それを使用して機能がうまく機能するかどうか疑問に思っているなら、それを使用して機能がうまく機能しますが、デザインの制約のために、それに応じてポップアップのスタイルを設定する必要があります。以下は私のコードです

  var infoBubble2;

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

             infoBubble2 = new InfoBubble({
                map: map,
                position: new google.maps.LatLng(-35, 151),
                shadowStyle: 1,
                padding: 0,
                backgroundColor: 'rgb(255,255,255)',
                borderRadius: 4,
                arrowSize: 10,
                borderWidth: 1,
                borderColor: '#2c2c2c',
                disableAutoPan: true,
                hideCloseButton: !0,
                arrowPosition: 30,
                backgroundClassName: 'phoney',
                arrowStyle: 2
              });

            infoBubble2.setContent("some content");
            infoBubble2.open(map, marker);
  });
4

3 に答える 3

2

一度に 1 つだけ表示したい場合は、次のように、継続的に新しいオブジェクトを作成して管理しようとするのではなく、1 つのオブジェクトのみを作成して再利用します。

 var infoBubble2 = new InfoBubble({
    map: map,
    position: new google.maps.LatLng(-35, 151),
    shadowStyle: 1,
    padding: 0,
    backgroundColor: 'rgb(255,255,255)',
    borderRadius: 4,
    arrowSize: 10,
    borderWidth: 1,
    borderColor: '#2c2c2c',
    disableAutoPan: true,
    hideCloseButton: !0,
    arrowPosition: 30,
    backgroundClassName: 'phoney',
    arrowStyle: 2
  });


  google.maps.event.addListener(marker,'click',function() {
    infoBubble2.close();
    infoBubble2.setContent("some content");
    infoBubble2.open(map, marker);
  });
于 2013-08-13T15:28:20.113 に答える
1

initialize() 関数の外で infobubble2 変数を宣言し、新しい infobubble(); の値を割り当てることで解決しました。initialize() 内で、各マーカーへのアサイナーである onclick イベントが開き、infobubble のコンテンツが読み込まれます。

以下は私がしたことです。みんな助けてくれてありがとう。

var infoBubble2;

function initialize() {
    var myOptions = {
          zoom: zoom,
          minZoom: 0, maxZoom: 20,
          center: myLatLng,
          mapTypeId: maptype,
          mapTypeControl:false,
          streetViewControl:false,
          panControl:false
      };
   map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

   infoBubble2 = new InfoBubble({
            map: map,
            position: new google.maps.LatLng(-35, 151),
            shadowStyle: 1,
            padding: 0,
            backgroundColor: 'rgb(255,255,255)',
            borderRadius: 4,
            arrowSize: 10,
            borderWidth: 1,
            borderColor: '#2c2c2c',
            disableAutoPan: true,
            hideCloseButton: !0,
            arrowPosition: 30,
            backgroundClassName: 'phoney',
            arrowStyle: 2
          });

      $.getJSON('include/jsonCatPoints.php', function(data) {
          for(var i=0; i<data.length;i++){
            placeMarker(data[i]['cat_lat'], data[i]['cat_long'], map);
          }
        });


}//ends initialize

function placeMarker(lat, longg, map) {
      var image = 'img/cat_marker.png';
         marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat,longg),
          map: map,
          icon: image
        });
      makeBubble(map, "test" +lat, marker);
       markers.push(marker);
  }//ends placeMarker


function makeBubble(map, contentString, marker) {
  google.maps.event.addListener(marker, 'click', function() {
        infoBubble2.setContent("message"+contentString);
        infoBubble2.open(map, marker)
 });
}// ends makeBubble
于 2013-08-13T20:13:43.233 に答える