javascript - Google map API - 标记聚类不起作用

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

我目前正在开发一个 Google map ，它将显示许多 map 标记，数据位于外部 JSON 文件中的一系列数组中。它也使用 Spiderfier 来处理重叠的标记，因为它们具有相同的坐标。我正在尝试实现标记聚类，以使 map 在缩小时不那么困惑，但是聚类并未发生。开发人员工具上的控制台不断用markerclusterer.js源代码记录“未捕获的类型错误”，声称它无法设置属性或说某些东西不是函数，但我不太确定该怎么办。我是否使用了错误的来源，是否还有其他问题，或者两者兼而有之？

代码:

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

最佳答案

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

proof of concept fiddle

screenshot of result

代码片段:

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
}];
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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>

关于javascript - Google map API - 标记聚类不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43792195/

上一篇：javascript - 通过尖括号中的 id 获取元素

下一篇：javascript - 从对象访问属性时出现控制台错误

相关文章：

Android Phonegap 错误 : google is not defined

javascript - 离线使用谷歌地图(Js Api)

Javascript - 在 DOM 元素上制作原型(prototype)

Javascript 继承 : How to

javascript - 我需要帮助，使用 JQuery 在字段留空时提醒用户

google-maps - 在 map.google.com 之外使用 Google Map v3 缩放动画和提示

javascript - 页面加载时立即触发委托(delegate)事件 onchange

javascript - 将复选框文本值保存到数组

jquery - 如何从此链接获取json数据

javascript - 如何查找字符串中两个字符之间的多个值 - JS

©2024 IT工具网  联系我们