Google Maps JavaScript API - 自动缩放级别？ [英] Google Maps JavaScript API - Automate Zoom Level?

问题描述

我正在处理多个地图标记。目前我在我的JavaScript中使用 map.fitBounds（bounds）; 来调整地图的大小。 bounds包含多个 LatLng 对象。

我做错了什么？因为它缩小了太多： - （

）

JavaScript source

  var geocoder，map; 
 $（document）.ready（function（）{
变量coll_gmap = $（.gmap）; 
 if（coll_gmap.length！= 0）
 {
 //启动地图
 geocoder = new google.maps.Geocoder （）; 
 var latlng = new google.maps.LatLng（-34.397,150.644）; 
 var myOptions = {
 zoom：13，
 center：latlng，
 mapTypeControl：true，
 navigationControl：true，
 scaleControl：true，
 navigationControlOptions：{style：google.maps.NavigationControlStyle.ZOOM_PAN}，
 mapTypeId：google.maps.MapTypeId .ROADMAP 
} 
 var bounds = new google.maps.LatLngBounds（）; 
 //循环所有addressen +插入地图
 map = new google.maps.Map（coll_gmap [0]，myOptions）; 
 coll_gmap.each（函数（索引）
 {
 if（geocoder）{
 geocoder.geocode（{'address'：$（this）.attr（address） }，function（results，status）{
 if（status == google.maps.GeocoderStatus.OK）{
 map.setCenter（results [0] .geometry.location）; 
 bounds .extend（results [0] .geometry.location）; 
 
 var marker = new google.maps.Marker（{
 map：map，
 position：results [0] .geometry.location 
}）; 
} else {
 console.log（Geocode由于以下原因不成功：+ status）; 
} // end if状态
}）; //结束，如果geocoder.geocode 
} //结束，如果geocoder 
 
}）//结束coll_gmap每个
 map.fitBounds（bounds）; 
 $ b} // end if coll_gmap length 
 / * console.log（由NicoJuicy创建的脚本）; * / 
}）; // end onload 
  

HTML source

 < div class =gmapaddress =SomeAddress1style =width：700px; height：350px>< / div> 
< div class =gmapaddress =someAddress2>< / div> 
  

解决方案

我找到了解决方案。 b
$ b

而不是做单一的

  bounds.extend（myLatLng）
  

每次您将myLatLng添加到边界时，请执行以下操作：

  bounds = map.getBounds（）; 
 bounds.extend（results [0] .geometry.location）; 
 map.fitBounds（bounds）; 
  

希望这有助于任何人！

I'm working with multiple map markers. Currently I use map.fitBounds(bounds); in my JavaScript to resize the map. bounds contains multiple LatLng objects.

What am i doing wrong? Because it zooms out too far :-(

JavaScript source

var geocoder, map;
$(document).ready(function(){
    var coll_gmap = $(".gmap");
    if ( coll_gmap.length != 0 )
    {
        //initiate map
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 13,
            center: latlng,
           mapTypeControl: true,
            navigationControl: true,
            scaleControl: true,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN},
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var bounds = new google.maps.LatLngBounds();
        //loop all addressen + insert into map
          map = new google.maps.Map(coll_gmap[0], myOptions);
        coll_gmap.each(function(index)
        {
             if (geocoder) {
                    geocoder.geocode( { 'address': $(this).attr("address")}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            bounds.extend(results[0].geometry.location);

                            var marker = new google.maps.Marker({
                                map: map, 
                                position: results[0].geometry.location
                            });
                        } else {
                            console.log("Geocode was not successful for the following reason: " + status);
                        }//end if status
                    }); //end if geocoder.geocode
                } //end if geocoder   

        }) //end coll_gmap each
        map.fitBounds(bounds);

        }//end if coll_gmap length
       /* console.log("Script created by NicoJuicy");*/   
}); //end onload

HTML source

<div class="gmap" address="SomeAddress1" style="width:700px;height:350px"></div>
<div class="gmap" address="someAddress2"></div>

解决方案

I have found the solution.

Instead of doing a single

bounds.extend(myLatLng)

Everytime you add a myLatLng to your bounds, do these actions

bounds = map.getBounds();
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);

Hope this helps anyone!

这篇关于Google Maps JavaScript API - 自动缩放级别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！