您好我正在为我的分类广告网站制作地图视图,但我在向地图添加群集功能时遇到问题。我想知道是否有人可以帮助我并就如何编辑我的代码以使聚类适用于我网站上的所有广告提供一些建议,因为它现在是相应地显示我的所有广告但它不是由于某些原因我添加集群代码时将它们聚集起来,我有点像新手,所以我显然输错了代码。任何帮助将不胜感激。提前谢谢。
这是我的代码:
$(document).ready(function() {
var markersInfo = $('.ia-card').map(function() {
var info = {
id: $(this).data('map-id'),
address: $(this).data('map-address'),
title: $(this).data('map-title'),
price: $(this).data('map-price'),
latitude: $(this).data('map-latitude'),
longitude: $(this).data('map-longitude'),
html: "<img src=" + $(this).data('map-image') + ">",
link: $(this).data("map-link"),
contentHtml: "<div class='image'>" + "<img src=" + $(this).data('map-image') + ">" + "</div>" + '<b>' + $(this).data('map-title') + '</b><br>' + $(this).data('map-price') + "<br><a href='" + $(this).data("map-link") + "'>More>></a>"
};
return info;
}).get();
initGoogleMap(markersInfo);
// GMAP ON SEARCH RESULTS PAGE
function initGoogleMap(markersInfo) {
var mapOptions = {
// zoom: 2,
// center: new google.maps.LatLng(53.334430, -7.736673) // center of Ireland
},
bounds = new google.maps.LatLngBounds(),
mapElement = document.getElementById('map-canvas'),
map = new google.maps.Map(mapElement, mapOptions);
var geocoder = new google.maps.Geocoder();
$.each(markersInfo, function(key, val) {
var marker = new google.maps.Marker({
map: map,
position: {lat: parseFloat(val.latitude), lng: parseFloat(val.longitude)},
title: val.title,
info: new google.maps.InfoWindow({
content: val.contentHtml
})
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
});
loc = new google.maps.LatLng(val.latitude, val.longitude);
bounds.extend(loc);
});
map.fitBounds(bounds);
map.panToBounds(bounds);
var markerCluster = new MarkerClusterer(map, markersInfo, {
zoomOnClick: true,
gridSize: 40,
maxZoom: 15,
imagePath: 'images/m',
minimumClusterSize: 2
});
};
});
答案 0 :(得分:0)
当将标记列表传递给MarkerClusterer
时,您需要将其作为一组实际的Google标记传递。
所以你需要在数组中存储标记(不是它们的信息,而是实际的标记)并传递它。
您也不应该将每个标记的map
属性设置为直接将其添加到地图中,而您希望MarkerClusterer
处理该标记。
$(document).ready(function() {
var markersInfo = $('.ia-card').map(function() {
var info = {
id: $(this).data('map-id'),
address: $(this).data('map-address'),
title: $(this).data('map-title'),
price: $(this).data('map-price'),
latitude: $(this).data('map-latitude'),
longitude: $(this).data('map-longitude'),
html: "<img src=" + $(this).data('map-image') + ">",
link: $(this).data("map-link"),
contentHtml: "<div class='image'>" + "<img src=" + $(this).data('map-image') + ">" + "</div>" + '<b>' + $(this).data('map-title') + '</b><br>' + $(this).data('map-price') + "<br><a href='" + $(this).data("map-link") + "'>More>></a>"
};
return info;
}).get();
initGoogleMap(markersInfo);
// GMAP ON SEARCH RESULTS PAGE
function initGoogleMap(markersInfo) {
var mapOptions = {
// zoom: 2,
// center: new google.maps.LatLng(53.334430, -7.736673) // center of Ireland
},
bounds = new google.maps.LatLngBounds(),
mapElement = document.getElementById('map-canvas'),
map = new google.maps.Map(mapElement, mapOptions),
markerList = []; // create an array to hold the markers
var geocoder = new google.maps.Geocoder();
$.each(markersInfo, function(key, val) {
var marker = new google.maps.Marker({
/*map: map,*/ // do not set the map on each marker
position: {
lat: parseFloat(val.latitude),
lng: parseFloat(val.longitude)
},
title: val.title,
info: new google.maps.InfoWindow({
content: val.contentHtml
});
});
markerList.push(marker); // add the marker to the list
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
});
loc = new google.maps.LatLng(val.latitude, val.longitude);
bounds.extend(loc);
});
map.fitBounds(bounds);
map.panToBounds(bounds);
var markerCluster = new MarkerClusterer(map, markerList, {
zoomOnClick: true,
gridSize: 40,
maxZoom: 15,
imagePath: 'images/m',
minimumClusterSize: 2
});
};
});