在Google地图中显示多个标记 [英] Showing many markers in Google Maps

问题描述

我有这张地图，想要显示一大堆标记。但我需要找到一种有序的方式来展示这一点，嗯......一些 cool 会很好。好的是Google Maps有很多很酷的功能。但我对它的使用很陌生，很可能没有意识到很酷的选项来组织标记和内容。我只是偶然找到了一条，我将在下面发布。

但为了了解其他人找到/创建的解决方案，我的问题是：显示大量标记的很酷的方法是什么？ b $ b

解决方案

以下是 MarkerClusterer for Google Maps V3

结帐示例 MarkerClusterer for Google Maps V3示例代码

以一种方式更容易查看。

这是一个使用MarkerClusterer的例子 JSFiddle Demo。

  var map = null; 
 var markerArray = []; //创建一个全局数组来存储标记
 var myPoints = [[43.65654，-79.90138，'ABC']，[43.91892，-78.89231，'DEF']，[43.82589，-79.10040，'GHA']] ; //创建全局数组来存储点
 
函数initialize（）{
 var myOptions = {
 zoom：8，
 center：new google.maps.LatLng（ 
 mapTypeControl：true，
 mapTypeControlOptions：{
 style：google.maps.MapTypeControlStyle.DROPDOWN_MENU 
}，
 navigationControl：true，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
 
 map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; 
 
 var mcOptions = {
 gridSize：50，
 maxZoom：15 
}; 
 var mc = new MarkerClusterer（map，[]，mcOptions）; 
 
 google.maps.event.addListener（map，'click'，function（）{
 infowindow.close（）; 
}）; 
 
 //将标记添加到地图
 //根据myPoints数组中的元素数量设置标记
 for（var i = 0; i< myPoints.length ; i ++）{
 createMarker（new google.maps.LatLng（myPoints [i] [0]，myPoints [i] [1]），myPoints [i] [2]）; 
} 
 
 mc.addMarkers（markerArray，true）; 
} 
 
 var infowindow = new google.maps.InfoWindow（{
 size：new google.maps.Size（150，50）
}）; 
 
函数createMarker（latlng，html）{
 var contentString = html; 
 var marker = new google.maps.Marker（{
 position：latlng，
 map：map，
 icon：'http://www.kjftw.com/sandbox/ gmap / images / icons / numeric / red10.png'，
 zIndex：Math.round（latlng.lat（）* -100000）<= 5 
}）; 
 
 marker.setAnimation（google.maps.Animation.BOUNCE）; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（contentString）; 
 infowindow.open（map，marker）; 
}）; 
 
 markerArray.push（marker）; //将局部var标记推入全局数组
} 
 
 window.onload = initialize; 
  

它看起来像分组的样子：

I have this map and want to display a whole bunch of markers. But I need to find a way of showing this in an orderly fashion, and well... something cool would be nice. Good thing is that Google Maps has many cool features. But I am new to its use and most likely not aware of cool options to organize markers and content. I just stumbled upon one neat way, which I will post below.

But in order to learn about solutions that others have found / created, my question is: what are cool ways of showing a large group of markers?

解决方案

Here is the documentation for MarkerClusterer for Google Maps V3

checkout examples MarkerClusterer for Google Maps V3 Sample Codes

It can group your markers in a way it's easier to view.

Here is an example of using MarkerClusterer JSFiddle Demo.

var map = null;
var markerArray = []; //create a global array to store markers
var myPoints = [[43.65654, -79.90138, 'ABC'],[43.91892, -78.89231, 'DEF'],[43.82589, -79.10040, 'GHA']];  //create global array to store points

function initialize() {
    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(43.907787, -79.359741),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var mcOptions = {
        gridSize: 50,
        maxZoom: 15
    };
    var mc = new MarkerClusterer(map, [], mcOptions);

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });

    // Add markers to the map
    // Set up markers based on the number of elements within the myPoints array
    for(var i=0; i<myPoints.length; i++){
         createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2]);
    }

    mc.addMarkers(markerArray , true);
}

var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 50)
});

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: 'http://www.kjftw.com/sandbox/gmap/images/icons/numeric/red10.png',
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    marker.setAnimation(google.maps.Animation.BOUNCE);

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

    markerArray.push(marker); //push local var marker into global array
}

window.onload = initialize;

Screenshot of what it looks like grouped:

这篇关于在Google地图中显示多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！