【问题标题】:Is there a way to cluster google map markers by country?有没有办法按国家/地区聚类谷歌地图标记?
【发布时间】:2012-10-08 08:00:59
【问题描述】:

我目前正在使用MarkerClustererPlus 来聚类我的标记。 (欢迎任何其他建议)而且我想知道是否有一种方法可以按大洲或国家进行聚类,而不是按邻近度。谢谢

【问题讨论】:

  • 你的标记来自哪里?如果它们来自数据库,则根据服务器端所需的任何参数对它们进行集群(分组)应该非常简单。

标签: javascript google-maps markerclusterer


【解决方案1】:

尝试使用此代码进行基于区域的聚类..

var keys = [];
var markerCluster = [];
var markers = new Object();
var map;

function initialize(){
var mapProp = {
  center:center,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  map=new google.maps.Map(document.getElementById("googleMap")
  ,mapProp);

 //styling cluster image..
  var clusterStyles = [
  {
    opt_textColor: 'black',
    url: 'images/cluster.png',
    height: 56,
    width: 55
  },
  {
     opt_textColor: 'black',
     url: 'images/cluster2.png',
     height: 53,
     width: 52
  }
  ];

  //cluster marker options..
  var mcOptions = {
             // gridSize: 16,
             styles: clusterStyles,
             maxZoom: 15
                 };
 function initialize(){
 var mapProp = {
  center:center,
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
 };
  map=new google.maps.Map(document.getElementById("googleMap")
  ,mapProp);

 //styling cluster image..
  var clusterStyles = [
  {
    opt_textColor: 'black',
    url: 'images/cluster.png',
    height: 56,
    width: 55
  },
  {
     opt_textColor: 'black',
     url: 'images/cluster2.png',
     height: 53,
     width: 52
  }
  ];

  //cluster marker options..
  var mcOptions = {
            // gridSize: 16,
            styles: clusterStyles,
            maxZoom: 15
             };
  //fetching lat long from data base
  <?php echo "addmarker(lat,lng); ?>"
  for(var k in markers) keys.push(k);
            for(var i = 0; i < keys.length; i++)
            {
                markerCluster[i] = new MarkerClusterer(map,      markers[keys[i]],mcOptions);
            }
 }
 function addmarker(lat, lng)
 {
     var provnce;
     var mycenter = new google.maps.LatLng(lat,lng);
     var marker = new google.maps.Marker({
        position:mycenter,
        title:infoName,
        id: count++
        // animation:google.maps.Animation.BOUNCE
        });
    //clustering markers based on region..
    $.ajax({ url:'https://maps.googleapis.com/maps/api/geocode/json?  latlng='+lat+','+lng+'&sensor=true',
         async: false,
         success: function(data){
                        // console.log(data.results[0]);
                        // return;
             for (var i=0; i<data.results[0].address_components.length; i++)
             {
                 if (data.results[0].address_components[i].types[0] == "administrative_area_level_1") {
                         //this is the object for province
                         provnce = data.results[0].address_components[i]['long_name'];
                     }
             }
             provnce = provnce.split(" ",1);
             if(markers.hasOwnProperty(provnce))
             {
               markers[provnce].push(marker);
             }
             else
             {
               markers[provnce] = new Array();
               markers[provnce].push(marker);
             }
             // console.log(markers);
             }
         });
 }

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-12-17
    • 2013-01-08
    • 2014-04-05
    • 1970-01-01
    • 2018-04-13
    • 2018-09-27
    相关资源
    最近更新 更多