Question

我只是想根据xml文件设置一些标记，另外创建三个不同的标记聚类器和自己的图标！

问题是：

未显示任何标记
我如何用自己的图标实现三个标记组（marker clusterer）

的index.html

<html>
<head>
<title>Google Maps Integration</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/data.json"></script>
<script type="text/javascript" src="js/markerclusterer.js"></script>
<script type="text/javascript" src="js/markers.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>

marker.js

$(document).ready(function() {
  $("#map").css({
        height: 675,
        width: 659
    });
    var myLatLng = new google.maps.LatLng(51.918, 4.47663);
  MYMAP.init('#map', myLatLng, 7);
  MYMAP.placeMarkers("markers.xml"); // xml data
});

var MYMAP = {
  map: null,
}

MYMAP.init = function(selector, latLng, zoom) {
    var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
}

// set markers
MYMAP.placeMarkers = function(filename) {
    var markers = []; // create new array for marker points 
    $.get(filename, function(xml){
        $(xml).find("marker").each(function(){
            var name = $(this).find('name').text();
            var address = $(this).find('address').text();

            // create a new LatLng point for the marker
            var lat = $(this).find('lat').text();
            var lng = $(this).find('lng').text();
            var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));

            // set marker new
            var marker = new google.maps.Marker({position: point});
            markers.push(marker);

            // set marker info
            var infoWindow = new google.maps.InfoWindow();
            var html='<b>'+name+'</b><br>'+address; 
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(html);
                infoWindow.open(MYMAP.map, marker);
            });

        });
         var markerCluster = new MarkerClusterer(map, markers);
    });

}
google.maps.event.addDomListener(window, 'load', initialize);

marker.xml

<?xml version="1.0"?>
<markers>
    <marker>
        <name>Heineken Amsterdam</name>
        <address>Joop Geesinkweg 5</address>
        <city>Amsterdam</city>
        <postcode>1096 AT</postcode>
        <lat>52.3354</lat>
        <lng>4.92938</lng>
         </marker>
</markers>

Answer 1

在这里查看最新版本的markerclusterPlus： http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.6/

还有一个很好的文档和一些例子。

Google Maps API - Marker Clusterer

1 个答案: