Javascript Google Maps多段线：标记包含单击的板条的两个多段线坐标_Javascript_Html_Google Maps_Map_Google Maps Api 3

Javascript Google Maps多段线：标记包含单击的板条的两个多段线坐标

javascript html google-maps map google-maps-api-3

Javascript Google Maps多段线：标记包含单击的板条的两个多段线坐标,javascript,html,google-maps,map,google-maps-api-3,Javascript,Html,Google Maps,Map,Google Maps Api 3,我在谷歌地图的折线中遇到了一个问题我有一条从一个点到另一个点的多段线。单击多段线时，需要两端的纬度和逻辑度有人能帮我吗 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta http-equiv="content-type" content="text/html; chars

我在谷歌地图的折线中遇到了一个问题

我有一条从一个点到另一个点的多段线。单击多段线时，需要两端的纬度和逻辑度

有人能帮我吗

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


谷歌地图JavaScript API v3示例：地理编码简单
函数初始化（）
{   
var mylatng=new google.maps.LatLng（0，-180）；
var myOptions={zoom:2，center:mylatng，mapTypeId:google.maps.mapTypeId.TERRAIN}；
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var flightPlanCoordinates=[new google.maps.LatLng（17.77232378.214897），
新的google.maps.LatLng（28.46758,78.027892），
新的google.maps.LatLng（29.46758,88.027892），
新的google.maps.LatLng（20.4675897.027892），
新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（）
{        
//附加的点击事件现在做你的逻辑在这里
this.getPath（）.forEach（函数（el，索引）
{          
//infowindow.setContent（'Point'+index+'：纬度='+el.lat（）+'|经度='+el.lng（））；
警报（'Point'+index+'：纬度='+el.lat（）+'|经度='+el.lng（））；
});
});
flightPath.setMap（map）；
}

更新：单击多段线，起点和终点将在其顶部有标记

这里有一种方法。基本上，使用谷歌地图的点击事件属性LatLng，我们可以得到鼠标点击位置相对于地图的Lat和Lng。将该板条与多段线中的点一起使用，我们可以确定目标点线是否位于具有多段线中两个点的直线上。此外，我们必须使用地理距离公式来计算多段线中的两个相邻点和目标点是否在同一条线上。如果通过将点a和目标的和减去点a和点b的和，则距离差应最接近于零。因此，我们可以使用，得到三个点之间的距离

更新#2:

Q1：上面的if语句基本上扩展了数字本机函数，包括将数字度数转换为弧度的

toRad

函数。这用于计算两个地理点之间的地理距离差

问题2：函数

distance-between

使用“哈弗森”公式计算大圆距离在这两点之间——即地球上空最短距离表面–给出一个 “乌鸦飞”的距离点（忽略任何山！）

if（typeof（Number.prototype.toRad）=“未定义”）{
Number.prototype.toRad=函数（）{
返回这个*Math.PI/180；
}
}
var markerDist；
var startPointMarker=new google.maps.Marker（）；
var endPointMarker=new google.maps.Marker（）；
var映射；
功能距离（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；
返回浮动（d）；
}
函数初始化（）{
var mylatng=new google.maps.LatLng（0，-180）；
变量myOptions={
缩放：2，
中心：myLatLng，
mapTypeId:google.maps.mapTypeId.TERRAIN
};
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var flightPlanCoordinates=[new google.maps.LatLng（-27.46758153.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({
路径：FlightPlan坐标，
strokeColor:#FF0000“，
笔划不透明度：1.0，
冲程重量：2
});
google.maps.event.addListener（flightPath，'click'，函数（el）{
MarkerList={p1:''，p2:''，d:-1}；
startPointMarker.setMap（空）；
endPointMarker.setMap（null）；
var curLat=el.latLng.lat（）；
var curLng=el.latLng.lng（）；
var allPoints=this.getPath（）.getArray（）；
对于（变量i=0；iparseFloat（Math.abs（ab+bc-ac）））{
markerDist.p1=所有点[i]；
markerDist.p2=所有点[i+1]；
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;