Google 地图标记集群

Question

我有一张地图运行有一段时间了，只是想添加标记簇，因为现在地图上有足够多的标记，很难看清发生了什么。

我不想更改太多编码，因为一切都在正常工作，但无论如何我都不知道如何让自定义标记进行聚类。

这是我为地图准备的 Javascript 编码：

var marker;

function pan(latlon) {
  var coords = latlon.split(",");
  var panPoint = new google.maps.LatLng(coords[0], coords[1]);
  map.panTo(panPoint)
}

var map;

function initialize() {

  var mhbrewco = {
    lat: 50.062254,
    lng: -110.71656
  }
  var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(52.086594, -113.307591),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    mapTypeControl: false,
    streetViewControl: false
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var BrewIcon = 'http://medicinehatbrewingcompany.ca/wp-content/uploads/2016/08/favicon-32x32-1.png';

  marker = new google.maps.Marker({
    map: map,
    position: mhbrewco,
    icon: BrewIcon
  });

  var contentString = '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Medicine Hat Brewing Company</h1>' +
    '<div id="bodyContent">' +
    '<p><b>Address:</b>' +
    ' 1366 Brier Park Dr NW' +
    ' Medicine Hat, AB T1C 1Z7</p>' +
    '<p><b>Phone:</b> <a href="tel:+14035251260">(403)525-1260</a>' +
    '</div>' +
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });

  jQuery(document).ready(function($) {
    $('.location').on('click', function() {
        map.setZoom(9);
      pan($(this).data('location'));
    });
  });

