合并滚动锚与谷歌地图javascript

Merge scroll to anchor with Google map javascript

本文关键字:谷歌地图 javascript 滚动 合并      更新时间:2023-09-26

我想在单击侧边栏按钮时滚动或跳转到地图(顶部)。我正在努力使ESA的谷歌地图的响应版本与侧边栏在引导(3.3.4)。(简单的地图演示)

HTML:

<a name="map"></a><!-- anchor -->
<div id="map"></div><!-- map -->
<div id="sidebar" class="sb_plain"></div><!-- sidebar -->

地图的javascript:

/**
 * 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("sidebar");
  }
  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 || "120px";
  row.onclick = function(){
    google.maps.event.trigger(marker, 'click');
  /*** How to jump to the anchor "map" when clicking a button? ***/
  }
  row.onmouseover = function(){
    google.maps.event.trigger(marker, 'mouseover');
  }
  row.onmouseout = function(){
    google.maps.event.trigger(marker, 'mouseout');
  }
  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("sidebar")
    || 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(60.28527,24.84864),
  title: "Vantaankoski",
  sidebarItem: "Vantaankoski",
  content: "Vantaankoski"
});   
makeMarker({
  position: new google.maps.LatLng(60.27805,24.85281),
  title: "Martinlaakso",
  sidebarItem: "Martinlaakso",
  content: "Martinlaakso"
makeMarker({
  position: new google.maps.LatLng(60.23031,24.88353),
  title: "Pohjois-Haaga",
  sidebarItem: "Pohjois<br>Haaga",
  content: "Pohjois-Haaga"
});    
makeMarker({
  position: new google.maps.LatLng(60.17295,24.93981),
  title: "Helsinki",
  sidebarItem: "Helsinki",
  content: "Helsinki"
});    

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

滚动到锚的例子:

function jump(h){
    var top = document.getElementById(h).offsetTop;
    window.scrollTo(0, top);
}

我真的不知道如何合并这两个javascript。

我是这样解决的(没有锚):

/**
 * 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("sidebar");
  }
  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);
  var scrollToElement = function(el, ms){
      var speed = (ms) ? ms : 600;
      $('html,body').animate({
          scrollTop: $(el).offset().top
      }, speed);
  }
  row.innerHTML = opts.sidebarItem;
  row.className = opts.sidebarItemClassName || "sidebar_item";  
  row.style.display = "block";
  row.style.width = opts.sidebarItemWidth || "120px";
  row.onclick = function(){
    google.maps.event.trigger(marker, 'click');
    scrollToElement('#map', 600);
  }
  row.onmouseover = function(){
    google.maps.event.trigger(marker, 'mouseover');
  }
  row.onmouseout = function(){
    google.maps.event.trigger(marker, 'mouseout');
  }
  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("sidebar")
    || 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(60.28527,24.84864),
  title: "Vantaankoski",
  sidebarItem: "Vantaankoski",
  content: "Vantaankoski"
});   
makeMarker({
  position: new google.maps.LatLng(60.27805,24.85281),
  title: "Martinlaakso",
  sidebarItem: "Martinlaakso",
  content: "Martinlaakso"
makeMarker({
  position: new google.maps.LatLng(60.23031,24.88353),
  title: "Pohjois-Haaga",
  sidebarItem: "Pohjois<br>Haaga",
  content: "Pohjois-Haaga"
});    
makeMarker({
  position: new google.maps.LatLng(60.17295,24.93981),
  title: "Helsinki",
  sidebarItem: "Helsinki",
  content: "Helsinki"
});    

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