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

我从一点到另一点有一条折线。当我点击折线时，我需要两端的纬度和纬度。

请任何人都可以帮我吗？

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

来源

2011-03-28 Pradeep Neo

普拉迪普，你问了许多新的问题kjy112。他正在回答他们所有的问题，而你只是不给他答应给予的赞赏。如果您有更多问题，请提出一个新的单独问题。 – 2011-04-06 13:34:44

@Wouter：实际上我不知道如何投票，因为我新到了stackoverflow .....现在我知道了，我已经投了答案..... – 2011-04-07 04:17:12

Pradeep Neo，请接受您的接受率。您可以通过点击正反向投票屏幕下方每个答案左侧的复选框来接受答案。

更新：点击折线，开始点和结束点将在其上有标记。

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

更新＃2：

Q1：if语句上述基本扩展了编号本地函数来包括toRad函数数值度转换为弧度。这用于计算两个地理点之间的地理距离差异。

Q2：该功能distanceBetween

使用“半正矢”公式计算大圆距离的两个点之间 - 也就是说，在地球的表面最短距离 - 给一个 '之间的'乌鸦'之间的距离点（忽略任何山！）。

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;

来源

2011-03-29 13:05:28 kjy112

嗨kjy112感谢您的回应....我有接受的答案........ – 2011-03-30 05:26:16

感谢kjy112你的答案....... – 2011-03-30 05:28:50

嘿kjy112以前你只显示了一条折线，但我需要的是当我有更多的折线时，我只需要那个纬度和经度我只点击那条折线的两端 – 2011-03-30 05:44:20

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

回答

相关问题