1

我有一个谷歌地图加载，它通过 JSON 和循环绘制标记——到目前为止一切都很好。

但是，我还尝试使用具有自己循环的函数“<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 回答