1

JSONとループを介してマーカーをプロットするGoogleマップの読み込みがあります。これまでのところ、これで問題ありません。

ただし、独自のループを持つ関数 '<strong>buildSidebar()' を使用してマーカーからサイドバー リンクを生成しようとしていますが、この関数はマップを壊しています。私はそれを元に戻し、両方のバージョンがスクリプトにあり、コメントアウトされています。

サイドバーの構築要素のどこが間違っているか、誰か教えてもらえますか? どんな助けでも大歓迎です。

これにはフィドルがあります-エヘム-ロードされません（フィドルでgマップをロードするためにすべてに従ったと思いました…）：http://jsfiddle.net/4mTpt/

前もって感謝します。

スクリプトは次のとおりです。

(function () {

  window.onload = function() {

    // Create new map
    var map = new google.maps.Map(document.getElementById("map-02"), {
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

    var markerBounds = new google.maps.LatLngBounds();

    // Create the JSON data
    var json = [
      {
          "title": "Dalston Kingsland",
          "lat": 51.548148,
          "lng": -0.075674,
          "description": "<strong>Dalston Kingsland</strong> lorem ipsum dolor sit amet," + 
          "consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet" + 
          " <em>AAA dolore magna aliquam erat volutpat.</em>"
      },
      {
          "title": "Hackney Central",
          "lat": 51.547105,
          "lng": -0.056031,
          "description": "<strong>Hackney Central</strong> lorem ipsum dolor sit amet," + 
          "consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet" + 
          " <em>BBB dolore magna aliquam erat volutpat.</em>"
      },
      {
          "title": "Bethnal Green Station",
          "lat": 51.523917,
          "lng": -0.059541,
          "description": "<strong>Bethnal Green Station</strong> lorem ipsum dolor sit amet," + 
          "consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet" + 
          " <em>CCC dolore magna aliquam erat volutpat.</em>"
      },
      {
          "title": "Old Street Station",
          "lat": 51.525528,
          "lng": -0.088185,
          "description": "<strong>Old Street Station</strong> lorem ipsum dolor sit amet," + 
          "consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet" + 
          " <em>CCC dolore magna aliquam erat volutpat.</em>"
      }
    ]

    // Create global infoWindow object for all markers
    //var infoWindow = new google.maps.InfoWindow();
    var infoWindow = new google.maps.InfoWindow({
      //content: contentString,
      maxWidth: 250
    });

    // Loop through the JSON data
    for (var i = 0, length = json.length; i < length; i++) {
      var data = json[i],
      latLng = new google.maps.LatLng(data.lat, data.lng);

      // Creating a marker and putting it on the map
      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: data.title
      });

      //function buildSidebar() {
        //for (var i=0; i<marker.length; i++) {
          //if (marker[i].getVisible()) {
            //sidebarHtml += '<a href="javascript:myclick(' + i + ')">' + marker[i].myname + '<\/a><br>';
            //}
          //}
        //for (var i=0; i<marker.length; i++) {
          /*if (marker[i].getVisible()) {
            sidebarHtml += '<a href="javascript:myclick(' + i + ')">' + marker[i].myname + '<\/a><br>';
            }
          //}
        document.getElementById("tabs").innerHTML = sidebarHtml;
      }*/

      markerBounds.extend(latLng);

      // Create a closure to retain correct data.
      (function(marker, data) {
        google.maps.event.addListener(marker, "click", function(e) {
          infoWindow.setContent(data.description);
          infoWindow.open(map, marker);
        });
      })(marker, data);
    }

  map.fitBounds(markerBounds);

  }

})();
4

1 に答える 1

0
  1. コードに「マーカー」配列はありません。HTML クリック イベントで google.maps.Marker オブジェクトの配列を使用するには、その配列がグローバル スコープで使用可能である必要があります。
  2. コードに「myclick」関数がありません。google.maps.event.trigger(marker, 'click'); に置き換えることができます。
  3. .myname プロパティはどこにもありません。おそらく .title を使用する必要があります

実施例

var gmarkers = [];
(function () {

  window.onload = function() {

    // Create new map
    var map = new google.maps.Map(document.getElementById("map-02"), {
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

    var markerBounds = new google.maps.LatLngBounds();

    // Create the JSON data
    var json = [
      {
          "title": "Dalston Kingsland",
          "lat": 51.548148,
          "lng": -0.075674,
          "description": "<strong>Dalston Kingsland</strong> lorem ipsum dolor sit amet," + 
          "consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet" + 
          " <em>AAA dolore magna aliquam erat volutpat.</em>"
      },
      {
          "title": "Hackney Central",
          "lat": 51.547105,
          "lng": -0.056031,
          "description": "<strong>Hackney Central</strong> lorem ipsum dolor sit amet," + 
          "consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet" + 
          " <em>BBB dolore magna aliquam erat volutpat.</em>"
      },
      {
          "title": "Bethnal Green Station",
          "lat": 51.523917,
          "lng": -0.059541,
          "description": "<strong>Bethnal Green Station</strong> lorem ipsum dolor sit amet," + 
          "consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet" + 
          " <em>CCC dolore magna aliquam erat volutpat.</em>"
      },
      {
          "title": "Old Street Station",
          "lat": 51.525528,
          "lng": -0.088185,
          "description": "<strong>Old Street Station</strong> lorem ipsum dolor sit amet," + 
          "consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet" + 
          " <em>CCC dolore magna aliquam erat volutpat.</em>"
      }
    ]

    // Create global infoWindow object for all markers
    //var infoWindow = new google.maps.InfoWindow();
    var infoWindow = new google.maps.InfoWindow({
      //content: contentString,
      maxWidth: 250
    });

    // Loop through the JSON data
    for (var i = 0, length = json.length; i < length; i++) {
      var data = json[i],
      latLng = new google.maps.LatLng(data.lat, data.lng);

      // Creating a marker and putting it on the map
      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: data.title
      });
      gmarkers.push(marker);
      markerBounds.extend(latLng);

      // Create a closure to retain correct data.
      (function(marker, data) {
        google.maps.event.addListener(marker, "click", function(e) {
          infoWindow.setContent(data.description);
          infoWindow.open(map, marker);
        });
      })(marker, data);
    }

  map.fitBounds(markerBounds);
  buildSidebar();
  }
      function buildSidebar() {
        var sidebarHtml = "";                         
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].getVisible()) {
            sidebarHtml += '<a href="javascript:google.maps.event.trigger(gmarkers[' + i + '],\'click\')">' + gmarkers[i].title + '<\/a><br>';
            }
          }
        document.getElementById("tabs").innerHTML = sidebarHtml;
      }


})();
于 2013-07-19T15:53:17.507 に答える