2014-10-07 2 views
1

Я создал Google Maps полилинииGoogle Maps полилинии 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

+0

Это может повлиять на производительность (особенно перетаскивание/масштабирование) при использовании отдельных строк, но я не вижу лучшего подхода, когда вам нужно получить доступ к определенному сегменту. –

Смежные вопросы