3

jQuery Google Maps v3プラグインを使用しています。goMap プラグインを使用して MarkerClusterer を追加したいのですが、意図したことは次のとおりです。

$('#world-map').goMap(
{
    markers: mapMarkers,
    zoom: 2,
    icon: 'http://localhost/eproj/white-marker.png',
    streetViewControl: true,
});

$.goMap.ready(function()
{
    var markers = [];
    for (var i in $.goMap.markers)
    {
        var temp = $($.goMap.mapId).data($.goMap.markers[i]);
        markers.push(temp);
    }
    var markerclusterer = new MarkerClusterer($.goMap.map, markers, clustererOpts);
});

マップ (現在 35 個のマーカーがあります) を表示すると、すべてのマーカーがプロットされていることを除いて、何も実行されていません。Firebug では、ログに記録されているエラーが表示されないため、これが goMap で機能しない理由が完全にはわかりません。

誰？簡単な解決策でさえありませんか？

編集: jsFiddle に置くことはできません。JS リソースを jsFiddle に追加すると、うまくいかないようです。

これはmapMarkers変数です:

[{"id":"9073a1977c8d5d6d7eb1666d03af4a66","address":"3  Essex St,  Jersey City,  Hudson,  United States"},{"id":"f63f77a0b2d0986f1f0e94bde07ff8ef","address":"96  Vesey St,  New York,  New York,  United States"},{"id":"57d5cb180425670f3e9c7b6e62fb88ac","address":"38  E Broadway,  Manhattan,  New York,  United States"},{"id":"bb464b47ca54a23edc3dee4a5f4299ad","address":"322  Tait Ave,  Sanger,  California,  United States"},{"id":"980f9d1e9e466d988f4851117a268e25","address":"1495  Morton Ave,  Parsons,  Kansas,  United States"},{"id":"389888acd972d01783547837841d5294","address":"160  N Washington St,  Clinton,  Missouri,  United States"}]

マップ ズーム 1 では、マーカー クラスタラーが有効になっていないにもかかわらず、マーカーは互いに非常に接近しています。

4

1 に答える 1

1

[新規編集]

この問題の最も簡単な回避策は、jquery.gomap-1.3.2.js以下のようにソース コードをハックすることです。

init 関数の myOptions 変数に markerCreated プロパティを追加します。

前

var myOptions = {
  ....
  scrollwheel:          opts.scrollwheel,
  zoom:                 opts.zoom
};

後

var myOptions = {
  ....
  scrollwheel:          opts.scrollwheel,
  zoom:                 opts.zoom,
  markerCreated:        opts.markerCreated //patched here
};

createMarker 関数のメソッドを変更して追加します。

前

createMarker: function(marker) {
  ....
  options.position = marker.position ? marker.position : new   google.maps.LatLng(marker.latitude, marker.longitude);

  var cmarker = new google.maps.Marker(options);
  if (marker.html) {
  ....
},

後

createMarker: function(marker) {
  ....
  options.position = marker.position ? marker.position : new   google.maps.LatLng(marker.latitude, marker.longitude);

  var goMap = this; //patched here
  var cmarker = new google.maps.Marker(options);
  if(goMap.opts.markerCreated) goMap.opts.markerCreated(cmarker); //patched here
  if (marker.html) {
  ....
},

そして、独自のコードで次のように変更します。

$('#world-map').goMap(
{
    markers: mapMarkers,
    zoom: 2,
    icon: 'http://localhost/eproj/white-marker.png',
    streetViewControl: true,
});

に：

$(function() {

    var markerclusterer;
    var markers = [];
    var mapMarkers = [{"id":"9073a1977c8d5d6d7eb1666d03af4a66","address":"3  Essex St,  Jersey City,  Hudson,  United States"},
        {"id":"f63f77a0b2d0986f1f0e94bde07ff8ef","address":"96  Vesey St,  New York,  New York,  United States"},
        {"id":"57d5cb180425670f3e9c7b6e62fb88ac","address":"38  E Broadway,  Manhattan,  New York,  United States"},
        {"id":"bb464b47ca54a23edc3dee4a5f4299ad","address":"322  Tait Ave,  Sanger,  California,  United States"},
        {"id":"980f9d1e9e466d988f4851117a268e25","address":"1495  Morton Ave,  Parsons,  Kansas,  United States"},
        {"id":"389888acd972d01783547837841d5294","address":"160  N Washington St,  Clinton,  Missouri,  United States"}
    ];
    $("#map").goMap({
        markerCreated: function(marker) {
            markers.push(marker);
            //updated solution for slow MarkerClusterer loading
            if(markers.length == mapMarkers.length) {
                new MarkerClusterer($.goMap.map, markers);
            }
            //prev solution
            //if(!markerclusterer) markerclusterer = new MarkerClusterer($.goMap.map, markers);
            //markerclusterer.addMarker(marker);
        },
        markers: mapMarkers
    });
});

$.goMap.ready部品を取り外します

このハックが機能するかどうか、今すぐ教えてください ありがとう

[編集]

これは、MarkerCluster が作成されているときに、適切なマーカー オブジェクト パラメータが渡されないためだと思います。これは、マーカー オブジェクトを作成する前に mapMarkers 変数を最初にジオコーディングする必要があるためです。一方、コードでは、マーカーを適切にジオコーディングする前に MarkerCluster を作成する必要があります (位置プロパティを持つマーカー オブジェクトを返します)。

mapMarkers 変数をマーカーのオブジェクト (つまり、既知の位置) に置き換えると、クラスターの表示が適切に表示されます。これを試してみてください。

[{ 
    latitude: 40.713094,
    longitude: -74.033904,
    id: 'test1',
    title: 'marker title 1'
},{
    latitude: 40.712638,
    longitude: -74.03429,
    id: 'test2',
    title: 'marker title 2'
}]

[古い] たぶんこれが役立つでしょう:

goMap マーカークラスター ソリューション

申し訳ありませんが、これよりも簡単な解決策を書くことはできません;）

ヒント: ページのソースを調べてみてください

于 2011-10-04T09:42:01.377 に答える