setMarkers(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

var liquorstores = [
  ['Silver Buckle Sports Bar', 50.032566, -110.665056, 1],
  ['After Work "O"asis', 50.059230, -110.669693, 2],
  ['Moxies Grill & Bar', 50.009886, -110.650260, 3],
  ['MHC Crave', 50.017578, -110.685868, 4],
  ['Cheers Neighbourhood Pub', 50.054084, -110.699307, 5],
  ['Industry Pub', 50.031567, -110.663139, 6],
  ['District Bar and Grill', 50.062417, -110.736581, 7],
  ['Mainliner Pub', 50.039407, -110.670529, 8],
  ['The Underground Tap & Grill', 53.541643, -113.490748, 9],
  ['Mauros Italian Cafe & Bar', 50.044930, -110.686023, 10],
  ['Crossroads Liquor Store', 50.024438, -110.709010, 11],
  ['Aberdeen Spirits', 50.035819, -110.676820, 12],
  ['Southwest Liquor Store', 50.032651, -110.696367, 13],
  ['Scoreboard', 50.008101, -110.646687, 14],
  ['Medicine Hat Lodge', 50.000983, -110.642278, 15],
  ['Rickys All Day Grill', 50.030527, -110.705316, 17],
  ['Beer Revolution', 53.546561, -113.523155, 18],
  ['Trackside Liquor Store', 50.030117, -110.659201, 19],
  ['Liquor Barn | Maple Avenue', 50.041581, -110.670394, 20],
  ['Liquor Barn | 3rd Street', 50.041329, -110.671092, 34],
  ['Liquor Barn | Dunmore', 50.017225, -110.658228, 35],
  ['Liquor Depot | Strachan', 49.995760, -110.643673, 36],
  ['State & Main', 50.063257, -110.688831, 22],
  ['Ralphs Texas Bar & Grill', 50.006719, -110.666115, 23],
  ['Bearded Bull', 50.037939, -110.676179, 24],
  ['Arcadia Bar', 53.556990, -113.536204, 25],
  ['Hat Liquor Store', 50.032125, -110.684876, 26],
  ['Sherbrooke Liquor Store', 53.570989, -113.548680, 27],
  ['Sobeys Cornerstone Liquor Store', 49.997892, -110.644211, 28],
  ['Northlands Co-Op Liquor Store', 50.063772, -110.685896, 29],
  ['Paul Howe Liquor Store', 50.059006, -110.669569, 30],
  ['Royal Liquor Store', 50.041701, -110.675085, 31],
  ['Ace Liquor Store', 50.062650, -110.687808, 33],
  ['Rosscos Pub', 50.0082223, -110.6462413, 34],
  ['Sierra Springs Liquor', 51.2586657, -114.0049453, 35],
  ['Brooks Liquor Store', 50.5747185, -111.9083015, 36],
  ['Brooks North End Liquor Store', 50.5747185, -111.9083015, 37],
  ['Heritage Inn & Suites', 50.5838092, -111.9008177, 38],
  ['Thirstys Cold Beer & Spirits', 50.0538104, -110.7017657, 39],
  ['Beer Revolution', 51.0431417, -114.083346, 40],
  ['Dunmore Liquor Store', 50.0118551, -110.6532196, 41],
  ['Eagle Butte Liquor Store', 49.9707704, -110.5748527, 42],
  ['The Cypress Club', 50.0402075, -110.6783379, 43],
  ['Esplanade Arts & Heritage Centre', 50.04008, -110.6834557, 44],
  ['LOCAL Public Eatery', 50.0394332, -110.677978, 45],
  ['Park Lane Cold Beer Store', 50.0325614, -110.7080837, 46],
  ['Rustic Kitchen & Bar', 50.0322693, -110.7105375, 32],
  ['South Co-Op Liquor Store', 50.0101276, -110.6650279, 47],
  ['Canex', 50.2513133, -111.1739837, 48],
  ['Bronco Billys Doll House', 50.0786134, -110.7844054, 49],
  ['Whos On 3rd', 50.0769917, -110.7872064, 50],
  ['Liquor on McLeod', 53.5439296, -113.8868955, 51],
  ['Redcliff Co-Op Liquor Store', 50.0791044,-110.780469, 52],
  ['Royal Liquor Store', 50.0414673,-110.6748202, 53],
  ['Cheesecake Cafe', 49.9958717,-110.6438655, 54]
];

function setMarkers(map) {

  var markerlink = 'http://medicinehatbrewingcompany.ca/wp-content/uploads/2017/03/wheat-icon-marker.png';

  var markerlink = {
    url: 'http://medicinehatbrewingcompany.ca/wp-content/uploads/2017/03/wheat-icon-marker.png',
    size: new google.maps.Size(20, 32),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 32)
  };

  var shape = {
    coords: [1, 1, 1, 20, 18, 20, 18, 1],
    type: 'poly'
  };

  var mcMarkers = [];

  for (var i = 0; i < liquorstores.length; i++) {
    var beach = liquorstores[i];
    var barMarker = new google.maps.Marker({
      position: {
        lat: beach[1],
        lng: beach[2]
      },
      map: map,
      icon: markerlink,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
    mcMarkers.push(barMarker);
  };

  var mcOptions = {gridSize: 50, maxZoom: 15, imagePath:'/htdocs/wp-content/themes/rhythm-child/images/m'};
  var markerCluster = new MarkerClusterer(map, mcMarkers, mcOptions);
};

在这一点上，我不确定我是否只是遗漏了一些东西......地图有效，标记在那里，他们只是不想聚集。

我将图像和 markercluster.js 文件存储在站点的服务器上，因此这也不成问题。

我调用 js 文件的 HTML 代码是：

<a name="locations"></a>

<div id="map-canvas"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBytnwKLLyI6WBkpIltO6Qj_CaAZc_QQLI"></script>

<script src="http://www.medicinehatbrewingcompany.ca/htdocs/wp-content/themes/rhythm-child/js/markerclusterer.js"></script>

Answer 1

将您的每个标记添加到数组中

// Create empty array of Markers
var markers = [];

for (var i = 0; i < liquorstores.length; i++) {
  var beach = liquorstores[i];
  var barMarker = new google.maps.Marker({
    position: {
      lat: beach[1],
      lng: beach[2]
    },
    map: map,
    icon: markerlink,
    shape: shape,
    title: beach[0],
    zIndex: beach[3]
  });

  // Add marker to the array
  markers.push(barMarker);
};

然后将markers数组传递给Clusterer。

var markerCluster = new MarkerClusterer(map, markers, mcOptions);

Google 地图标记集群

Google Map MarkerClusterer

javascript

google-maps

google-maps-api-3

markerclusterer