Google Maps API – 标记群集无法正常工作
我目前正在开发一个Google Map，它将显示许多地图标记，数据位于外部JSON文件中的一系列数组中。 它也使用Spiderfier来重叠标记，因为它们具有相同的坐标。 我正在尝试实现Marker聚类，以便在缩小时使地图变得更加混乱，但是没有发生聚类。 开发人员工具上的控制台使用markerclusterer.js源代码记录“Uncaught TypeErrors”，声称它不能设置属性或说某些东西不是函数，但我不确定该怎么做。 我使用的是错误的来源，还有其他问题，还是两者兼而有之？
码：
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 = "" + Location + "
" + "" + "Incident Number: " + Incident + "
" + "" + "Date of Occurrence: "+ Date + "
" + ""+ "Date Reported: " + Reported + "
" + "" + "Offense(s): "+ Offense + "
"+ "" + "Nature of Incident: "+ Nature + "
" + ""; //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; } 数据存储在外部数据文件数据中：
[ { "Incident": "PSU201701139", "Occurred": "3/25/17 23:25", "reported": "3/25/17 23:25", "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located", "offenses": "Possession of Small Amount of Marijuana", "location": "Porter Hall", "disposition": "Open", "lat": 40.8008254, "lng": -77.8587917 }, { "Incident": "PSU201701136", "Occurred": "03/25/2017 9:25 PM to 9:30 PM", "reported": "3/25/17 21:31", "nature_of_incident": "Visitor observed highly intoxicated", "offenses": "Public Drunkenness", "location": "Bryce Jordan Center", "disposition": "Open", "lat": 40.8086228, "lng": -77.8642905 }, { "Incident": "PSU201701134", "Occurred": "03/25/2017 8:52 PM to 8:58 PM", "reported": "3/25/17 20:58", "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located", "offenses": "Possession of Small Amount of Marijuana", "location": "Curtin Hall 5Th Floor", "disposition": "Open", "lat": 40.805098, "lng": -77.861208 }, { "Incident": "PSU201701133", "Occurred": "03/25/2017 8:43 PM to 8:47 PM", "reported": "3/25/17 20:47", "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located", "offenses": "Possession of Small Amount of Marijuana", "location": "First Floor Tener Hall", "disposition": "Open", "lat": 40.8062507, "lng": -77.8659939 }, { "Incident": "PSU201701132", "Occurred": "03/23/2017 12:01 AM to 2:00 AM", "reported": "3/25/17 20:43", "nature_of_incident": "Student reported they were assaulted by a known person", "offenses": "Strangulation/Harassment/RFA-Request for Assistance", "location": "Patterson Hall", "disposition": "Open", "lat": 40.7900255, "lng": -77.8749025 }, { "Incident": "PSU201701130", "Occurred": "03/25/2017 8:38 PM to 8:55 PM", "reported": "3/25/17 20:41", "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located", "offenses": "Possession of Small Amount of Marijuana", "location": "McKee Hall", "disposition": "Open", "lat": 40.7963782, "lng": -77.8701405 }, { "Incident": "PSU201701030", "Occurred": "03/19/2017 8:00 PM to 10:00 PM", "reported": "3/19/17 23:13", "nature_of_incident": "Student reported the theft of their unattended personal property", "offenses": "Theft/$50-$200/From Building", "location": "Hartranft Hall", "disposition": "Open", "lat": 40.8001538, "lng": -77.8600272 }, { "Incident": "PSU201701031", "Occurred": "03/15/2017 12:00 PM to 8:00 PM", "reported": "3/19/17 19:04", "nature_of_incident": "Employee reported the theft of unsecured personal property", "offenses": "Theft/Over $200/From Building", "location": "Redifer Cmns", "disposition": "Open", "lat": 40.7995177, "lng": -77.8581232 }, { "Incident": "PSU201701026", "Occurred": "03/18/2017 11:40 PM to 11:45 PM", "reported": "3/18/17 23:42", "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located", "offenses": "Possession of Small Amount of Marijuana", "location": "Stone Hall", "disposition": "Open", "lat": 40.8070745, "lng": -77.8638751 }, { "Incident": "PSU201701022", "Occurred": "03/18/2017 8:00 PM to 8:20 PM", "reported": "3/18/17 20:23", "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located", "offenses": "Possession of Small Amount of Marijuana", "location": "Pennypacker Hall - 4Th Floor", "disposition": "Open", "lat": 40.8061624, "lng": -77.8626794 }, { "Incident": "PSU201701018", "Occurred": "03/18/2017 2:00 PM to 2:08 PM", "reported": "3/18/17 14:08", "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located", "offenses": "Possession of Small Amount of Marijuana", "location": "Pennypacker Hall", "disposition": "Open", "lat": 40.8061624, "lng": -77.8626794 }, { "Incident": "PSU201701015", "Occurred": "03/13/2017 3:31 PM to 03/18/2017 7:00 AM", "reported": "3/18/17 10:02", "nature_of_incident": "Employee reported accidental damage to University property", "offenses": "RFA-Request for Assistance", "location": "Hub Book Store", "disposition": "Closed", "lat": 40.7984565, "lng": -77.8610745 }, { "Incident": "PSU201701014", "Occurred": "3/18/17 9:15", "reported": "3/18/17 9:15", "nature_of_incident": "Visitor reported a two vehicle crash with no injuries", "offenses": "Vehicle Code - Accident", "location": "University Park Airport", "disposition": "Closed", "lat": 40.8517473, "lng": -77.8496788 }, { "Incident": "PSU201701013", "Occurred": "03/18/2017 3:41 AM to 4:05 AM", "reported": "3/18/17 3:45", "nature_of_incident": "Underage student observed highly intoxicated and transported to the hospital", "offenses": "Pur,Cons,Poss, Trans Intox Bev/Health and Safety/RFA-Request for Assistance", "location": "Mifflin Hall", "disposition": "Open", "lat": 40.800492, "lng": -77.8605983 } ]
MarkerCluster的主要问题是您为每个标记创建一个新标记，您想要将它与OMS一样使用，将所有标记添加到同一标记并让它们管理它们。 您还会遇到使用回调加载API的问题，但不是异步，更好，因为您使用依赖于API的第三方库来同步加载所有内容（删除回调并使用onload事件处理程序调用initialize）。
概念certificate小提琴
代码段：
var map var markers = []; 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 }); 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 = "" + Location + "
" + "" + "Incident Number: " + Incident + "
" + "" + "Date of Occurrence: " + Date + "
" + "" + "Date Reported: " + Reported + "
" + "" + "Offense(s): " + Offense + "
" + "" + "Nature of Incident: " + Nature + "
" + ""; //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); } })(marker, data)); markers.push(marker); oms.addMarker(marker); }); var markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' }); }); // }); window.map = map; window.oms = oms; } google.maps.event.addDomListener(window, "load", initialize); var json1 = [{ "Incident": "PSU201701139", "Occurred": "3/25/17 23:25", "reported": "3/25/17 23:25", "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located", "offenses": "Possession of Small Amount of Marijuana", "location": "Porter Hall", "disposition": "Open", "lat": 40.8008254, "lng": -77.8587917 }, { "Incident": "PSU201701136", "Occurred": "03/25/2017 9:25 PM to 9:30 PM", "reported": "3/25/17 21:31", "nature_of_incident": "Visitor observed highly intoxicated", "offenses": "Public Drunkenness", "location": "Bryce Jordan Center", "disposition": "Open", "lat": 40.8086228, "lng": -77.8642905 }, { "Incident": "PSU201701134", "Occurred": "03/25/2017 8:52 PM to 8:58 PM", "reported": "3/25/17 20:58", "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located", "offenses": "Possession of Small Amount of Marijuana", "location": "Curtin Hall 5Th Floor", "disposition": "Open", "lat": 40.805098, "lng": -77.861208 }, { "Incident": "PSU201701133", "Occurred": "03/25/2017 8:43 PM to 8:47 PM", "reported": "3/25/17 20:47", "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located", "offenses": "Possession of Small Amount of Marijuana", "location": "First Floor Tener Hall", "disposition": "Open", "lat": 40.8062507, "lng": -77.8659939 }, { "Incident": "PSU201701132", "Occurred": "03/23/2017 12:01 AM to 2:00 AM", "reported": "3/25/17 20:43", "nature_of_incident": "Student reported they were assaulted by a known person", "offenses": "Strangulation/Harassment/RFA-Request for Assistance", "location": "Patterson Hall", "disposition": "Open", "lat": 40.7900255, "lng": -77.8749025 }, { "Incident": "PSU201701130", "Occurred": "03/25/2017 8:38 PM to 8:55 PM", "reported": "3/25/17 20:41", "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located", "offenses": "Possession of Small Amount of Marijuana", "location": "McKee Hall", "disposition": "Open", "lat": 40.7963782, "lng": -77.8701405 }, { "Incident": "PSU201701030", "Occurred": "03/19/2017 8:00 PM to 10:00 PM", "reported": "3/19/17 23:13", "nature_of_incident": "Student reported the theft of their unattended personal property", "offenses": "Theft/$50-$200/From Building", "location": "Hartranft Hall", "disposition": "Open", "lat": 40.8001538, "lng": -77.8600272 }, { "Incident": "PSU201701031", "Occurred": "03/15/2017 12:00 PM to 8:00 PM", "reported": "3/19/17 19:04", "nature_of_incident": "Employee reported the theft of unsecured personal property", "offenses": "Theft/Over $200/From Building", "location": "Redifer Cmns", "disposition": "Open", "lat": 40.7995177, "lng": -77.8581232 }, { "Incident": "PSU201701026", "Occurred": "03/18/2017 11:40 PM to 11:45 PM", "reported": "3/18/17 23:42", "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located", "offenses": "Possession of Small Amount of Marijuana", "location": "Stone Hall", "disposition": "Open", "lat": 40.8070745, "lng": -77.8638751 }, { "Incident": "PSU201701022", "Occurred": "03/18/2017 8:00 PM to 8:20 PM", "reported": "3/18/17 20:23", "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located", "offenses": "Possession of Small Amount of Marijuana", "location": "Pennypacker Hall - 4Th Floor", "disposition": "Open", "lat": 40.8061624, "lng": -77.8626794 }, { "Incident": "PSU201701018", "Occurred": "03/18/2017 2:00 PM to 2:08 PM", "reported": "3/18/17 14:08", "nature_of_incident": "Resident Assistant reported the odor of marijuana, origin not located", "offenses": "Possession of Small Amount of Marijuana", "location": "Pennypacker Hall", "disposition": "Open", "lat": 40.8061624, "lng": -77.8626794 }, { "Incident": "PSU201701015", "Occurred": "03/13/2017 3:31 PM to 03/18/2017 7:00 AM", "reported": "3/18/17 10:02", "nature_of_incident": "Employee reported accidental damage to University property", "offenses": "RFA-Request for Assistance", "location": "Hub Book Store", "disposition": "Closed", "lat": 40.7984565, "lng": -77.8610745 }, { "Incident": "PSU201701014", "Occurred": "3/18/17 9:15", "reported": "3/18/17 9:15", "nature_of_incident": "Visitor reported a two vehicle crash with no injuries", "offenses": "Vehicle Code - Accident", "location": "University Park Airport", "disposition": "Closed", "lat": 40.8517473, "lng": -77.8496788 }, { "Incident": "PSU201701013", "Occurred": "03/18/2017 3:41 AM to 4:05 AM", "reported": "3/18/17 3:45", "nature_of_incident": "Underage student observed highly intoxicated and transported to the hospital", "offenses": "Pur,Cons,Poss, Trans Intox Bev/Health and Safety/RFA-Request for Assistance", "location": "Mifflin Hall", "disposition": "Open", "lat": 40.800492, "lng": -77.8605983 }];
html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }