动态填充的谷歌地图侧边栏

Question

我一直在使用 this V3 example的代码来设置一个链接栏，该链接栏在选择不同的类别过滤器时动态填充，但目前有两个问题。首先，我将初始的makeSidebar 函数放在地图的空闲事件中，但侧边栏仅在地图移动时创建，而不是在页面加载时创建。其次，在侧边栏中单击相应链接时，我似乎无法打开标记信息窗口。我的代码如下：

var map;
var infowindow;
var image = [];
var gmarkers = [];
var place;
var side_bar_html = "";

  image['attraction'] = 'http://google-maps-icons.googlecode.com/files/beach.png'; 
  image['food'] = 'http://google-maps-icons.googlecode.com/files/restaurant.png';
  image['hotel'] = 'http://google-maps-icons.googlecode.com/files/hotel.png';
  image['city'] = 'http://google-maps-icons.googlecode.com/files/smallcity.png';

function mapInit(){

    var placeLat = jQuery("#placelat").val();
    var placeLng = jQuery("#placelng").val();
    var centerCoord = new google.maps.LatLng(placeLat, placeLng); 

    var mapOptions = {
        zoom: 15,
        center: centerCoord,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    google.maps.event.addListener(map, 'idle', function() {
      var bounds = map.getBounds();
      var ne = bounds.getNorthEast();
      var sw = bounds.getSouthWest();
      var yMaxLat = ne.lat();
      var xMaxLng = ne.lng();
      var yMinLat = sw.lat();
      var xMinLng = sw.lng();
      //alert("bounds changed");
      updateMap(yMaxLat, xMaxLng, yMinLat, xMinLng);
      show("attraction");
      show("food");
      show("hotel");
      show("city");
      makeSidebar();
    });

    function updateMap(yMaxLat, xMaxLng, yMinLat, xMinLng) {
    jQuery.getJSON("/places", { "yMaxLat": yMaxLat, "xMaxLng": xMaxLng, "yMinLat": yMinLat, "xMinLng": xMinLng }, function(json) {
      if (json.length > 0) {
        for (i=0; i<json.length; i++) {
          var place = json[i];
          var category = json[i].tag;
          var name = json[i].name;
          addLocation(place,category,name);
          //makeSidebar();
        }
      }
    });
   }

    function addLocation(place,category,name) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(place.geom.y, place.geom.x),
        map: map,
        title: place.name,
        icon: image[place.tag]
      });
      //var iwNode = document.getElementById("infowindow");

      marker.mycategory = category;
      marker.myname = name;
      gmarkers.push(marker);

      google.maps.event.addListener(marker, 'click', function() {
        if (infowindow) infowindow.close();
        infowindow = new google.maps.InfoWindow({
          content: "<div id='infowindow'><div id='infowindow_name'><p>"+ place.name +"</p></div><div id='infowindow_contents'><p>" + place.tag +"</p><a href='/places/"+place.id+"' id='place_link'>Show more!</a></div></div>"
        });
        infowindow.open(map, marker);
        google.maps.event.addListener(map, 'click', function() {
          infowindow.close();
        });
      });
    }

    function show(category) {
      for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i].mycategory == category) {
          gmarkers[i].setVisible(true);
        }
      }
      document.getElementById(category+"box").checked = true;
    }

    function hide(category) {
      for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i].mycategory == category) {
          gmarkers[i].setVisible(false);
        }
      }
      document.getElementById(category+"box").checked = false;
      infowindow.close();
    }

    function boxclick(box,category) {
      if (box.checked) {
        show(category);
      } else {
        hide(category);
      }
      makeSidebar();
    }

    jQuery('#attractionbox').click(function() {
      boxclick(this, 'attraction');
    });

    jQuery('#foodbox').click(function() {
      boxclick(this, 'food');
    });

    jQuery('#hotelbox').click(function() {
      boxclick(this, 'hotel');
    });

    jQuery('#citybox').click(function() {
      boxclick(this, 'city');
    });

    function myclick(i) {
      google.maps.event.trigger(gmarkers[i],"click");
    }

    function makeSidebar() {
      //var html = "";
      for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i].getVisible()) {
          side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
         }
       }
       document.getElementById("side_bar").innerHTML = side_bar_html;
    }
}

jQuery(document).ready(function(){
  mapInit();
  //makeSidebar();
});

任何帮助将不胜感激 - 我可以做些什么来在页面加载时加载侧边栏，并让链接点击事件正常工作？谢谢！

Answer 1

您的链接不起作用的原因是您在mapInit 函数内定义了my_click 和makeSidebar 函数，因此它们在mapInit 范围之外不可用。只需将它们移到mapInit 之外，一切都会正常运行。

至于加载事件……你要找的是google.maps.event的addDomListener方法。只需使用

google.maps.event.addDomListener(window, 'load', name_of_your_inital_function);
// e. g. google.maps.event.addDomListener(window, 'load', mapInit);

最后； notta bene ...不要这样做：

var image = [];
image['attraction'] = 'data'; 
image['food'] = 'more data';

数组并不打算用作 Javascript 中的哈希值。改为使用对象作为字典/哈希值——这就是你实际在做的事情（数组“子类”对象），它会让其他人更容易使用你的代码（并且让你免于麻烦）。

var image = {};
image['attraction'] = 'data'; 
image['food'] = 'more data';