1

こんにちは、サポートに感謝します。GoogleMaps API v3 を読み込み、XML ファイルからマーカーを配置する Web サイトがあり、それを MarkerCluster と統合しようとしています。何をやってもダメみたいです。誰か助けてくれませんか？マップをレンダリングし、xml からデータをロードするコードを貼り付けます... Markercluster 固有のコードをどこに追加すればよいか誰か説明できますか? ありがとうございました。

PS: 気に入ったらコードを自由に使用してください。Web 上のいくつかの例のおかげで、コードを書くこともできました。

<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

これは、v3に移植されたMikeWilliamsのv2チュートリアルに基づく例です。

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 に答える