谷歌地图侧边栏标记来切换地图外隐藏的div

Question

我已经设置了一个侧边栏谷歌地图，当点击侧边栏按钮时，它会在地图上显示一个标记/信息窗口，并显示一个隐藏的 div，其中包含地图之外的信息。我想让标记可点击，但我很难弄清楚如何使标记显示与侧边栏对应的相同隐藏 div。任何帮助，将不胜感激。花了我一段时间才发现标记也没有显示/隐藏 div。

/**
* map
*/
var mapOpts = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true,
scrollwheel: false,
}
var map = new google.maps.Map(document.getElementById("map"), mapOpts);
//  We set zoom and center later by fitBounds()



/**
 * makeMarker() ver 0.2
 * creates Marker and InfoWindow on a Map() named 'map'
 * creates sidebar row in a DIV 'sidebar'
 * saves marker to markerArray and markerBounds
 * @param options object for Marker, InfoWindow and SidebarItem
 * @author Esa 2009
 */
var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];

function makeMarker(options){
  var pushPin = new google.maps.Marker({map:map});
  pushPin.setOptions(options);
  google.maps.event.addListener(pushPin, "click", function(){
    infoWindow.setOptions(options);
    infoWindow.open(map, pushPin);
    if(this.sidebarButton)this.sidebarButton.button.focus();
  });
  var idleIcon = pushPin.getIcon();
  if(options.sidebarItem){
    pushPin.sidebarButton = new SidebarItem(pushPin, options);
    pushPin.sidebarButton.addIn("sidebar2");
  }
  markerBounds.extend(options.position);
  markerArray.push(pushPin);
  return pushPin;
}

google.maps.event.addListener(map, "click", function(){
  infoWindow.close();
});


/**
 * Creates an sidebar item 
 * @constructor
 * @author Esa 2009
 * @param marker
 * @param options object Supported properties: sidebarItem, sidebarItemClassName, sidebarItemWidth,
 */
function SidebarItem(marker, opts){
  var tag = opts.sidebarItemType || "button";
  var row = document.createElement(tag);
  row.innerHTML = opts.sidebarItem;
  row.className = opts.sidebarItemClassName || "sidebar_item";  
  row.style.display = "block";
  row.style.width = opts.sidebarItemWidth || "180px";
  row.onclick = function(){
    google.maps.event.trigger(marker, 'click');
  }
  row.onmouseover = function(){
    google.maps.event.trigger(marker, 'mouseover');
  }
  row.onmouseout = function(){
    google.maps.event.trigger(marker, 'mouseout');
  }
row.onclick = function(){
     google.maps.event.trigger(marker, 'click');
     jQuery ('.content_selected').hide().removeClass('content_selected');
     jQuery('#div'+opts.target).show().addClass('content_selected');;
}
  this.button = row;
}
// adds a sidebar item to a <div>
SidebarItem.prototype.addIn = function(block){
  if(block && block.nodeType == 1)this.div = block;
  else
    this.div = document.getElementById(block)
    || document.getElementById("sidebar2")
    || document.getElementsByTagName("body")[0];
  this.div.appendChild(this.button);
}
// deletes a sidebar item
SidebarItem.prototype.remove = function(){
  if(!this.div) return false;
  this.div.removeChild(this.button);
  return true;
}




/**
 * markers and info window contents
 */
makeMarker({
  position: new google.maps.LatLng(39.924186, -75.297571),
  target:'1',
  icon: 'images/MapPin.png',
  title: "Royal Legends VBC",
  sidebarItem: "Royal Legends VBC",
  content: '<div id="hook">Royal Legends VBC</div>'
});   
makeMarker({
  position: new google.maps.LatLng(40.152785, -76.750233),
  target:'2',
  icon: 'images/MapPin.png',
  title: "Yorktowne VBC",
  sidebarItem: "Yorktowne VBC",
  content: '<div id="hook">Yorktowne VBC</div>'
  });
makeMarker({
  position: new google.maps.LatLng(39.962254, -75.605264),
  target:'3',
  icon: 'images/MapPin.png', 
  title: "Lokahi",
  sidebarItem: "Lokahi",
  content: '<div id="hook">Lokahi</div>',
  clickable: false
}); 
makeMarker({
  position: new google.maps.LatLng(40.152785, -76.750233),
  target:'4',
  icon: 'images/MapPin.png', 
  title: "Yorktowne VBC",
  sidebarItem: "Yorktowne VBC",
  content: '<div id="hook">Yorktowne VBC</div>',
  clickable: false
}); 


/**
 *   fit viewport to markers
 */
map.fitBounds(markerBounds);

这是脚本的显示/隐藏部分。谢谢

row.onclick = function(){
     google.maps.event.trigger(marker, 'click');
     jQuery ('.content_selected').hide().removeClass('content_selected');
     jQuery('#div'+opts.target).show().addClass('content_selected');;
}

这是一个link 来查看它的实际应用。谢谢

Answer 1

您应该在标记上添加另一个 addListener 并在此处添加您的 content_selected 类，

google.maps.event.addListener(marker, "click", function(){
    //code
});

您是否使用sidebar_item 的索引来激活隐藏的 div ？在这种情况下，您应该在标记的信息窗口中添加一些 id，以便轻松定位要打开的 div。

我看到当你点击一个标记时，好的侧边栏按钮会激活，在这种情况下，你可以在按钮激活后打开好的 div，就像用户点击它时一样。

PS : 你发帖的最后一行有一个双 ;。

编辑：刚刚注意到，当你这样做

if(this.sidebarButton)this.sidebarButton.button.focus();

您可以为侧边栏按钮创建一个选定的类，然后通过查看哪个侧边栏按钮被激活来显示良好的隐藏 div。 或者更简单地触发按钮上的点击事件，例如：

if(this.sidebarButton)$(this.sidebarButton.button).trigger("click");

编辑 2

 row.onfocus = function(){
     jQuery('.content_selected').hide().removeClass('content_selected');
     jQuery('#div'+opts.target).show().addClass('content_selected');
 }