我有一个 Bootstrap 网站,它使用谷歌地图将位置显示为标题图像。
您可以在此处查看网页:http://www.tarmastersasphalt.com/contact.asp
页面中的html代码是这样的:
<div id="map" class="map img-responsive">
</div>
.
页面在页脚中引入了这些标准 Bootstrap 函数:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="assets/plugins/gmap/gmap.js"></script>
.
页面也调用这个函数:
var ContactPage = function () {
return {
//Basic Map
initMap: function () {
var map;
$(document).ready(function(){
map = new GMaps({
div: '#map',
lat: 38.9721102,
lng: -94.1037494
});
var marker = map.addMarker({
lat: 38.9721102,
lng: -94.1037494,
title: 'Tar Masters.'
});
});
},
//Panorama Map
initPanorama: function () {
var panorama;
$(document).ready(function(){
panorama = GMaps.createPanorama({
el: '#panorama',
lat : 38.9721102,
lng : -94.1037494
});
});
}
};
}();
.
然后执行这个函数:
<script type="text/javascript">
jQuery(document).ready(function() {
ContactPage.initMap();
});
</script>
.
这一切都运行良好。我想要做的是让谷歌地图在第一次显示在页面上时实际上显示得更缩小。我认为您可以在链接中使用类似 &z=nn
或 ,nnz
的内容来完成此操作。
.
例如 - 如果您使用浏览器并直接访问此 URL:
您将看到我网站上显示的 map 。但如果你去这里:
您将看到我希望它出现在我的网站上的 map 。请注意第一个链接中使用 ,17z
和第二个链接中使用 ,13z
。 (顺便说一句:我还注意到它似乎改变了坐标号..不知道这是怎么回事。)
.
所以我的问题如下:有什么方法可以告诉 gmap 函数我希望它在首次显示时更加缩小(显示后无需手动缩小) )?
我想我在某处读到过,您可以添加一些不可见的标记,这将迫使谷歌缩小更多,以便显示可见区域中的所有标记..但我也不知道如何实现这一点。
.
注意:请在大屏幕上查看网站以了解我在说什么。 (当窗口尺寸变小时,我使用静态图像作为标题图像,因为 map 的交互性在智能手机显示器上不能很好地工作。您无法滚动经过标题图像,因为它占据了整个视口(viewport),您所做的就是移动 map ,而不是向下滚动页面。)
.
任何帮助将不胜感激!
最佳答案
您必须在传递给 GMap 的选项中定义缩放,例如:
map = new GMaps({
div: '#map',
lat: 38.9721102,
lng: -94.1037494,
zoom: 10
});
(默认值为15)
关于javascript - 使 Google map 在显示指定位置时自动缩小更多,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27353435/