1

大家好，感谢您的支持。我有一个加载 GoogleMaps API v3 并从 XML 文件放置标记的网站，我正在尝试将它与 MarkerCluster 集成。无论我尝试什么似乎都是错误的。有人可以帮忙吗？我将粘贴呈现地图并从 xml 加载数据的代码......有人可以解释在哪里添加 Markercluster 特定代码吗？谢谢你。

PS：如果你喜欢，请随意使用代码——我也可以通过网络上的几个示例来编写它。

<script type="text/javascript" >
$(document).ready(function() {
var myLatLng = new google.maps.LatLng(21.150272,-4.636016);
MYMAP.init('#map', myLatLng, 2);
MYMAP.placeMarkers('markers/markers.xml');
});

var styles = [ { "featureType": "water", "elementType": "geometry.fill", "stylers": [ { "saturation": -100 }, { "lightness": -61 } ] },{ "featureType": "road", "elementType": "labels", "stylers": [ { "saturation": -67 }, { "visibility": "off" } ] },{ "featureType": "poi", "stylers": [ { "lightness": 40 }, { "saturation": -73 } ] },{ "featureType": "poi", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "administrative.land_parcel", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "administrative.neighborhood", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "administrative.country", "elementType": "geometry.stroke", "stylers": [ { "color": "#ffff80" }, { "weight": 1 } ] },{ "featureType": "landscape", "stylers": [ { "saturation": -89 }, { "lightness": 25 } ] },{ "featureType": "water", "elementType": "labels", "stylers": [ { "visibility": "off" } ] } ]

var MYMAP = {
map: null,
bounds: null
}

MYMAP.init = function(selector, latLng, zoom) {
var myOptions = {
zoom:zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles,
mapTypeControl: false,
streetViewControl: false,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_CENTER,
},
}
this.map = new google.maps.Map($(selector)[0], myOptions);
this.bounds = new google.maps.LatLngBounds();
}


MYMAP.placeMarkers = function(filename) {
$.get(filename, function(xml){
$(xml).find("marker").each(function(){
var name = $(this).find('name').text();
var facebook = $(this).find('facebook').text();
var linkedin = $(this).find('linkedin').text();
var twitter = $(this).find('twitter').text();
var photo = $(this).find('photo').text();
var ico = $(this).find('ico').text();
var city = $(this).find('city').text();
var country = $(this).find('country').text();
var email = $(this).find('email').text();
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));

MYMAP.bounds.extend(point);

var marker = new google.maps.Marker({
position: point,
map: MYMAP.map,
icon: 'img/'+ico+'marker.png'
});


var infoWindow = new google.maps.InfoWindow();

var html='<div class="img"><img src="markers/'+photo+'.jpg"></div><div          class="txt"><p>'+name+'</p><br /><p>'+city+',<br />'+country+'</p><br /><div style="margin-top:-4px"><a target="" href="'+facebook+'"><img src="img/gosocial16/facebook.png"></a><a target="" href="'+twitter+'"><img src="img/gosocial16/twitter.png"></a><a target="" href="'+linkedin+'"><img src="img/gosocial16/linkedin.png"></a><a target="" href="'+email+'"><img style="margin-left:3px" src="img/gosocial16/email.png"></a></div></div>';


google.maps.event.addListener(MYMAP.map, 'zoom_changed', function() {
if (MYMAP.map.getZoom() < 2) MYMAP.map.setZoom(2);
});
google.maps.event.addListener(MYMAP.map, 'zoom_changed', function() {
if (MYMAP.map.getZoom() > 18) MYMAP.map.setZoom(18);
});


google.maps.event.addListener(marker, 'click', function() {

$("#close").click(function() {
infoWindow.close();
});

infoWindow.setContent(html);
infoWindow.setOptions({maxWidth:350});
infoWindow.open(MYMAP.map, marker);
});


MYMAP.map.fitBounds(MYMAP.bounds);
});
});
}

</script>
4

1 回答 1

0

这是一个基于 Mike Williams 的 v2 教程的示例，移植到 v3。

如果您查看MarkerClusterer的文档，它包括以下示例：

var markers = [];
for (var i = 0; i < 100; i++) {
  var latLng = new google.maps.LatLng(data.photos[i].latitude,
      data.photos[i].longitude);
  var marker = new google.maps.Marker({'position': latLng});
  markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);

如果您将其添加到现有循环中，您应该能够在创建标记变量后执行此操作：

  markers.push(marker);

然后在您当前调用 fitBounds 的位置创建标记聚类器。你试过了吗，它没有用？

基于您的代码的工作示例，根据上述建议添加 MarkerClusterer；使用标记聚类器的样本数据的重大修改，因为不能使用你的。

于 2012-11-16T21:40:49.587 回答