Google maps 谷歌地图API，确定路线是否经过多边形
我有一张显示3个多边形的地图和一条穿过它们的路线。每个多边形都有一个标题属性。我想在路线经过时显示一个polygone标题 这是我做的代码：Google maps 谷歌地图API，确定路线是否经过多边形,google-maps,Google Maps,我有一张显示3个多边形的地图和一条穿过它们的路线。每个多边形都有一个标题属性。我想在路线经过时显示一个polygone标题 这是我做的代码： <!doctype html><html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <title&
<!doctype html><html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>Loading / Editing Zones</title>
<style>
#map, html, body { padding: 0; margin: 0; height: 100%; } #panel { width: 200px; font-family: Arial, sans-serif; font-size: 13px; float: right; margin: 10px; } #delete-button { margin-top: 5px; } #login_close{ display: none; } .labels { color: red; background-color: white; font-family: "Lucida Grande", "Arial", sans-serif; font-size: 10px; font-weight: bold; text-align: center; width: 65px; border: 2px solid black; white-space: nowrap; } .autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; } .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; } .autocomplete-selected { background: #F0F0F0; } .autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing,geometry" type="text/javascript"></script>
<script type="text/javascript">
var directionsDisplay = new google.maps.DirectionsRenderer(),
directionsService = new google.maps.DirectionsService(),
polys = new Array(),
map = null,
zoom = 10,
myPolygons =
[
{
"name": "zone1",
"coordinates": [
"51.44459,-0.21835",
"51.46256,-0.11261",
"51.43004,0.03708",
"51.40777,-0.09888",
"51.39064,-0.21149",
"51.40692,-0.27191"
]
},
{
"name": "zone2",
"coordinates": [
"51.56683,-0.22934",
"51.54292,-0.13046",
"51.57195,0",
"51.59755,-0.03708",
"51.5984,-0.13733",
"51.59755,-0.19913"
]
},
{
"name": "zone3",
"coordinates": [
"51.66148,-0.13733",
"51.61461,-0.08514",
"51.61887,0.02197",
"51.65381,0.05905",
"51.64359,-0.04807"
]
}
];
function drawPolygon(poly, polyLabel) {
var options = {
paths: poly,
strokeColor: '#AA2143',
strokeOpacity: 1,
strokeWeight: 2,
fillColor: "#FF6600",
fillOpacity: 0.7,
polyTitle: polyLabel
};
newPoly = new google.maps.Polygon(options);
newPoly.setMap(map);
polys.push(newPoly);
}
function sendPolygonForDrawing() {
for(var i =0; i<myPolygons.length; i++){
poly = new Array();
var coord = myPolygons[i].coordinates;
var lng = coord.length;
for(var j=0; j<lng; j++){
var longit_Latid = coord[j].split(',');
poly.push(new google.maps.LatLng(parseFloat(longit_Latid[0]), parseFloat(longit_Latid[1])));
}
drawPolygon(poly, myPolygons[i].name);
poly.pop();
}
}
//Route
function calcRoute() {
var start = "Croydon";
var end = "Cheshunt";
var waypts = [];
var waysArray = ["London"];
for (var i = 0; i < waysArray.length; i++) {
waypts.push({
location:waysArray[i],
stopover:true});
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var routCoordinates = fncRouteZoneIntersection(response);//this function populates the routCoordinates with the JSON data of the route.
var exist = new Array();
for(var i=0; i<polys.length; i++){//polys holds all polygons objects.
for(var j=0; j<routCoordinates.length; j++){
if(google.maps.geometry.poly.containsLocation(new google.maps.LatLng(routCoordinates[j].k, routCoordinates[j].A), polys[i]) == true){
exist .push(polys.polyTitle);
break;
/*this breaks the loop checking when a point is found inside a polygon
and go check the next one, because knowing that one point of the route is
inside a polygon is enough*/
}
}
}
console.log(exist);
alert(exist);
}
});
directionsDisplay.setMap(map);
}
function fncRouteZoneIntersection(response){
var myRoute = response.routes[0].legs[0];
var lngLatCordinates = new Array();
for (var i = 0; i < myRoute.steps.length; i++) {
lngLatCordinates.push(myRoute.steps[i].start_point);
}
return lngLatCordinates;
}
$(function() {
//Basic
var cartodbMapOptions = {
zoom: zoom,
center: new google.maps.LatLng(51.465872, -0.065918),
disableDefaultUI: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Init the map
map = new google.maps.Map(document.getElementById("map"),cartodbMapOptions);
sendPolygonForDrawing();
calcRoute();
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControl: false,
polygonOptions: {
fillColor: '#0099FF',
fillOpacity: 0.7,
strokeColor: '#AA2143',
strokeWeight: 2,
clickable: true,
zIndex: 1,
editable: true
}
});
});
</script>
<div id="map">
</div>
</body>
</html>
用记号笔看。多边形标题列表将写入console.log。您只检查myRoute.steps[i]。起点点，并且它们都不在多边形内。你可以看到，如果你在fncRouteZoneIntersection函数中为每个点创建标记。谢谢你的回答，那么我该如何解决这个问题呢？
function fncRouteZoneIntersection(response) {
console.log('fncRouteZoneIntersection...');
// var myRoute = response.routes[0].legs[0];
var myRoute = response.routes[0].overview_path;
var lngLatCordinates = new Array();
// for (var i = 0; i < myRoute.steps.length; i++) {
for (var i = 0; i < myRoute.length; i++) {
// lngLatCordinates.push(myRoute.steps[i].start_point);
lngLatCordinates.push(myRoute[i]);
}
// console.log(lngLatCordinates);
return lngLatCordinates;
}
exist.push(polys.polyTitle);
exist.push(polys[i].polyTitle);