谷歌地圖折線：標記包含點擊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的兩個折線座標

回答

相關問題