-1
我希望你們都做得很好。路線在Google地圖中穿越多邊形時顯示提醒，多邊形附近沒有標記
我從數據庫中存儲的信息dinamically創建多邊形，我希望在我的路線通過創建多邊形通行證要顯示一個警告：
在谷歌地圖創建路線時，我有一個小問題。
問題是沒有標記生成在多邊形內，因此沒有警報顯示，所以我想知道是否有對此的解決方法。
這是我使用的代碼：
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&v=3.exp&signed_in=true"></script>
<script>
var posiciones;
var rendererOptions = {
draggable: true
};
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var directionsService = new google.maps.DirectionsService();
var map;
var polys = new Array();
var resultado;
var routCoordinates;
var respuesta;
var myPolygons = [
<asp:Repeater ID='rptMarkers' runat='server'>
<ItemTemplate>
{
"name": '<%# Eval("carajo") %>',
"coordinates": [
'<%# Eval("poligono1") %>',
'<%# Eval("poligono2") %>',
'<%# Eval("poligono3") %>',
'<%# Eval("poligono4") %>'
]
}
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
];
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();
}
}
var trucka = new google.maps.LatLng(21.984797, -102.27668);
function initialize() {
var mapOptions = {
zoom: 12,
center: trucka
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
//directionsDisplay.setPanel(document.getElementById('directionsPanel'));
directionsDisplay.setPanel(document.getElementById('hola'));
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
computeTotalDistance(directionsDisplay.getDirections());
});
calcRoute();
}
function fncRouteZoneIntersection(response) {
//var myRoute = response.routes[0].legs[1];
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++) {
var marker = new google.maps.Marker({
map: map,
// position: myRoute.steps[i].start_point
position: myRoute[i]
});
// lngLatCordinates.push(myRoute.steps[i].start_point);
lngLatCordinates.push(myRoute[i]);
}
return lngLatCordinates;
}
function calcRoute() {
sendPolygonForDrawing();
var lat = document.getElementById('hdnLatitudOrigen').value;
var lon = document.getElementById('hdnLongitudOrigen').value;
var request = {
origin: new google.maps.LatLng(lat, lon),
destination: new google.maps.LatLng(document.getElementById('hdnLatitudDestino').value, document.getElementById('hdnLongitudDestino').value),
waypoints: [
{ location: new google.maps.LatLng(document.getElementById('hdnLatitudParada1').value, document.getElementById('hdnLongitudParada1').value) }
/*{ location: new google.maps.LatLng(document.getElementById('hdnLatitudParada2').value, document.getElementById('hdnLongitudParada2').value) },
{ location: new google.maps.LatLng(document.getElementById('hdnLatitudParada3').value, document.getElementById('hdnLongitudParada3').value) },
{ location: new google.maps.LatLng(document.getElementById('hdnLatitudParada4').value, document.getElementById('hdnLongitudParada4').value) },
{ location: new google.maps.LatLng(document.getElementById('hdnLatitudParada5').value, document.getElementById('hdnLongitudParada5').value) }*/
],
travelMode: google.maps.TravelMode.DRIVING,
provideRouteAlternatives: true,
avoidHighways: false,
avoidTolls: false
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
respuesta = 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){
if (google.maps.geometry.poly.containsLocation(routCoordinates[j], polys[i]) == true) {
//alert('CARAJO!');
alert(polys[i].polyTitle);
exist.push(polys[i].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*/
}
}
}
google.maps.event.addListener(directionsDisplay, 'directions_changed', updateInfo);
updateInfo();
}
});
}
function calcularPaso(){
var tolo = fncRouteZoneIntersection(respuesta);
var existe = new Array();
for (var i = 0; i < polys.length; i++) {
for (var j = 0; j < tolo.length; j++) {
if (google.maps.geometry.poly.containsLocation(tolo[j], polys[i]) == true) {
//alert('simon');
}
}
}
}
function updateInfo() {
//alert('carajo')
posiciones = '';
var route = directionsDisplay.getDirections().routes[0];
// var routes = response.routes;
var points = route.overview_path;
var ul = document.getElementById("vertex");
var elems = ul.getElementsByTagName("li")
for (var i = 0; i < elems.length; i++) {
elems[i].parentNode.removeChild(elems[i]);
}
for (var i = 0; i < points.length; i++) {
var li = document.createElement('li');
li.innerHTML = getLiText(points[i]);
ul.appendChild(li);
posiciones = posiciones + getLiText(points[i]);
}
document.getElementById("txtResultado").value = posiciones;
//document.getElementById("hdnResultado").value = posiciones;
calcularPaso();
}
function getLiText(point) {
var lat = point.lat(),
lng = point.lng();
return "2 " + lng + "," + lat;
return lat + ",2 " + lng + ",";
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total/1000.0;
document.getElementById('total').innerHTML = total + ' km';
}
google.maps.event.addDomListener(window, 'load', initialize);
<div id="map-canvas" style="width: 100%; height: 400px"></div>
<div id="hola">
<label>Puntos</label>
<ul id="vertex" runat="server"></ul>
</div>
<div id="directionsPanel" style="width: 30%; height: 600px;">
<p>
Total Distance: <span id="total"></span>
</p>
</div>
在我發送圖像，你可以看到黃顏色的多邊形。
希望你能幫上忙。
謝謝！ 
非常感謝您的信息。 – FedePrado 2015-03-13 23:46:54