クラスターで十分な作業を行いました。私にとっての現在の要件は...
いくつかの緯度と経度（位置）を持つマーカーのグループを作成しました。すべてが異なる場合は問題ありませんが、同じ位置を持つポイントがある場合、同じ位置を持つポイントは関係なくクラスター化された形式になりますズーム レベル。たとえば、ズーム レベルに基づいて 2 つの異なる情報ウィンドウでそれらを区別しました。つまり、定義した特定のズーム レベルを達成した場合、そのズーム レベルにクラスターがある場合、情報ウィンドウの 1 つが表示され、それ以外の場合はもう 1 つが表示されます。これが私が今までやってきたことです。
しかし、私が望むのは、「クラスターグループのいずれかが同じ場所にポイントを持っている場合、クラスターグループの解除中に異なるクラスターグループを持つことになり、その特定のクラスターグループのアイコンは異なる必要があります」
これが私のコードです：
<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>
どんな提案も大歓迎です........
前もって感謝します