2

アップデート

読みやすくするために、ここにエラーを追加しました。以下は、その更新で発生するエラーです。PSそれはInfoboxではなくInfoBoxであるべきです、私がそれを入力したときにどこかでそのエラーを作ったと思います:)。それで、私は今どこで間違っていますか？このエラーメッセージが何を言っているのかさえわかりません:

          Uncaught TypeError: Cannot read property 'style' of null
            InfoBox.setBoxStyle_
            InfoBox.setOptions
            (anonymous function) PAGE.php:101
            N.trigger main.js:23
            xK.(anonymous function).e
            (anonymous function)
            N.trigger main.js:23
            F.ie
            F.sm
            (anonymous function) main.js:11
            N.trigger main.js:23
            F.Jk
            (anonymous function)

古い投稿

カスタム DB で構築された XML ファイルを使用してカスタム マーカーが生成されるカスタム Google マップ V3 があります。以下にコードを投稿しました。これはすべて機能します。唯一のことは、Infobox プラグインを組み込んだことです。これにより、マーカー スタイルのスタイリングをより詳細に制御できます。ただし、Google InfoWindow とは異なり、別のマーカーがクリックされたときに自動的に閉じません。

これはロード関数で、マップを設定し、XML ファイルでマーカーを作成します。

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(54.500, 355.000),
    zoom: 5,
    mapTypeId: 'roadmap'
  });

  downloadUrl("genxml.php?id=<?php echo $VarToUse ?>",function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var number = markers[i].getAttribute("number");
      var address = markers[i].getAttribute("address");
      var type = markers[i].getAttribute("type");
      var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
      var myOptions = {
        content: "<b class=\"infoBox_links\"><a href=\"search.php?BoxID=" + number + "\">" + name + "</a></b> <br/>" + address
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-90, -125)
        ,zIndex: null
        ,boxStyle: { 
           background: "#FFFFFF",
           border: "1px solid grey",
           width: "170px",
           height: "70px",
           padding: "8px",
           fontSize: "12px",
           overflow: "hidden"
         }
        ,closeBoxMargin: "-5px"
        ,closeBoxURL: "imgs/x_google.png"
        ,isHidden: false
        ,pane: "floatPane"
        ,enableEventPropagation: false
      };
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon
      });
      bindInfoWindow(marker, map, myOptions); //function call to set the markers!
    }
  });
} //End of function load()

ご覧のとおり、ロード内で呼び出される関数があります。これが現在のコードで、正常に動作します。

function bindInfoWindow(marker, map, myOptions) {
  google.maps.event.addListener(marker, 'click', function() {
    var ib = new InfoBox(myOptions);
    ib.open(map, marker);
  });
} //End of bindInfoWindow function!!

これは機能し、必要なスタイルのカスタム情報ボックスが生成されますが、新しいマーカーをクリックしても現在の「開いている」情報ボックスは閉じません。そして、他の人々からの多くの異なる試みやアイデアから、私は現在次のものに取り組んでいます:

function bindInfoWindow(marker, map, myOptions) {

  var ibs = [];

  var closeInfoBox = function() {
    for (var i in ibs) {
        ibs[i].close();
    }
  }

  var ibIndex = ibs.push(new Infobox()) - 1,
    ib = ibs[ibIndex];

  google.maps.event.addListener(marker, 'click', function() {
        closeInfoBox();
        ib.setOptions(myOptions);
        //var ib = new InfoBox(myOptions);
        ib.open(map, marker);
  });
}

このコードは、地図上に複数のマーカーが表示されているときに一度にインフォボックスのみを開くことから来ています

ただし、これはエラーになるだけです。このコードを正しくコピーしていないか、このコードが機能しないほどマップの設定が異なっているかのいずれかです (そうではないと思います)。それは私が正しくしていないことだと思います。現時点では、この行は機能したくないため、

        var ibIndex = ibs.push(new Infobox()) - 1,

コンソールログに戻ってきます

        Uncaught ReferenceError: Infobox is not defined PAGE.php:101
        bindInfoWindow PAGE.php:101
        (anonymous function) PAGE.php:84
        request.onreadystatechange

すべてのアイデアを歓迎します。

どうもありがとう

グレン。

4

2 に答える 2

3

これを試して。配列が必要closeInfoBoxであり、関数の外部で指定されていloadない場合は、毎回配列をリセットし続けるだけです。

var ibs = [];

function closeInfoBox() {
  for (var i in ibs) {
    ibs[i].close();
  }
}

次に、bind 関数内で infobox を配列にプッシュする必要があります。

function bindInfoWindow(marker, map, myOptions) {
  var ib = new Infobox(myOptions);
  ibs.push(ib);

  google.maps.event.addListener(marker, 'click', function() {
    closeInfoBox();
    ib.open(map, marker);
  });

}

私はこれをテストしていませんが、コードのさまざまな時点で行ったことと似ています。

于 2013-10-04T11:44:21.620 に答える
0

ただし、Google InfoWindow とは異なり、別のマーカーがクリックされたときに自動的に閉じません。

これは私にとって新しいことです。 agoogle.maps.InfoWindowが自動的に閉じられることはありません。

1 つの InfoBox のみを開きたい場合は、すべてのマーカーに対して 1 つの InfoBox インスタンスのみを使用します。

function bindInfoWindow(marker, map, myOptions) {
  google.maps.event.addListener(marker, 'click', function() {
     //create a Infobox that will be used by each marker
    if(!this.getMap().get('ib')){this.getMap().set('ib',new InfoBox());}
    var ib = this.getMap().get('ib');
    ib.setOptions(myOptions);
    ib.open(this.getMap(),this);
  });
}
于 2013-10-04T18:58:02.820 に答える