使用谷歌地图版本3聚合标记 [英] Clustering markers with google maps version 3

问题描述

我有大约2400个标记正在Google地图版本3上显示。问题是地图上标记太多，并且不是一个好的视觉表示。想要做的是将标记分组（即将它们聚类）。我遇到了一些与此有关的问题。以下是我的示例代码。

 函数初始化（）{
 var markers = JSON.parse（'<％= ConvertDataTabletoString（）％> ;'）; 
 var mapOptions = {
 center：new google.maps.LatLng（markers [0] .lat，markers [0] .lng），
 zoom：2，
 mapTypeId： google.maps.MapTypeId.ROADMAP 
 // marker：true 
}; 
 
 var infoWindow = new google.maps.InfoWindow（）; 
 var map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）; 
 
 //获取标记图片
 var redMarker ='图片/ marker2.png'; 
 var greenMarker ='图片/ g48.png'; 
 var currentMarker; 
 
 var gmarkers = []; 
 
 for（i = 0; i  var data = markers [i]; 
 var mag = data.Magnitude; 
 if（mag <5）{
 currentMarker = greenMarker; 
} 
 else if（mag> = 5）{
 currentMarker = redMarker; 
}; 
 var myLatlng = new google.maps.LatLng（data.lat，data.lng）; 
 var marker = new google.maps.Marker（{
 position：myLatlng，$ b $ map：map，
 title：data.title，
 icon：currentMarker 
}）; 
（function（marker，data）{
 //将单击事件附加到当前标记
 google.maps.event.addListener（marker，click，function（e）{
 infoWindow.setContent（'Magnitude：'+ data.Magnitude +'< br />'
 +'位置：'+ data.title）; 
 infoWindow.open（map，marker ）; 
}）; 
}）（marker，data）; 
 gmarkers.push（marker）; 
} 
} 
 
 var markerCluster = new MarkerClusterer（map，gmarkers）; 
 
 window.onload = function（）{initialize（）; 
} 
  

解决方案

您的代码已发布

 未捕获的ReferenceError：未定义映射
   
 $ b 
 
 
 
 
 
 
 
 $> gmarkers）; 
  

map变量对于初始化函数是本地的。
该行在初始化函数之外，所以map变量不可用。

将其放入初始化函数中（但在标记之后已被解析）。

I have about 2400 markers that are being displayed on google maps version 3. The problem is that there are too many markers on the map and that is not a good visual representation. What is want to do is group that the markers (i.e. cluster them). I'm experiencing some issues regarding that. Below is my sample code.

function initialize() {
        var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 2,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            //marker:true
        };

        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        //Get marker image
        var redMarker = 'Images/marker2.png';
        var greenMarker = 'Images/g48.png';
        var currentMarker;

        var gmarkers = [];

        for (i = 0; i < markers.length; i++) {
            var data = markers[i];
            var mag = data.Magnitude;
            if (mag < 5) {
                currentMarker = greenMarker;
            }
            else if (mag >= 5) {
                currentMarker = redMarker;
            };
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title,
                icon: currentMarker
            });
            (function (marker, data) {
                //Attaching a click event to the current marker
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent('Magnitude: ' + data.Magnitude + '<br />'
                                         + 'Location: ' + data.title);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
            gmarkers.push(marker);
        }
    }

    var markerCluster = new MarkerClusterer(map, gmarkers);

    window.onload = function () { initialize();
}

解决方案

I get a javascript error in your code as posted

Uncaught ReferenceError: map is not defined

on this line:

var markerCluster = new MarkerClusterer(map, gmarkers);  

The map variable is local to the initialize function. That line is outside of the initialize function, so the map variable isn't available to it.

Put it inside the initialize function (but after the markers have been parsed).

这篇关于使用谷歌地图版本3聚合标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！