Кластерировать файлы kml с помощью geoxml3

Я использую geoxml3 для анализа моего файла kml. это работает до сих пор.

сейчас я пытаюсь кластеризовать эти файлы, чтобы карта не была заполнена маркерами при низких уровнях масштабирования

мой файл kml выглядит примерно так (конечно, больше маркеров (до 200))

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<Placemark id="1">
    <name>test1</name>
    <Point>
        <coordinates>10.5267012, 49.6812452</coordinates>
    </Point>
</Placemark>
    <Placemark id="2">
    <name>test2</name>
    <Point>
        <coordinates>30.5267012, 24.6812452</coordinates>
    </Point>
</Placemark>
</Document>
</kml>

вот мой код в моем index.php

<?php ?>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>test123</title>
    <link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="lib/geoxml3.js"></script>
    <script>
        function clickMarker(i) {
            google.maps.event.trigger(markers[i], "click");
        }

        function initialize() {
            var center = new google.maps.LatLng(28.019440, -17.382813); //set map center
            var mapOptions = {
                zoom: 3, //set default zoom level
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP //set default map type(ROADMAP,SATELLITE,HYBRID,TERRAIN)
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //***ORIGINAL***
            var mcOptions = {gridSize: 50, maxZoom: 15};

            markers = [];
            markerclusterer = new MarkerClusterer(map, [], mcOptions);
            var infoWindow = new google.maps.InfoWindow({maxWidth: 800});

            var myParser = new geoXML3.parser({//*** ORIGINAL: only {map: map});
                map: map, singleInfoWindow: true,
                createMarker: function(placemark) {
                    //Constructing marker for each Placemark node, and then add it to the markclustere
                    var point = new google.maps.LatLng(placemark.point.lat, placemark.point.lng);
                    var marker = new google.maps.Marker({position: point});
                    markerclusterer.addMarker(marker);

                    google.maps.event.addListener(marker, "click", function() {
                        var marker_lat = marker.getPosition().lat();
                        var marker_lng = marker.getPosition().lng();
                        infoWindow.close();
                        infoWindow.setOptions({maxWidth: 800});
                        content = "<strong>" + placemark.name + "</strong><br>" + placemark.description;
                        infoWindow.setContent(content);
                        infoWindow.open(map, marker);
                    });
                    markerclusterer.addMarker(marker);
                }
            });

            myParser.parse('./kml/point-load.kml');
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>


<body>
    <div id="map-canvas"></div>
</body>
</html>

поэтому мой вопрос: почему маркеры не кластеризованы и не отображаются даже без кластеров???

Источник

1 ответ

Решение

Я получаю эту ошибку с вашим кодом:

Uncaught ReferenceError: MarkerClusterer is not defined

Потому что вы не включили внешнюю библиотеку MarkerClusterer, которая определяет это.

рабочий пример из вашего кода (но не из вашего KML, поскольку этого не было)

Источник
Другие вопросы по тегам