我有一张地图，显示3个多边形和一条穿过它们的路线。每个多边形都有一个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>
听起来像我的代码从行开始：var routCoordinates = fncRouteZoneIntersection(response); ............只检查路线的起点，航路点和路线的末端而不是所有的路线这就是我在检查时得到一个空数组的原因。
任何人都可以帮助我吗？
答案 0 :(得分：0)
您必须使用overview_path而不是路线支路。请参阅docs overview_path包含一个LatLng数组，表示生成方向的近似（平滑）路径。
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);
使用标记查看example at jsbin。多边形标题列表将写入console.log。