2010-10-07 2 views
3

Есть ли способ создать «боковую панель» из файла KML при использовании API Карт Google?Доступ к маркерам KML в Картах Google

я загружаю маркеры на карте, используя что-то вроде этого:

var myMarkerLayer = new google.maps.KmlLayer('http://example.com/WestCoast.kml'); 

Это прекрасно работает до сих пор, но как я могу захватить, что данные и петли через точку?

Я хотел бы избежать использования сторонней библиотеки, если это возможно, хотя jQuery в порядке.

ответ

7

KML - это всего лишь XML-документ, поэтому вы можете просто обработать его с помощью jQuery, чтобы извлечь нужные данные. Вы можете хранить координаты и имена плагинов в локальном массиве и использовать эти данные для любой цели, например, например. вы можете использовать его для перехода к точке на карте, когда человек нажимает на имя места на боковой панели.

Ниже приведен пример того, как обрабатывать KML-файл и осуществлять навигацию на основе данных в файле. Одно слово предостережения. Я бы не делал этого с большими файлами KML, поскольку он удваивает время загрузки (браузер имеет для загрузки файла для обработки функций) ...

<script type="text/javascript" src= "http://maps.google.com/maps/api/js?sensor=false"> 
</script> 
<script src="../js/jquery-1.4.2.min.js"> 
</script> 
<script> 
    var map; 
    var nav = []; 
    $(document).ready(function(){ 
     //initialise a map 
     init(); 

     $.get("kml.xml", function(data){ 

      html = ""; 

      //loop through placemarks tags 
      $(data).find("Placemark").each(function(index, value){ 
       //get coordinates and place name 
       coords = $(this).find("coordinates").text(); 
       place = $(this).find("name").text(); 
       //store as JSON 
       c = coords.split(",") 
       nav.push({ 
        "place": place, 
        "lat": c[0], 
        "lng": c[1] 
       }) 
       //output as a navigation 
       html += "<li>" + place + "</li>"; 
      }) 
      //output as a navigation 
      $(".navigation").append(html); 

      //bind clicks on your navigation to scroll to a placemark 

      $(".navigation li").bind("click", function(){ 

       panToPoint = new google.maps.LatLng(nav[$(this).index()].lng, nav[$(this).index()].lat) 

       map.panTo(panToPoint); 
      }) 

     }); 

     function init(){ 


      var latlng = new google.maps.LatLng(-43.552965, 172.47315); 
      var myOptions = { 
       zoom: 10, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById("map"), myOptions); 



     } 


    }) 
</script> 
<html> 
    <body> 
     <div id="map" style="width:600px;height: 600px;"> 
     </div> 
     <ul class="navigation"> 
     </ul> 
    </body> 
</html> 
+0

Этот метод потребует, чтобы файл kml существовал в том же домене, что и карта, из-за ограничений междоменной безопасности. Принимая во внимание, что использование собственных карт Google KmlLayer позволит загружать внешние kmls. – Sean

+0

Обратите внимание, что этот метод просто устраняет недостатки собственного KMLLayer, который не дает вам каких-либо параметров для получения дополнительных данных из KML, это не замена для этого, просто метод обработки XML-документа. – Michal

+0

Здравствуйте, Я знаю, что этот вопрос старый, но после использования этого способа для переноса данных из файла kml, я замечаю, что это дает мне ошибку. nav не определен; Так что вам нужно добавить var nav = []; перед использованием навигационной переменной. – JonnyDevv

5

Это невозможно. Проверьте документы: http://code.google.com/apis/maps/documentation/javascript/overlays.html#KMLLayers

В разделе "KML Feature Data":

Поскольку KML может включать в себя большое количество функций, вы не можете получить доступ к данным полнометражных от объекта KmlLayer непосредственно. Вместо этого, поскольку функции отображаются, они визуализируются, чтобы выглядеть как интерактивные наложения API Карт.

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