-1

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

问题是：

  • 不显示任何标记
  • 我如何用自己的图标实现三个标记组（标记聚类器）

索引.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>

标记.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);

标记.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>
4

1 回答 1

0

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

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

于 2011-12-19T08:41:40.673 回答