2017-05-05 122 views
-2

我有一張我已經跑了一段時間的地圖,只是試圖添加Marker Clusters,因爲現在地圖上有足夠的標記,導致難以看清發生了什麼。Google Map MarkerClusterer

我不想改變很多編碼,因爲一切都按照它應該的方式工作,但無論如何我無法弄清楚如何讓自定義標記進行聚類。

這裏的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文件,所以這也不應該是一個問題。

的HTML代碼,我調用js文件是:

<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> 
+0

您只將1個標記傳遞給'markerClusterer'。 – MrUpsidown

回答

0

每個標記添加到一個數組

// 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); 
}; 

再經過標記陣列的聚類器。

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

感謝您的快速回復。我認爲這可能與我的數組不合適,但它仍然不會集羣。 我想知道這是否與我的本地文件有關,所以我使用了Google Map文檔中的網址,但這也不起作用。 –

+0

你做得很明顯錯了。再看看我的回答和你的代碼編輯。瞭解如何縮進代碼,這可能會有所幫助。 – MrUpsidown

+0

顯然我做錯了,這就是爲什麼我伸出援手。我注意到了'markers.push(barMarker);'與你所在的地方不同。我非常懷疑這是縮進,我有問題格式正確在這裏。 道歉爲了麻煩,再次感謝您的幫助。 –