在谷歌地图中显示多个标记

Question

我有一张地图，想要展示大量的标记。但是我需要找到一种有序的展示方式，而且...最好是一些酷炫的效果。幸运的是，Google Maps有许多很酷的功能。但我刚开始使用它，可能不了解组织标记和内容的酷炫选项。我偶然发现了一种很棒的方法，我将在下面发布。

但为了了解其他人发现/创建的解决方案，我的问题是：有哪些酷炫的方式可以展示大量的标记？

- joh-3

---

也许这个问题与你的相关：https://dev59.com/-VXTa4cB1Zd3GeqP3Jl- - Alp

Answer 1

这里是 Google 地图 V3 上 MarkerClusterer 的文档

查看示例代码请前往 Google 地图 V3 上 MarkerClusterer 的示例代码

它可以对标记进行分组，使其更易于查看。

下面是一个使用 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;

这是按照分组方式呈现的截图：

- KJYe.Name

---

文档链接出现404错误。文档/示例链接分别为：https://developers.google.com/maps/documentation/javascript/marker-clusteringhttps://github.com/googlemaps/v3-utility-library/tree/master/markerclusterer/examples（我没有看到公共示例页面，只有一个GitHub页面） - Zachary Schuessler

Answer 2

这是一个看起来很花哨但相对易于编码的示例，它让我发布了这条消息。

基于这个实现，有 Google 地图滑动条，此处实现。 特点：当您在详细信息区域悬停时，自动滚动并显示地图中的内容。允许您发布和显示更多信息，但仍然将其与地图联系起来。

- joh-3