javascript Google Maps API v3 - 地理编码器结果有边界问题

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9491114/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 06:50:56  来源:igfitidea点击:

Google Maps API v3 - Geocoder results issue with bounds

javascriptgoogle-mapsgoogle-maps-api-3google-geocoderfitbounds

提问by MrUpsidown

Goal: I want to have a custom search (geocode) function and be able to list and click each result and display it on the map.

目标:我想要一个自定义搜索(地理编码)功能,并且能够列出和单击每个结果并将其显示在地图上。

Wanted: Adjust map bounds / zoom level accordingly, i.e. searching for "MA, USA" should zoom the map to let me see the whole Massachusetts state, while searching for "Boston, MA, USA" should zoom on the Boston area. When listing multiple results, the same should apply when clicking on a result.

想要:相应地调整地图边界/缩放级别,即搜索“MA,USA”应该放大地图,让我看到整个马萨诸塞州,而搜索“Boston,MA,USA”应该放大波士顿地区。列出多个结果时,单击结果时也应如此。

Issue: I can use the geometry.bounds object with fitBounds - but - some results you get using the geocoder do not have that geometry.bounds object.

问题:我可以使用带有 fitBounds 的 geometry.bounds 对象 - 但是 - 您使用地理编码器获得的某些结果没有该 geometry.bounds 对象。

A quick example: searching for "Boston" returns

一个简单的例子:搜索“波士顿”返回

Boston, MA, USA
Boston, IN, USA
Boston, KY, USA
Boston, GA 31626, USA
Boston, Salem, VA 22713, USA
Boston, NY 14025, USA

美国马萨诸塞州
波士顿美国印第安纳州
波士顿 美国
波士顿 GA 31626 美国
波士顿塞勒姆 VA 22713 美国
波士顿 NY 14025

Both "Boston, KY" and "Boston NY 14025" do not have bounds.

“Boston, KY”和“Boston NY 14025”都没有界限。

Question: Is there a reliable way to display any geocoder result on a map at the appropriate zoom level?

问题:是否有可靠的方法以适当的缩放级别在地图上显示任何地理编码器结果?

Right now I am using something like that but I find this ugly and it doesn't solve the zoom issue

现在我正在使用类似的东西,但我发现这很难看,它不能解决缩放问题

if (results[0].geometry.bounds) {

    map.fitBounds(results[0].geometry.bounds);

} else {

    map.setCenter(results[0].geometry.location);
    // eventually set zoom here to some middle-range value (ugly)
}

回答by MrUpsidown

Right. After trying both methods and testing, it comes out that:

对。在尝试了两种方法和测试后,结果是:

  1. the geometry.boundsobject is "optionnaly returned" as the doc says
  2. we don't exactly know what the geometry.boundsobject is based on
  3. geometry.bounds"may not match the recommended viewport" and often doesn't
  4. geometry.boundsreturns a square or rectangle of any size and shape while the viewport functions always return a rectangle with the same aspect ratio (around 1.43), whatever your map container dimensions are, as far as I tested.
  1. geometry.bounds正如文档所说,对象是“可选地返回”
  2. 我们不完全知道geometry.bounds对象是基于什么
  3. geometry.bounds“可能与推荐的视口不匹配”并且通常不匹配
  4. geometry.bounds返回一个任何大小和形状的正方形或矩形,而视口函数总是返回一个具有相同纵横比(大约 1.43)的矩形,无论您的地图容器尺寸是什么,就我测试而言。

Below is the example of San Francisco, CA, mentioned in the doc.
In red using geometry.boundsand in blue using the viewport functions.

以下是文档中提到的加利福尼亚州旧金山的示例。
红色使用geometry.bounds,蓝色使用视口功能。

San Francisco, CA

加利福尼亚州旧金山

The solution is simple enough and is reliable.

该解决方案足够简单且可靠。

var resultBounds = new google.maps.LatLngBounds(

    results[0].geometry.viewport.getSouthWest(), 
    results[0].geometry.viewport.getNorthEast()
);

map.fitBounds(resultBounds);

回答by Allan Wintersieck

The viewport object has the information you need to make a bounds object. Something like this:

视口对象具有制作边界对象所需的信息。像这样的东西:

var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(results[0].geometry.viewport.southwest.lat, results[0].geometry.viewport.southwest.lng),
    new google.maps.LatLng(results[0].geometry.viewport.northeast.lat, results[0].geometry.viewport.northeast.lng)
);

Then you can use fitBounds on that new bounds object, just like you're doing for the returned bounds object. Like this:

然后你可以在新的 bounds 对象上使用 fitBounds,就像你对返回的 bounds 对象所做的一样。像这样:

map.fitBounds(bounds);