我在集群上做了足够多的工作。目前对我的要求是...
我已经制作了一组带有一些纬度和经度（位置）的标记，如果所有标记都是不同的，那么就不会有问题，但是如果你有任何具有相同位置的点，那么具有相同位置的点将仅以集群形式出现，而与缩放级别。因此，例如，我根据缩放级别使用两个不同的信息窗口对它们进行了区分，即，如果我们实现了我们定义的特定缩放级别，如果在该缩放级别存在集群，则显示一个信息窗口，否则将显示另一个信息窗口。这就是我到目前为止所做的。
但我想要的是“如果任何集群组的点位于相同的位置，那么我将有不同的集群组，同时取消集群，那么该特定集群组的图标必须不同”
这是我的代码：
<script type ="text/javascript">
$(document).ready(function () {
function changeMarker(marker) {
marker.setIcon("images/bluemarker.png"); // this function is useful for div mouseover events
}
var map;
var infowindow;
var info1;
// this function is to evaluate the same latitude and longitude
function sameLatLng(mc) {
var cluster = mc.clusters_;
// if more than 1 point shares the same lat/long
// the size of the cluster array will be 1 AND
// the number of markers in the cluster will be > 1
// REMEMBER: maxZoom was already reached and we can't zoom in anymore
if (cluster.length == 1 && cluster[0].markers_.length > 1) {
var markers = cluster[0].markers_;
var html = '';
html += '<div id="infoWin">';
html += '<h3>' + markers.length + ' properties at this location of same latitude and longitude:</h3>';
html += '<div class="tab_content">';
html += '<ul class="addrlist">';
for (var i = 0; i < markers.length; i++) {
html += '<li><a id="p' + markers[i].title + '" href="javascript:;" rel="' + i + '">' + markers[i].title + '</a></li>';
}
html += '</ul>';
html += '</div>';
html += '</div>';
// I'm re-using the same global InfoWindow object here
infowindow.close(map);
$(html).appendTo('body');
infowindow = new google.maps.InfoWindow();
infowindow.setContent(document.getElementById('infoWin'));
infowindow.open(map, markers[0]);
// bind a click event to the list items to popup an InfoWindow
$('ul.addrlist li').click(function () {
alert("you clicked ")
});
}
}
function InitializeMap() {
// this function is for basic functionalities of the map
var myOptions =
{
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function markicons() {
// this function is to create markers
InitializeMap();
var ltlng = [];
var markers = [];
var contentString = '<div id="maincontent" >' +
'<a href="http://www.google.com" target="_blank">'
+ '<img src="images/1.jpg" >'
+ '<span>'
+ 'Description for img01'
+ '</span>'
+ '</a>'
+ '<a href="http://www.edaboard.com" target="_blank">'
+ '<img src="images/2.jpg" >'
+ '<span>'
+ 'Description for img02'
+ '</span>'
+ '</a>'
+ '<a href="http://www.allaboutcircuits.com" target="_blank">'
+ '<img src="images/3.jpg" >'
+ '<span>'
+ 'Description for img03'
+ '</span>'
+ '</a>'
+ '<a href="http://www.hiddenbrains.org" target="_blank">'
+ '<img src="images/4.jpg" >'
+ '<span>'
+ 'Description for img04'
+ '</span>'
+ '</a>'
+ '<a href="http://www.hiddenbrains.com" target="_blank">'
+ '<img src="images/5.jpg" >'
+ '<span>'
+ 'Description for img05'
+ '</span>'
+ '</a>'
+ '<a href="http://www.google.com" target="_blank">'
+ '<img src="images/6.jpg" >'
+ '<span>'
+ 'Description for img06'
+ '</span>'
+ '</a>'
+ '</div>'
// fixed positioned markers
ltlng.push(new google.maps.LatLng(18.76, 83.28));
ltlng.push(new google.maps.LatLng(17.75, 83.29));
ltlng.push(new google.maps.LatLng(17.76, 83.30));
ltlng.push(new google.maps.LatLng(18.76, 83.30));
ltlng.push(new google.maps.LatLng(19.76, 83.30));
ltlng.push(new google.maps.LatLng(20.76, 83.30));
ltlng.push(new google.maps.LatLng(18.76, 83.30));
ltlng.push(new google.maps.LatLng(22.76, 83.30));
ltlng.push(new google.maps.LatLng(23.76, 83.30));
ltlng.push(new google.maps.LatLng(26.76, 83.30));
ltlng.push(new google.maps.LatLng(26.76, 83.30));
ltlng.push(new google.maps.LatLng(26.76, 83.30));
ltlng.push(new google.maps.LatLng(26.76, 83.30));
map.setCenter(ltlng[0]);
for (var i = 0; i <= ltlng.length; i++) {
marker = new google.maps.Marker({
map: map,
position: ltlng[i],
draggable: true,
icon: "images/greymarker.png",
animation: google.maps.Animation.DROP,
title: "this is " + i + "marker"
});
(function (i, marker) { // actually this is the call back function after creation of one marker this will be called
if (!infowindow) { // initialiazation of window
infowindow = new google.maps.InfoWindow();
}
google.maps.event.addListener(marker, 'click', function () {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
infowindow.setContent(contentString);
infowindow.open(map, marker);
marker.setIcon("images/bluemarker.png");
});
google.maps.event.addListener(marker, 'mouseout', function () {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
// infowindow.close(map, marker);
marker.setIcon("images/greymarker.png");
});
})(i, marker);
markers.push(marker); // to store the present marker in the markers array
}
var markerCluster = new MarkerClusterer(map, markers, { minimumClusterSize: 2, maxZoom: null, zoomOnClick: false, gridSize: 100 });
// we can use the maximum zoom option for the same location of latitude and longitude conflict where if zoom > maxZoom then the differen popups with the same location points are highlighted
// this is triggered when the content of the infowindow that is if the content in the infowindow string is ready it is fired
markerCluster.onClick = function () { return sameLatLng(markerCluster); }
google.maps.event.addListener(infowindow, 'domready', function () {
// this is the jquery plugin to have a slide show in the infowindow according to the content string
$("#maincontent").coinslider({
width: 500, // width of slider panel
height: 290, // height of slider panel
spw: 10, // squares per width
sph: 10, // squares per height
delay: 3000, // delay between images in ms
sDelay: 30, // delay beetwen squares in ms
opacity: 0.7, // opacity of title and navigation
titleSpeed: 500, // speed of title appereance in ms
effect: 'random', // random, swirl, rain, straight
navigation: true, // prev next and buttons
links: true, // show images as links
hoverPause: true // pause on hover
});
});
google.maps.event.addListener(markerCluster, "mouseover", function (c) {
alert("mouseover: ");
});
google.maps.event.addListener(markerCluster, "click", function (c) {
alert("hello cluster");
var info = new google.maps.MVCObject;
info.set('position', c.center_);
var markers_res = c.getMarkers();
var titles = "";
//Get all the titles
for (var i = 0; i < markers_res.length; i++) {
titles = titles + markers_res[i].getTitle() + "\n" + ",";
}
var infowindow = new google.maps.InfoWindow();
infowindow.close();
infowindow.setContent(titles);
infowindow.open(map, info);
})
}
window.onload = markicons;
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server" >
<div id="map-container"><div id="map"></div></div>
</asp:Content>
任何建议都非常感谢.......
提前致谢