0
我目前正在研究一個Google Map，它將顯示許多地圖標記，數據位於外部JSON文件中的一系列數組中。它使用Spiderfier以及由於具有相同座標而重疊的標記。我試圖實現Marker集羣，以縮小地圖的縮小時的混亂，但不會發生集羣。開發人員工具上的控制檯使用markerclusterer.js源代碼記錄「Uncaught TypeErrors」，聲稱它無法設置屬性或者說某些內容不是函數，但我不確定該怎麼做。我是否使用了錯誤的來源，是否有另一個問題，還是兩者兼而有之？Google Maps API - 標記羣集不起作用
代碼：
<script src= "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script type="text/javascript" src="https://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var map
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), {
center: new google.maps.LatLng(40.8039941, -77.863459),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP});
var oms = new OverlappingMarkerSpiderfier(map, {
markersWontMove: true,
markersWontHide: true,
//basicFormatEvents: true
});
var selectedInfoWindow
$(document).ready(function() {
$.getJSON("crime_maps_test.json", function(json1) {
$.each(json1, function(key, data) {
var infoWindow = new google.maps.InfoWindow;
var latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
title: data.location
});
marker.setMap(map);
setTimeout(function(){marker.setMap(map);}, 1000);
google.maps.event.addListener(marker, 'spider_click', (function(marker, data) {
return function() {
var Date = data.Occurred;
var Incident = data.Incident;
var Location = data.location;
var Reported = data.reported;
var Offense = data.offenses;
var Nature = data.nature_of_incident;
var iwContent = "<div style = 'width:200px;min-height:40px'><h3>" + Location + "</h3>" + "<p>" + "Incident Number: " + Incident + "</p>" + "<p>" + "Date of Occurrence: "+ Date + "</p>" + "<p>"+ "Date Reported: " + Reported + "</p>" + "<p>" + "Offense(s): "+ Offense + "</p>"+ "<p>" + "Nature of Incident: "+ Nature + "</p>" + "</div>";
//Inserting the div for the infowindow straight into the setContent parenthesis was not working so I created a variable to house it.
infoWindow.setContent(iwContent);
if (selectedInfoWindow != null && selectedInfoWindow.getMap() != null) {
selectedInfoWindow.close();
//If the clicked window is the selected window, deselect it and return
if (selectedInfoWindow == infoWindow) {
selectedInfoWindow = null;
return;
}
}
//If you arrive here, that means you should open the new info window
//because is different from the selected one
selectedInfoWindow = infoWindow;
selectedInfoWindow.open(map, marker);
var markerCluster = new MarkerClusterer(map, marker,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
})(marker, data));
oms.addMarker(marker);
});
});
});
window.map = map;
window.oms = oms;
}
</script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=apiKey&callback=initialize"></script>數據被存儲在外部數據文件 數據：
[
{
\t \t "Incident": "PSU201701139",
\t \t "Occurred": "3/25/17 23:25",
\t \t "reported": "3/25/17 23:25",
\t \t "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
\t \t "offenses": "Possession of Small Amount of Marijuana",
\t \t "location": "Porter Hall",
\t \t "disposition": "Open",
\t \t "lat": 40.8008254,
\t \t "lng": -77.8587917
\t },
\t {
\t \t "Incident": "PSU201701136",
\t \t "Occurred": "03/25/2017 9:25 PM to 9:30 PM",
\t \t "reported": "3/25/17 21:31",
\t \t "nature_of_incident": "Visitor observed highly intoxicated",
\t \t "offenses": "Public Drunkenness",
\t \t "location": "Bryce Jordan Center",
\t \t "disposition": "Open",
\t \t "lat": 40.8086228,
\t \t "lng": -77.8642905
\t },
\t {
\t \t "Incident": "PSU201701134",
\t \t "Occurred": "03/25/2017 8:52 PM to 8:58 PM",
\t \t "reported": "3/25/17 20:58",
\t \t "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
\t \t "offenses": "Possession of Small Amount of Marijuana",
\t \t "location": "Curtin Hall 5Th Floor",
\t \t "disposition": "Open",
\t \t "lat": 40.805098,
\t \t "lng": -77.861208
\t },
\t {
\t \t "Incident": "PSU201701133",
\t \t "Occurred": "03/25/2017 8:43 PM to 8:47 PM",
\t \t "reported": "3/25/17 20:47",
\t \t "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
\t \t "offenses": "Possession of Small Amount of Marijuana",
\t \t "location": "First Floor Tener Hall",
\t \t "disposition": "Open",
\t \t "lat": 40.8062507,
\t \t "lng": -77.8659939
\t },
\t {
\t \t "Incident": "PSU201701132",
\t \t "Occurred": "03/23/2017 12:01 AM to 2:00 AM",
\t \t "reported": "3/25/17 20:43",
\t \t "nature_of_incident": "Student reported they were assaulted by a known person",
\t \t "offenses": "Strangulation/Harassment/RFA-Request for Assistance",
\t \t "location": "Patterson Hall",
\t \t "disposition": "Open",
\t \t "lat": 40.7900255,
\t \t "lng": -77.8749025
\t },
\t {
\t \t "Incident": "PSU201701130",
\t \t "Occurred": "03/25/2017 8:38 PM to 8:55 PM",
\t \t "reported": "3/25/17 20:41",
\t \t "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
\t \t "offenses": "Possession of Small Amount of Marijuana",
\t \t "location": "McKee Hall",
\t \t "disposition": "Open",
\t \t "lat": 40.7963782,
\t \t "lng": -77.8701405
\t },
\t {
\t \t "Incident": "PSU201701030",
\t \t "Occurred": "03/19/2017 8:00 PM to 10:00 PM",
\t \t "reported": "3/19/17 23:13",
\t \t "nature_of_incident": "Student reported the theft of their unattended personal property",
\t \t "offenses": "Theft/$50-$200/From Building",
\t \t "location": "Hartranft Hall",
\t \t "disposition": "Open",
\t \t "lat": 40.8001538,
\t \t "lng": -77.8600272
\t },
\t {
\t \t "Incident": "PSU201701031",
\t \t "Occurred": "03/15/2017 12:00 PM to 8:00 PM",
\t \t "reported": "3/19/17 19:04",
\t \t "nature_of_incident": "Employee reported the theft of unsecured personal property",
\t \t "offenses": "Theft/Over $200/From Building",
\t \t "location": "Redifer Cmns",
\t \t "disposition": "Open",
\t \t "lat": 40.7995177,
\t \t "lng": -77.8581232
\t },
\t {
\t \t "Incident": "PSU201701026",
\t \t "Occurred": "03/18/2017 11:40 PM to 11:45 PM",
\t \t "reported": "3/18/17 23:42",
\t \t "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
\t \t "offenses": "Possession of Small Amount of Marijuana",
\t \t "location": "Stone Hall",
\t \t "disposition": "Open",
\t \t "lat": 40.8070745,
\t \t "lng": -77.8638751
\t },
\t {
\t \t "Incident": "PSU201701022",
\t \t "Occurred": "03/18/2017 8:00 PM to 8:20 PM",
\t \t "reported": "3/18/17 20:23",
\t \t "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
\t \t "offenses": "Possession of Small Amount of Marijuana",
\t \t "location": "Pennypacker Hall - 4Th Floor",
\t \t "disposition": "Open",
\t \t "lat": 40.8061624,
\t \t "lng": -77.8626794
\t },
\t {
\t \t "Incident": "PSU201701018",
\t \t "Occurred": "03/18/2017 2:00 PM to 2:08 PM",
\t \t "reported": "3/18/17 14:08",
\t \t "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located",
\t \t "offenses": "Possession of Small Amount of Marijuana",
\t \t "location": "Pennypacker Hall",
\t \t "disposition": "Open",
\t \t "lat": 40.8061624,
\t \t "lng": -77.8626794
\t },
\t {
\t \t "Incident": "PSU201701015",
\t \t "Occurred": "03/13/2017 3:31 PM to 03/18/2017 7:00 AM",
\t \t "reported": "3/18/17 10:02",
\t \t "nature_of_incident": "Employee reported accidental damage to University property",
\t \t "offenses": "RFA-Request for Assistance",
\t \t "location": "Hub Book Store",
\t \t "disposition": "Closed",
\t \t "lat": 40.7984565,
\t \t "lng": -77.8610745
\t },
\t {
\t \t "Incident": "PSU201701014",
\t \t "Occurred": "3/18/17 9:15",
\t \t "reported": "3/18/17 9:15",
\t \t "nature_of_incident": "Visitor reported a two vehicle crash with no injuries",
\t \t "offenses": "Vehicle Code - Accident",
\t \t "location": "University Park Airport",
\t \t "disposition": "Closed",
\t \t "lat": 40.8517473,
\t \t "lng": -77.8496788
\t },
\t {
\t \t "Incident": "PSU201701013",
\t \t "Occurred": "03/18/2017 3:41 AM to 4:05 AM",
\t \t "reported": "3/18/17 3:45",
\t \t "nature_of_incident": "Underage student observed highly intoxicated and transported to the hospital",
\t \t "offenses": "Pur,Cons,Poss, Trans Intox Bev/Health and Safety/RFA-Request for Assistance",
\t \t "location": "Mifflin Hall",
\t \t "disposition": "Open",
\t \t "lat": 40.800492,
\t \t "lng": -77.8605983
\t }
]
MarkerCluster的主要問題是您要爲每個標記創建一個新標記，您希望與OMS一樣使用它，將所有標記添加到同一個標記並讓它進行管理。由於您使用依賴於API的第三方庫同步加載所有內容（刪除回調並使用onload事件處理函數調用初始化..），您也將遇到使用回調加載API的問題，但不是異步更好。 （[fiddle]（http://jsfiddle.net/geocodezip/0L6esc7c/）） – geocodezip
這應該是一個真正的答案 – MrUpsidown
@geocodezip謝謝 –