Google Maps JS Api - b.get 不是函数错误（isLocationOnEdge）

Question

我想检查我的路线上是否有标记。所以我尝试使用 isLocationOnEdge() 并且我收到“TypeError:b.get is not a function”错误。 这是我的代码，我尝试了几次更改，但无法解决问题。

      var directionsDisplay = new google.maps.DirectionsRenderer;
      var directionsService = new google.maps.DirectionsService;

      directionsDisplay.setMap(map);

      calculateAndDisplayRoute(directionsService, directionsDisplay);

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
      directionsService.route({
      origin: my_position.getPosition(),
      destination: new google.maps.LatLng(my_markers[0][0],my_markers[0][1]),
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
      var isLocationOnEdge = google.maps.geometry.poly.isLocationOnEdge;
      var path = response.routes[0].overview_path;
      for (var i = 0; i < my_markers.length; i++) {
      if (isLocationOnEdge(new google.maps.LatLng(my_markers[i][0],my_markers[i][1]),path))
          {
              console.log("Its in!")
          }
        }


    });

Answer 1

根据the documentation，isLocationOnEdge 方法采用以下参数：

isLocationOnEdge(point:LatLng, poly:Polygon|Polyline, tolerance?:number)
返回值：布尔值
计算给定点是否位于或靠近折线或多边形的边缘，在指定的容差范围内。当提供的点的纬度和经度与边缘上最近的点之间的差小于容差时，返回 true。公差默认为 10-9 度。

overview_path 不是google.maps.Polyline（或多边形），它是google.maps.LatLng 对象的数组。

如果我使用该路径创建折线，它对我有用

var isLocationOnEdge = google.maps.geometry.poly.isLocationOnEdge;
var path = response.routes[0].overview_path;
var polyline = new google.maps.Polyline({
  path: path
})
if (isLocationOnEdge(new google.maps.LatLng(37.438442, -122.157558), polyline, 1e-3)) {
  console.log("Its in!")
}

proof of concept fiddle

代码 sn-p：

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [{
        featureType: 'poi',
        stylers: [{
          visibility: 'off'
        }]
      }]
    });

  var directionsDisplay = new google.maps.DirectionsRenderer;
  var directionsService = new google.maps.DirectionsService;

  directionsDisplay.setMap(map);

  calculateAndDisplayRoute(directionsService, directionsDisplay);

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    directionsService.route({
      origin: "Palo Alto, CA",
      destination: "Stanford, CA",
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
      var isLocationOnEdge = google.maps.geometry.poly.isLocationOnEdge;
      var path = response.routes[0].overview_path;
      var polyline = new google.maps.Polyline({
        path: path
      })
      if (isLocationOnEdge(new google.maps.LatLng(37.438442, -122.157558), polyline, 1e-3)) {
        console.log("Its in!")
        var mark = new google.maps.Marker({
          map: map,
          position: new google.maps.LatLng(37.438442, -122.157558),
          icon: {
            url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
            size: new google.maps.Size(7, 7),
            anchor: new google.maps.Point(3.5, 3.5)
          },
          title: "On Route"
        });
        var infowindow = new google.maps.InfoWindow({
          content: "on route"
        });
        infowindow.open(map, mark);
      }
    });
  }
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

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