无法检查点是否在折线上。 Islocationonedge 函数不起作用
Cannot check if point is on polyline. Islocationonedge function does not work
我有一条路线和路线上的一个点。但是,当我使用 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);
}
}
);
isLocationOnEdge 函数需要 2 或 3 个参数,根据 the documentation:
isLocationOnEdge(point, poly[, tolerance])
Parameters:
point: LatLng
poly: Polygon|Polyline
tolerance: number optional
Return Value: boolean
Computes whether the given point lies on or near to a polyline, or the edge of a polygon, within a specified tolerance. Returns true when the difference between the latitude and longitude of the supplied point, and the closest point on the edge, is less than the tolerance. The tolerance defaults to 10-9 degrees.
point
参数必须是 google.maps.LatLng
addresses[1][1]
是一个数字数组。 google.maps.LatLng
构造函数接受两个数字,而不是两个数字的数组。来自 the documentation:
Constructor LatLng
LatLng(lat, lng[, noWrap])
Parameters:
lat: number
lng: number
noWrap: boolean optional
Creates a LatLng object representing a geographic point. Latitude is specified in degrees within the range [-90, 90]. Longitude is specified in degrees within the range [-180, 180]. Set noWrap to true to enable values outside of this range. Note the ordering of latitude and longitude.
代码片段:
"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], addresses[1][1][1]), 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>
我有一条路线和路线上的一个点。但是,当我使用 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);
}
}
);
isLocationOnEdge 函数需要 2 或 3 个参数,根据 the documentation:
isLocationOnEdge(point, poly[, tolerance])
Parameters:
point: LatLng
poly: Polygon|Polyline
tolerance: number optional
Return Value: boolean
Computes whether the given point lies on or near to a polyline, or the edge of a polygon, within a specified tolerance. Returns true when the difference between the latitude and longitude of the supplied point, and the closest point on the edge, is less than the tolerance. The tolerance defaults to 10-9 degrees.
point
参数必须是 google.maps.LatLng
addresses[1][1]
是一个数字数组。 google.maps.LatLng
构造函数接受两个数字,而不是两个数字的数组。来自 the documentation:
Constructor LatLng
LatLng(lat, lng[, noWrap])
Parameters:
lat: number
lng: number
noWrap: boolean optional
Creates a LatLng object representing a geographic point. Latitude is specified in degrees within the range [-90, 90]. Longitude is specified in degrees within the range [-180, 180]. Set noWrap to true to enable values outside of this range. Note the ordering of latitude and longitude.
代码片段:
"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], addresses[1][1][1]), 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>