2

我正在使用 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>

所以我的问题：为什么即使没有集群，标记也不会聚集并且不显示？？？

4

1 回答 1

2

我的代码出现此错误：

Uncaught ReferenceError: MarkerClusterer is not defined

因为您没有包含定义它的 MarkerClusterer 外部库。

您的代码中的工作示例（但不是您的 KML，因为未提供）

于 2013-10-11T16:45:12.217 回答