Доступ к маркерам KML на Google Картах - PullRequest
Новая
       8

Доступ к маркерам KML на Google Картах

3 голосов
/ 07 октября 2010

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

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

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

Пока это прекрасно работает, но как я могу получить эти данные и пройтись по точкам?

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

Ответы [ 2 ]

7 голосов
/ 12 октября 2010

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

Ниже приведен пример того, как обрабатывать файл 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>
5 голосов
/ 08 октября 2010

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

В разделе «Данные о функциях KML»:

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

...