Google Maps Polyline: отметьте две координаты полилинии, которые содержат нажатой LatLng - PullRequest
Новая
       8

Google Maps Polyline: отметьте две координаты полилинии, которые содержат нажатой LatLng

1 голос
/ 28 марта 2011

У меня проблема с ломаной линией карт Google.

У меня есть ломаная линия от одной точки к другой.Когда я нажимаю на полилинию, мне нужны широта и логитность двух концов.

Пожалуйста, кто-нибудь может мне помочь? 

    <!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>

1 Ответ

4 голосов
/ 29 марта 2011

ОБНОВЛЕНИЕ: Нажмите на ломаную линию, и у начальной и конечной точек будут маркеры сверху.

Вот один из способов сделать это JSFiddle Demo .В основном, используя свойство события щелчка на карте Google LatLng, мы получаем Lat и Lng местоположения щелчка мыши по отношению к карте.Используя этот LatLng вместе с точками на полилинии, мы можем определить, находятся ли целевые точки на прямой линии с двумя точками на полилинии.Кроме того, нам нужно использовать формулу Geo Distance, чтобы рассчитать, находятся ли две соседние точки на ломаной линии и намеченная точка на одной линии.Если они затем вычитаются из суммы точек a и цели, цели и точки b из суммы точек a и точки b, разница расстояний должна быть ближайшей к нулю.Таким образом, используя формулу расстояния Geo этой ссылки и функцию toRad () , мы можем получить расстояние между тремя точками.

UPDATE # 2:

Q1: оператор if, приведенный выше, в основном расширяет встроенную функцию Number для включения функции toRad, которая преобразует числовые градусы в радианы.Это используется для расчета разницы географических расстояний между двумя географическими точками.

Q2: функция distanceBetween

использует формулу «haversine» для вычисления расстояний большого круга междудве точки, то есть кратчайшее расстояние над поверхностью земли, определяющее расстояние между точками «как мухи» (без учета холмов!). 

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;
...