我已经在群集上做了足够的工作。对我的现在要求是......
我已经制作了一组具有一定纬度和经度(位置)的标记,如果所有标记都是不同的则没有问题但是如果你有任何点具有相同的位置那么具有相同位置的点将是聚类形式仅与缩放级别无关。 因此,例如,我已经基于缩放级别将它们与两个不同的infowindows区分开来,即,如果我们实现特定的缩放级别,我们定义在该缩放级别是否存在聚类,则显示其中一个信息窗口,否则将显示另一个。这就是我到目前为止所做的。
但我想要的是那个 “如果任何群集组的点位于相同的位置,那么我将拥有不同的群集组,然后取消群集,那么该特定群集组的图标必须不同”
这是我的代码:
<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>
非常感谢任何建议.......
提前致谢
答案 0 :(得分:0)
最后得到了答案我自己解决上述问题的唯一方法是更改js文件并使用现有函数使用自己的逻辑.........:D