Question

我在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>

Answer 1

更新： 点击折线，起点和终点上会有标记。

这是一种做法JSFiddle Demo。基本上，使用谷歌地图的点击事件属性LatLng，我们得到鼠标点击相对于地图的位置的Lat和Lng。使用该LatLng以及折线中的点，我们可以确定直线上的目标点线是否与折线中的两个点相对应。此外，我们将不得不使用地理距离公式来计算折线和目标点中的两个相邻点是否在同一条线上。如果它们通过减去点a和目标和目标的总和并且将点b减去点a和点b的总和，则距离差应该最接近零。因此，使用this link's Geo distance formula and toRad() function，我们可以获得三点之间的距离。

更新＃2：

Q1：上面的if语句基本上将Number native函数扩展为包含toRad函数，该函数将数字度转换为弧度。这用于计算两个地理点之间的地理距离差异。

Q2：函数distanceBetween

使用'hasrsine'公式计算大圆距离两点之间 - 也就是说地球上最短的距离表面 - 给出一个 'as-the-the-flies'之间的距离点（忽略任何山丘！）。</ p>

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;

Google地图折线：标记包含所点击的LatLng的两个折线坐标

1 个答案: