Question

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

但是，我也尝试使用函数' 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);

  }

})();

Answer 1

代码中没有“marker”数组;要在HTML点击事件中使用google.maps.Marker对象数组，该数组需要在全局范围内可用。
您的代码中没有“myclick”功能，可以用google.maps.event.trigger替换（标记，“点击”）;
在任何地方都没有.myname属性，您可能想要使用.title

working example

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;
      }


})();

谷歌地图中的侧边栏链接未从动态生成的标记加载

1 个答案: