google-maps - 调整 google.maps.Circle 半径更准确

Question

我有两个 points由 (lat, lng) 表示和 circle代表center = point(lat, lng)和 radius .

[2] pry(main)> points
=> [#<struct Geography::Point x=8.6836, y=56.7619>, #<struct Geography::Point x=8.7501, y=56.8298>]
[3] pry(main)> circle
=> #<struct Geography::Circle center=#<struct Geography::Point x=8.71685, y=56.79585>, radius=5253.053885917054>

我有一种使用Haversine公式计算距离的方法，所以如果我从圆心到两个点进行计算，我会得到:

[4] pry(main)> Geography::Utils.distance_between(circle.center, points.first)
=> 5253.053885917054
[5] pry(main)> Geography::Utils.distance_between(circle.center, points.second)
=> 5252.8180384905045

请注意，第一个点到圆心的距离是圆的实际半径。所有距离都以米为单位。我的意思是一个点在弧上，那个点应该非常接近。

预期结果:

如果我在谷歌地图中表示，圆弧将通过一个点并 super 接近第二个点。

实际结果:





问题

谷歌地图投影在我的情况下如何工作，我怎样才能获得满足现实的输出？

map 代码:

:coffeescript
  window.createPostcodeMarker = (postcode) ->
    marker = new google.maps.Marker
      draggable: false
      raiseOnDrag: false
      position: postcode.position
      map: map
      tooltip: postcode.name
      icon:
        path: google.maps.SymbolPath.CIRCLE
        fillOpacity: 1
        strokeOpacity: 1
        strokeColor: postcode.stroke_color
        strokeWeight: 1
        scale: 3
        fillColor: postcode.stroke_color

    circle = new google.maps.Circle
      map: map
      radius: postcode.radius
      fillColor: postcode.fill_color
      strokeColor: postcode.stroke_color
      strokeWeight: 1
      strokeOpacity: 0.8

    circle.bindTo('center', marker, 'position')

    marker

  window.createAreaMarker = (area) ->
    marker = new google.maps.Marker
      draggable: false
      raiseOnDrag: false
      position: area.position
      map: map
      tooltip: area.name
      icon:
        path: google.maps.SymbolPath.CIRCLE
        fillOpacity: 0.3
        strokeOpacity: 0.3
        strokeColor: area.stroke_color
        strokeWeight: 1
        scale: 0
        fillColor: area.stroke_color

    circle = new google.maps.Circle
      map: map
      radius: area.radius
      fillColor: area.fill_color
      strokeColor: area.stroke_color
      strokeWeight: 1
      strokeOpacity: 0.3

    circle.bindTo('center', marker, 'position')

    marker

  window.googleMapsInitializePostcodesMap = ->
    if PageData?.postcodesData?
      window.bounds = new google.maps.LatLngBounds()
      window.markers = []
      mapOptions =
        mapTypeId: google.maps.MapTypeId.ROADMAP
        maxZoom: 13

      window.map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions)

      # Create markers & extend bounds
      for postcode in PageData.postcodesData
        marker = createPostcodeMarker(postcode)
        markers.push(marker)
        bounds.extend(marker.position)

      for area in PageData.areasData
        marker = createAreaMarker(area)
        markers.push(marker)

      window.map.fitBounds(bounds)

= json_data_tag(@postcodes_map_data, 'postcodesData')
= json_data_tag(@areas_map_data, 'areasData')

#map-canvas{style: "width: 100%; height: 600px;"}

- content_for :footer_javascripts do
  = google_maps_api_js("googleMapsInitializePostcodesMap")

密码笔:https://codepen.io/radubogdan/pen/gWEvZP

Answer 1

您应该使用 Spherical Geometry library可以通过在加载 API 时附加 &libraries=geometry 作为 Javascript Maps API 的一部分加载 - 例如:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry">

这种方法的优点是它抽象了 Maps API 中默认投影的实现细节。这使您的生活变得轻松，更重要的是，即使默认投影发生变化，也不会中断。

将 lat/lng 坐标传递给浏览器并计算它们之间的距离(以米为单位)，如下所示:

var location1 = new google.maps.LatLng(lat1, lng1);
var location2 = new google.maps.LatLng(lat2, lng2);
var distance = google.maps.geometry.spherical.computeDistanceBetween(location1, location2);

或在 Coffeescript 中:

location1 = new google.maps.LatLng lat1, lng1;
location2 = new google.maps.LatLng lat2, lng2;
distance = google.maps.geometry.spherical.computeDistanceBetween location1, location2;