Google Maps API - 标记群集无法正常工作

时间：2017-05-04 20:25:41

标签： javascript jquery google-maps google-maps-api-3 markerclusterer

我目前正在开发一个将显示许多地图标记的Google地图，数据位于外部JSON文件中的一系列数组中。它也使用Spiderfier来重叠标记，因为它们具有相同的坐标。我正在尝试实现Marker聚类，以便在缩小时使地图变得更加混乱，但是没有发生聚类。开发人员工具上的控制台使用markerclusterer.js源代码记录“Uncaught TypeErrors”，声称它无法设置属性或说某些东西不是函数，但我不确定该如何处理。我是否使用了错误的来源，还有其他问题还是两者兼而有之？

代码：

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

数据存储在外部数据文件中 数据：

[
    {
		"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
	}
]

1 个答案:

答案 0 :(得分：1)

MarkerCluster的主要问题是您是为每个标记创建一个新标记，您想要将它与OMS一样使用，将所有标记添加到同一标记并让它们管理它们。您还会遇到使用回调加载API的问题，但不是异步，更好，因为您使用依赖于API的第三方库来同步加载所有内容（删除回调并使用onload事件处理程序调用initialize）。

proof of concept fiddle

screenshot of result

代码段

＆＃13;
＆＃13; 
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 = "<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);

        }
      })(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
}];
＆＃13; 
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<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>
<div id="map_canvas"></div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题