Question

大家好，感谢您的支持。我有一个网站加载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>

Answer 1

这是基于Mike Williams的v2教程的example，移植到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的标记clusterer。你尝试过这个并没有用吗？

Working example根据您的代码，根据上述建议添加MarkerClusterer;使用标记聚类器的示例数据的主要修改无法使用您的。

Google Maps API v3 - 从xml文件加载标记并集成markercluster

1 个答案: