问题描述
我有一条路线,并且该路线上有一个点。但是,当我使用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的isLocationOnEdge函数带有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以启用该范围之外的值。请注意纬度和经度的顺序。
代码段:
"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>