谷歌地图 - 聚类标记答案

【问题标题】：Google Maps - Clustering Markers谷歌地图 - 聚类标记
【发布时间】：2012-12-17 17:01:45
【问题描述】：

我有一个谷歌地图（使用 API V3），我需要在其中设置标记聚类。基本上，标记位置是通过 JSON 加载的，它返回问题（1 或 2）、纬度和经度。

我尝试设置聚类，但是即使 JSON 调用实际上返回点，地图上也没有显示任何内容。这是我想出的：

var map;

function myMap(){   
  var latlng = new google.maps.LatLng(35.94, 14.37);

var mapOptions = {
zoom: 10,
center: latlng,
panControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
zoomControl: true};

map = new google.maps.Map(document.getElementById("map"), mapOptions);  
loadMarkers();
}

function loadMarkers() {    

var mcOptions = {gridSize: 50, maxZoom: 15};
var issueSevereMarkers = [];
var issueSlightMarkers = [];

 markerIssueHigh = new google.maps.MarkerImage("img/icn_issue_high.png",
new google.maps.Size(10.0, 10.0),
new google.maps.Point(0, 0),
new google.maps.Point(5.0, 5.0)
);

markerIssueMedium = new google.maps.MarkerImage("img/icn_issue_medium.png",
new google.maps.Size(10.0, 10.0),
new google.maps.Point(0, 0),
new google.maps.Point(5.0, 5.0)
);

var issuePoints = $.ajax({
  type: 'GET',
  url: 'http://www.mydomain.com/php/markers.php?&jsoncallback=?',
  dataType: 'JSONp',
  timeout: 5000,
  success: function(data) {         
        $.each(data, function(i,item){

        if (item.Issue == 1) {  
            // If severely congested                
              var latLng = new google.maps.LatLng(item.Latitude, item.Longitude);
              var issueSevereMarker = new google.maps.Marker({'position': latLng});
              issueSevereMarkers.push(issueSevereMarker);

        } else if (item.Issue == 2) {
            // If slightly congested
              var latLng = new google.maps.LatLng(item.Latitude, item.Longitude);
              var issueSlightMarker = new google.maps.Marker({'position': latLng});
              issueSlightMarkers.push(issueSlightMarker);
        }   

    });

    var markerClusterSevere = new MarkerClusterer(map, issueSevereMarkers);
    var issueSlightMarkerCluster = new MarkerClusterer(map, issueSlightMarkers);
  },
  error: function(data) {

  }
});     
}

基本上我所做的是从 JSON 中获取结果，如果问题是类型 1，我将一个 pin 添加到 issueSevereMarkers 数组，否则我将其添加到 issueSlightMarkers 数组。这应该加载带有标记点的数组。我不确定我在那里做错了什么。

我遇到的另一个问题是，当标记被分组时，集群器基本上会返回一个自定义图标。当我放大并查看单个标记时，如何设置标记以使用 markerIssueHigh 和 markerIssueMedium 图像？

我正在为 V3 使用 Clustere (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html)

【问题讨论】：

标签： javascript jquery google-maps google-maps-api-3 markerclusterer

【解决方案1】：

要实际使用您的自定义图标，您需要在 google.maps.Marker 构造函数中引用它们

    if (item.Issue == 1) {  
        // If severely congested                
          var latLng = new google.maps.LatLng(item.Latitude, item.Longitude);
          var issueSevereMarker = new google.maps.Marker({position: latLng, 
                                                          icon:markerIssueHigh});
          issueSevereMarkers.push(issueSevereMarker);

    } else if (item.Issue == 2) {
        // If slightly congested
          var latLng = new google.maps.LatLng(item.Latitude, item.Longitude);
          var issueSlightMarker = new google.maps.Marker({position: latLng,
                                                          icon:markerIssueMedium});

          issueSlightMarkers.push(issueSlightMarker);
    }

看不出任何明显的原因，为什么什么都不会出现，这里有一个 link 与集群器的工作图（从 XML 而不是 JSON 获取其数据）。

这个similar question 向集群添加了一个自定义标记。

【讨论】：