Google Maps Polyline: Mark the two Polyline coordinates that contain the clicked LatLng
I have a problem in polyline of google maps.
I have a polyline from one points to another point. When I click on the polyline, I need the latitude and logitude of the two ends.
Please can anyone help me?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize()
{
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {zoom: 2,center: myLatLng,mapTypeId: google.maps.MapTypeId.TERRAIN};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var flightPlanCoordinates = [ new google.maps.LatLng(17.772323, 78.214897),
new google.maps.LatLng(28.46758, 78.027892),
new google.maps.LatLng(29.46758, 88.027892),
new google.maps.LatLng(20.46758, 97.027892),
new google.maps.LatLng(17.772323, 78.214897)
开发者_如何学运维 ];
var flightPath = new google.maps.Polyline({path: flightPlanCoordinates,strokeColor: "#FF0000",strokeOpacity: 1.,strokeWeight: 10});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(flightPath, 'click', function()
{
//attached click event now do your logic here
this.getPath().forEach(function(el, index)
{
//infowindow.setContent('Point ' + index + ' : Latitude = ' + el.lat() + ' | Longitude = ' + el.lng());
alert('Point ' + index + ' : Latitude = ' + el.lat() + ' | Longitude = ' + el.lng());
});
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width=100%; height:60%"></div>
</body>
</html>
UPDATE: Click on the polyline and starting and end points will have markers on top of them.
Here is one way of doing it JSFiddle Demo. Basically, using google map's click event property LatLng we get the Lat and Lng of the location of the mouse click in relation to the map. Using that LatLng along with the points in the polyline we can determine if the targeted point lines on a straight line with two of the points in the polyline. Furthermore, we'll have to use Geo distance formulate to calculate if two adjacent points in the polyline and the targetted point are on the same line. If they are then by subtracting sum of point a and target and target and point b by the sum of point a and point b the distance difference should be closest to zero. So using this link's Geo distance formula and toRad() function we are able to get the distance between three points.
UPDATE #2:
Q1: The if statement above basically extends the Number native function to include toRad function which converts numeric degrees to radians. This is used to calculate the geo distance difference between two geo points.
Q2: The function distanceBetween
uses the ‘haversine’ formula to calculate great-circle distances between the two points – that is, the shortest distance over the earth’s surface – giving an ‘as-the-crow-flies’ distance between the points (ignoring any hills!).
if (typeof(Number.prototype.toRad) === "undefined") {
Number.prototype.toRad = function() {
return this * Math.PI / 180;
}
}
var markerDist;
var startPointMarker = new google.maps.Marker();
var endPointMarker = new google.maps.Marker();
var map;
function distanceBetween(lat1, lat2, lon1, lon2) {
var R = 6371; // km
var dLat = (lat2 - lat1).toRad();
var dLon = (lon2 - lon1).toRad();
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return parseFloat(d);
}
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 2,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var flightPlanCoordinates = [new google.maps.LatLng(-27.46758, 153.027892), new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(29.46758, 88.027892), new google.maps.LatLng(20.46758, 97.027892), new google.maps.LatLng(17.772323, 78.214897)];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
google.maps.event.addListener(flightPath, 'click', function(el) {
markerDist = {p1:'', p2:'', d:-1};
startPointMarker.setMap(null);
endPointMarker.setMap(null);
var curLat = el.latLng.lat();
var curLng = el.latLng.lng();
var allPoints = this.getPath().getArray();
for (var i = 0; i < allPoints.length - 1; i++) {
var ab = distanceBetween(allPoints[i].lat(), curLat, allPoints[i].lng(), curLng);
var bc = distanceBetween(curLat, allPoints[i + 1].lat(), curLng, allPoints[i + 1].lng());
var ac = distanceBetween(allPoints[i].lat(), allPoints[i + 1].lat(), allPoints[i].lng(), allPoints[i + 1].lng());
console.log(parseFloat(markerDist.d) + ' '+ Math.abs(ab+bc-ac));
if ((parseFloat(markerDist.d) == -1) || parseFloat(markerDist.d) > parseFloat(Math.abs(ab + bc - ac))) {
markerDist.p1 = allPoints[i];
markerDist.p2 = allPoints[i + 1];
markerDist.d = Math.abs(ab + bc - ac);
}
}
startPointMarker.setPosition(markerDist.p1);
endPointMarker.setPosition(markerDist.p2);
startPointMarker.setMap(map);
endPointMarker.setMap(map);
});
flightPath.setMap(map);
}
window.onload = initialize;
加载中,请稍侯......
精彩评论