如果群集图标的标记位于相同位置,请将群集图标与其他群集图标区分开来

时间:2012-10-06 04:58:20

标签: google-maps google-maps-markers markerclusterer

我已经在群集上做了足够的工作。对我的现在要求是......

我已经制作了一组具有一定纬度和经度(位置)的标记,如果所有标记都是不同的则没有问题但是如果你有任何点具有相同的位置那么具有相同位置的点将是聚类形式仅与缩放级别无关。 因此,例如,我已经基于缩放级别将它们与两个不同的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>

非常感谢任何建议.......

提前致谢

1 个答案:

答案 0 :(得分:0)

最后得到了答案我自己解决上述问题的唯一方法是更改​​js文件并使用现有函数使用自己的逻辑.........:D