Google 地图 JavaScript API - 自动缩放级别？
我正在使用多个地图标记。目前，我在 JavaScript 中使用 map.fitBounds(bounds); 来调整地图大小。 bounds 包含多个 LatLng 对象。
我做错了什么？因为它缩小得太远了:-(
JavaScript 源
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 源
<div class="gmap" address="SomeAddress1" style="width:700px;height:350px"></div>
<div class="gmap" address="someAddress2"></div>
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
fitBounds()方法应该可以工作。但请注意，它总是在地图的大小上保留一些填充。请考虑以下示例：上述示例的屏幕截图：
红色边界框代表
LatLngBounds< /code> 使用两个标记扩展时的对象。请注意，地图画布的宽度为543px，还要注意边界框左侧和右侧的填充边距。现在，如果我们使用
542px将地图画布的宽度减少1px，则fitBounds()方法将弹出到较低的缩放级别:The
fitBounds()method should work. However note that it always keeps some padding on the sizes of the map. Consider the following example:Screenshot from the above example:
The red bounding box represents the
LatLngBoundsobject when extended with both markers. Note that the map canvas is543pxwide, and also note the padding margin to the left and right of the bounding box.Now if we reduce the width of the map canvas by just
1px, using542px, thefitBounds()method will pop to a lower zoom level:我使用右侧的“相关”链接来到这里，我认为您的问题的答案与上一个问题的答案相同。 :p
看，问题是，每次您使用平移/缩放地图的功能时，脚本都会忽略新的类似输入，直到再次准备好为止。因此，您必须检测到这一点，并且仅在接受时调用 fitBounds() 。尝试将您的替换
为
“祝你好运”。
I got here using a "Related" link to the right, and I think that the answer to your problem is the same as to the previous question. :p
See, the thing is that every time you use a function that pans/zooms the map, the script ignores new, similar, input until it's ready for it again. Therefore, you have to detect this and only call fitBounds() when it's accepted. Try replacing your
with
Good luck.
只需使用 setZoom 函数即可。
Just use the setZoom function.
我已经找到了解决方案。
不要执行一次操作
每次将 myLatLng 添加到边界时，
，而是执行以下操作希望这对任何人都有帮助！
I have found the solution.
Instead of doing a single
Everytime you add a myLatLng to your bounds, do these actions
Hope this helps anyone!
}
}