2014-10-07 33 views
1

我創建了一個谷歌地圖折線谷歌地圖折線的onclick檢測行號

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: "rgba(255,0,0, .5)", 
     strokeOpacity: 1.0, 
     strokeWeight: 4 
    }); 

和我創建了顯示與信息的框的事件(點擊例如)。示例代碼:

google.maps.event.addListener(flightPath, 'click', function(el) { 
     var curLat = el.latLng.lat(); 
     var curLng = el.latLng.lng(); 
     var myLatlng = new google.maps.LatLng(curLat,curLng); 
     infowindow.content = "<div style= ' width: 200px'>STRING HERE<div>"; 
     infowindow.setPosition(myLatlng); 
     infowindow.open(map); 
    }); 

我已經定義了infowindow全球範圍內,所以我可以重新定位它。

現在的問題是,無論我點擊它總是顯示相同的信息。基本上我想要做的是得到點擊行號(從0,1開始),我可以用它來獲取適當的數據。

回答

2

此信息不可通過API獲得。

這將有可能使用geometryy庫(isLocationOnEdge)和遍歷單一線路,以檢測其中一線點擊的發生,但我覺得它更容易使用單折線各段:

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) 
    ],i=0,infowindow=new google.maps.InfoWindow; 


    while(flightPlanCoordinates.length>1){ 
    (function(i){ 
     var segment= new google.maps.Polyline({ 
     path: [flightPlanCoordinates.shift(),flightPlanCoordinates[0]], 
     strokeColor: "rgba(255,0,0, .5)", 
     strokeOpacity: 1.0, 
     strokeWeight: 4, 
     map:map 
     }); 
     google.maps.event.addListener(segment, 'click', function(e){ 
     infowindow.setOptions({map:map,position:e.latLng,content:'Line#'+i}); 
     }); 
    })(i++) 
    } 
+0

很好的答案,謝謝。你建議使用單行而不是多段線構建(在我的情況下,我可能需要多達1000行,每個顯示地圖)? – Enve 2014-10-10 07:27:15

+0

當您使用單線時,它可能會影響性能(尤其是拖動/縮放),但在您需要訪問特定片段時看不到更好的方法。 – 2014-10-10 22:38:48