合并滚动锚与谷歌地图javascript
Merge scroll to anchor with Google map javascript
我想在单击侧边栏按钮时滚动或跳转到地图(顶部)。我正在努力使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);
相关文章:
- 当我使用高度百分比时,谷歌地图javascript api不会显示
- 谷歌地图Javascript API与网络服务API
- 用两个手指旋转谷歌地图javascript中的地图
- 谷歌地图Javascript API位置库
- 谷歌应用程序脚本html服务和加载谷歌地图javascript api V3
- 谷歌地图Javascript v3多段线点击事件
- 将dropdownlist值传递给谷歌地图javascript
- 谷歌地图javascript多个方法错误
- 谷歌地图Javascript API在部署到设备时不起作用
- 如何在谷歌地图javascript中在地图上拖动标记(可拖动方向)时显示更新的坐标
- 如何使用谷歌地图javascript
- Redraw自定义谷歌地图javascript地图
- 谷歌地图Javascript V3未捕获类型错误:无法读取属性'offsetWidth'为null
- 谷歌地图JavaScript API-与setCenter配合使用
- 多边形中心谷歌地图JavaScript API v3
- 谷歌地图Javascript API“;未捕获类型异常-未定义不是函数“;
- 有没有办法使用谷歌地图javascript api突出显示一个国家,类似于嵌入api
- 谷歌地图Javascript API V3:标记具有相同的标题
- 将声音添加到标记数组 - 谷歌地图JavaScript
- 谷歌地图JavaScript标记问题