2

マーカー クラスタリングを設定する必要がある Google マップ (API V3 を使用) があります。基本的に、マーカーの位置は JSON を介して読み込まれ、Issue (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 の場合は、ピンを issueSevereMarkers 配列に追加し、それ以外の場合は issueSlightMarkers 配列に追加します。これにより、マーカーのポイントを含む配列が読み込まれます。そこで何か間違ったことをしているのかどうかはわかりません。

また、私が抱えている別の問題は、クラスターが基本的に、マーカーがグループ化されていると思われるカスタム アイコンを返すことです。ズームインして個々のマーカーを表示する場合、markerIssueHigh および markerIssueMedium 画像を使用するようにマーカーを設定するにはどうすればよいですか?

V3 の Clustere を使用しています (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html)

4

1 に答える 1