javascript - 使 Google map 在显示指定位置时自动缩小更多

标签 javascript twitter-bootstrap google-maps

我有一个 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:

https://www.google.com.au/maps/place/1426+State+Hwy+TT,+Bates+City,+MO+64011,+USA/@38.9555594,-94.1035777,17z/data=!3m1!4b1!4m2!3m1!1s0x87c11502459d838b:0xadf0c711b5a89c2a

您将看到我网站上显示的 map 。但如果你去这里:

https://www.google.com.au/maps/place/1426+State+Hwy+TT,+Bates+City,+MO+64011,+USA/@38.9734448,-94.1113454,13z/data=!4m2!3m1!1s0x87c11502459d838b:0xadf0c711b5a89c2a

您将看到我希望它出现在我的网站上的 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/

相关文章:

html - Bootstrap v.4.1 - 输入中断中的图标

angularjs - 适用于 Web 应用程序的 Bootstrap + 适用于移动设备的 Ionic。这是一个好的组合吗?

css - Bootstrap : is it possible to change the "has-error" line thickness?

javascript - Google map API addListener 方法不起作用

javascript - 抛出错误但 Jest 的 `toThrow()` 没有捕获错误

javascript - 为什么 arr.filter(String) 也返回数字?

javascript - Joi 验证 - 不允许空对象

css - 另一个 Div 中的 Google Maps API v3

java - Google 在 Appcompactivity 中的 AutoCompleteTextView 上放置 api 调用 - Android

javascript - Chart.JS 自定义 y 轴标签,其中包含有值(value)的文本