无法检查点是否在多段线上 Islocationonedge功能不起作用

问题描述

我有一条路线,并且该路线上有一个点。但是,当我使用islocationonedge函数进行检查时,它不起作用。我已经调整了公差级别,但是并不能解决问题。我知道这是路线上的问题,但是为什么islocationonedge函数无法确认这一点?我在这里做什么错了?

 var addresses = [
  [
    [43.674687,-79.430955],[43.668560,-79.394924]
  ],[
    [43.674934,-79.426182],[43.675452,-79.423602]
  ],[
    [43.640381,-79.394508],[43.640575,-79.394586]
  ]
];


 var directionsRenderer = new google.maps.DirectionsRenderer();
 var directionsService = new google.maps.DirectionsService();
    var map = new google.maps.Map(document.getElementById("map"),{
      zoom: 7,center: {
        lat: 41.85,lng: -87.65
      }
    });
    
    directionsRenderer.setMap(map);
    
    var start = new google.maps.LatLng(43.674687,-79.430955); 
    var end = new google.maps.LatLng(43.668560,-79.394924); 

    directionsService.route(
      {
        origin: start,destination: end,travelMode: "DRIVING"
      },function(response,status) {
        if (status === "OK") {
      directionsRenderer.setDirections(response);
      var paths = response.routes[0].overview_path;
          var polyline = new google.maps.Polyline({
          path: paths
          });

         if (google.maps.geometry.poly.isLocationOnEdge(new google.maps.LatLng(addresses[1][1]),polyline,1e-3)) {
    alert("Working");
  } else {
      alert("not working");
  }
                    
        } else {
          window.alert("Directions request failed due to " + status);
        }
 
      }
       
    );
  

解决方法

每个the documentation的isL​​ocationOnEdge函数带有2或3个参数:

isLocationOnEdge(point,poly [,tolerance])
参数:
要点: LatLng
多边形:多边形|折线
公差:数字可选
返回值:布尔值
计算给定点是在指定公差范围内是位于折线上还是折线附近或多边形的边缘上。当提供的点的经纬度与边缘上最近的点之间的纬度和经度之差小于公差时,返回true。公差默认为10-9度。

point参数必须为google.maps.LatLng

addresses[1][1]是一个数字数组。 google.maps.LatLng构造函数采用两个数字,而不是两个数字的数组。来自the documentation

构造函数LatLng
LatLng(lat,lng [,noWrap])
参数:
lat:
lng 号:
noWrap:布尔值可选
创建表示一个地理点的LatLng对象。在[-90,90]范围内以度为单位指定纬度。经度以度为单位指定,范围为[-180,180]。将noWrap设置为true以启用该范围之外的值。请注意纬度和经度的顺序。

proof of concept fiddle

screenshot of map

代码段:

"use strict";

function initMap() {
  var addresses = [
    [
      [43.674687,-79.430955],[43.668560,-79.394924]
    ],[
      [43.674934,-79.426182],[43.675452,-79.423602]
    ],[
      [43.640381,-79.394508],[43.640575,-79.394586]
    ]
  ];


  var directionsRenderer = new google.maps.DirectionsRenderer();
  var directionsService = new google.maps.DirectionsService();
  var map = new google.maps.Map(document.getElementById("map"),{
    zoom: 7,center: {
      lat: 41.85,lng: -87.65
    }
  });

  directionsRenderer.setMap(map);

  var start = new google.maps.LatLng(43.674687,-79.430955);
  var end = new google.maps.LatLng(43.668560,-79.394924);

  directionsService.route({
      origin: start,destination: end,travelMode: "DRIVING"
    },function(response,status) {
      if (status === "OK") {
        directionsRenderer.setDirections(response);
        var paths = response.routes[0].overview_path;
        var polyline = new google.maps.Polyline({
          path: paths,map: map
        });
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(addresses[1][1][0],addresses[1][1][1]),map: map,title: "1",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)
          }
        })
        if (google.maps.geometry.poly.isLocationOnEdge(new google.maps.LatLng(addresses[1][1][0],polyline,1e-3)) {
          document.getElementById('status').innerHTML = "Working";
        } else {
          document.getElementById('status').innerHTML = "not working";
        }

      } else {
        window.alert("Directions request failed due to " + status);
      }

    }

  );
}
/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 90%;
}


/* Optional: Makes the sample page fill the window. */

html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!DOCTYPE html>
<html>

<head>
  <title>Directions Service</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="status"></div>
  <div id="map"></div>
</body>

</html>

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...