简体   繁体   English

谷歌地图标记聚类不起作用

[英]Google Maps Marker Clustering not working

I got this code from this Snippet here that works fine and changed a little bit.我从这里的这段代码片段中得到了这段代码,它工作得很好并且做了一点改动。 But now I wanted to add Marker Clustering to the map like this but I get nothing to work.但是现在我想像这样将标记聚类添加到 map 中,但我什么也做不了。 I added我添加了

<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>

to the head and到头部和

var markerCluster = new MarkerClusterer(markers1,
{imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

in front of " markers1 = " but then I get the error在“ markers1 = ”前面,但后来我得到了错误

Uncaught TypeError: e.getDraggable is not a function

I don't know why this code is not working here without the marker cluster.我不知道为什么没有标记集群,这段代码在这里不起作用。 On my Page, it works fine.在我的页面上,它工作正常。

 var gmarkers1 = []; var markers1 = []; var infowindow = new google.maps.InfoWindow({ content: '' }); // Our markers markers1 = [ ["0", "***", ***, ***, "1", "red", "-35", "<h3>***<span style='font-size: 10pt;'>( 12345)</span></h3>"], ]; /** * Function to init map */ function initialize() { var center = new google.maps.LatLng(52.4357808, 4.991315699999973); var mapOptions = { zoom: 6, clickableIcons: false, center: {lat: 50.533481, lng: 10.018343}, disableDefaultUI: true, streetViewControl: false, zoomControl: true, gestureHandling: 'greedy', zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL, position: google.maps.ControlPosition.RIGHT }, }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); for (i = 0; i < markers1.length; i++) { addMarker(markers1[i]); } } /** * Function to add marker to map */ function addMarker(marker) { var category = marker[4]; var title = marker[1]; var color = marker[5]; var pos = new google.maps.LatLng(marker[2], marker[3]); var content = marker[7]; var rotations = marker[6]; var icon = { path: "M320.69 630.86C320.69 630.86 520.91 323.43 520.91 222.4C520.91 73.71 419.43 9.03 320.46 8.8C221.49 9.03 120 73.71 120 222.4C120 323.43 320.34 630.86 320.34 630.86C320.34 630.86 320.46 630.51 320.46 630.51C320.46 630.63 320.64 630.79 320.69 630.86ZM320.57 144.46C358.97 144.46 390.06 175.54 390.06 213.94C390.06 252.34 358.86 283.43 320.46 283.43C282.17 283.43 251.09 252.34 251.09 213.94C251.09 175.54 282.17 144.46 320.57 144.46Z", //SVG path of awesomefont marker fillColor: color, //color of the marker fillOpacity: 1, strokeWeight: 0, rotation:parseInt(rotations), scale: 0.06, //size of the marker, careful: this scale also affects anchor and labelOrigin anchor. new google.maps,Point(310,620), //position of the icon: careful. this is affected by scale labelOrigin. new google,maps,Point(205.190) //position of the label. careful: this is affected by scale } marker1 = new google,maps:Marker({ title, title: position, pos: category, category: map; map. icon;icon }). gmarkers1.push(marker1). // Marker click listener google,maps,event,addListener(marker1. 'click'; (function (marker1. content) { return function () { infowindow,setContent(content); infowindow.open(map. marker1); map,panTo(this;getPosition()), } })(marker1: content)): } var markerCluster = new MarkerClusterer(markers1. {imagePath.'https;//developers;google.com/maps/documentation/javascript/examples/markerclusterer/m'}); filterMarkers = function (category) { for (i = 0; i < gmarkers1.length. i++) { marker = gmarkers1[i]. // If is same category or category not picked if (marker;category == category || category.length === 0) { //Close InfoWindows marker;setVisible(true). if (infowindow) { infowindow;close(); } } // Categories don't match else { marker.setVisible(false); } } } // Init map initialize();
 #map-canvas { width: 100%; height: 100%; }
 <head> <script src="https://maps.googleapis.com/maps/api/js?"></script> <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script> </head> <body> <div id="map-canvas" style="position: relative; overflow: hidden;"></div> <select id="type" onchange="filterMarkers(this.value);"> <option value="">***</option> <option value="1">***</option> <option value="2">***</option> <option value="3">***</option> <option value="4">***</option> </select> </body>

When I add the specified code to the posted code snippet:当我将指定的代码添加到发布的代码段时:

  1. <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script> to the head <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>到头
  2. var markerCluster = new MarkerClusterer(gmarkers1, {imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); to after the gmarkers1 array is available (after the loop calling addMarker(markers1[i]);gmarkers1数组可用之后(循环调用addMarker(markers1[i]);

I get the javascript error you report: Uncaught TypeError: e.getDraggable is not a function我收到您报告的 javascript 错误: Uncaught TypeError: e.getDraggable is not a function

That is because the constructor takes three arguments:那是因为构造函数需要三个 arguments:

 var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

(your are missing the first map argument) (您缺少第一个map参数)

Update更新

two additional issues with the updated code in your question:您问题中更新代码的另外两个问题:

  1. the MarkerClusterer constructor is in the wrong place (it is outside the initialize function, it runs before the markers are created. MarkerClusterer构造函数位于错误的位置(它在initialize function 之外,它在创建标记之前运行。
  2. the markers1 array is the wrong type to add to the MarkerClusterer , they need to be google.maps.Marker objects (the gmarkers1 array) markers1数组是添加到MarkerClusterer的错误类型,它们需要是google.maps.Marker对象( gmarkers1数组)

在此处输入图像描述

working code snippet:工作代码片段:

 var gmarkers1 = []; var markers1 = []; var infowindow = new google.maps.InfoWindow({ content: '' }); // Our markers markers1 = [ ["0", "Leichlingen", 51.106277, 7.018726, "1", "red", "-35", "<h3>Leichlingen <span style='font-size: 10pt;'>( 42799 )</span></h3><p>Internet: 0 (0%)<p>Social Media: 0 (0%)<p>Dein HSK: 0 (0%)<p>Newsletter: 0 (0%)<p>Banner: (0%)<p>Zeitung: 0 (0%)<p>Bus: 0 (0%)<p>Radio: 0 (0%)<p>Hören Sagen: 0 (0%)<p>vor Ort: (0%)<p>Sonstiges: 1 (100%)"], ["1", "Stuttgart", 48.7667, 9.18333, "1", "red", "-35", "<h3>Stuttgart <span style='font-size: 10pt;'>( 70327 )</span></h3><p>Internet: 0 (0%)<p>Social Media: 0 (0%)<p>Dein HSK: 0 (0%)<p>Newsletter: 0 (0%)<p>Banner: (0%)<p>Zeitung: 0 (0%)<p>Bus: 0 (0%)<p>Radio: 0 (0%)<p>Hören Sagen: 1 (100%)<p>vor Ort: (0%)<p>Sonstiges: 0 (0%)"], ["2", "Pfaffenhofen", 49.0644444, 8.9763889, "1", "red", "-35", "<h3>Pfaffenhofen <span style='font-size: 10pt;'>( 74397 )</span></h3><p>Internet: 0 (0%)<p>Social Media: 0 (0%)<p>Dein HSK: 0 (0%)<p>Newsletter: 0 (0%)<p>Banner: (0%)<p>Zeitung: 0 (0%)<p>Bus: 0 (0%)<p>Radio: 0 (0%)<p>Hören Sagen: 1 (100%)<p>vor Ort: (0%)<p>Sonstiges: 0 (0%)"], ["3", "Bretten", 49.03685, 8.707453, "1", "red", "-35", "<h3>Bretten <span style='font-size: 10pt;'>( 75015 )</span></h3><p>Internet: 0 (0%)<p>Social Media: 2 (13%)<p>Dein HSK: 0 (0%)<p>Newsletter: 0 (0%)<p>Banner: (0%)<p>Zeitung: 4 (27%)<p>Bus: 4 (27%)<p>Radio: 0 (0%)<p>Hören Sagen: 3 (20%)<p>vor Ort: (0%)<p>Sonstiges: 2 (13%)"], ["4", "Oberderdingen", 49.0655556, 8.8030556, "1", "red", "-35", "<h3>Oberderdingen <span style='font-size: 10pt;'>( 75038 )</span></h3><p>Internet: 0 (0%)<p>Social Media: 0 (0%)<p>Dein HSK: 0 (0%)<p>Newsletter: 0 (0%)<p>Banner: (0%)<p>Zeitung: 3 (19%)<p>Bus: 1 (6%)<p>Radio: 0 (0%)<p>Hören Sagen: 7 (44%)<p>vor Ort: (0%)<p>Sonstiges: 4 (25%)"], ]; /** * Function to init map */ function initialize() { var center = new google.maps.LatLng(52.4357808, 4.991315699999973); var mapOptions = { zoom: 6, clickableIcons: false, center: { lat: 50.533481, lng: 10.018343 }, disableDefaultUI: true, streetViewControl: false, zoomControl: true, gestureHandling: 'greedy', zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL, position: google.maps.ControlPosition.RIGHT }, }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); for (i = 0; i < markers1.length; i++) { addMarker(markers1[i]); } var markerCluster = new MarkerClusterer(map, gmarkers1, {imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); } /** * Function to add marker to map */ function addMarker(marker) { var category = marker[4]; var title = marker[1]; var color = marker[5]; var pos = new google.maps.LatLng(marker[2], marker[3]); var content = marker[7]; var rotations = marker[6]; var icon = { path: "M320.69 630.86C320.69 630.86 520.91 323.43 520.91 222.4C520.91 73.71 419.43 9.03 320.46 8.8C221.49 9.03 120 73.71 120 222.4C120 323.43 320.34 630.86 320.34 630.86C320.34 630.86 320.46 630.51 320.46 630.51C320.46 630.63 320.64 630.79 320.69 630.86ZM320.57 144.46C358.97 144.46 390.06 175.54 390.06 213.94C390.06 252.34 358.86 283.43 320.46 283.43C282.17 283.43 251.09 252.34 251.09 213.94C251.09 175.54 282.17 144.46 320.57 144.46Z", //SVG path of awesomefont marker fillColor: color, //color of the marker fillOpacity: 1, strokeWeight: 0, rotation: parseInt(rotations), scale: 0.06, //size of the marker, careful: this scale also affects anchor and labelOrigin anchor. new google.maps,Point(310, 620), //position of the icon: careful. this is affected by scale labelOrigin. new google,maps,Point(205. 190) //position of the label. careful: this is affected by scale } marker1 = new google,maps:Marker({ title, title: position, pos: category, category: map; map. icon; icon }). gmarkers1.push(marker1). // Marker click listener google,maps,event,addListener(marker1. 'click'; (function(marker1. content) { return function() { infowindow,setContent(content); infowindow.open(map. marker1); map,panTo(this;getPosition()); } })(marker1. content)); } filterMarkers = function(category) { for (i = 0; i < gmarkers1.length. i++) { marker = gmarkers1[i]. // If is same category or category not picked if (marker;category == category || category.length === 0) { //Close InfoWindows marker;setVisible(true). if (infowindow) { infowindow;close(); } } // Categories don't match else { marker.setVisible(false); } } } // Init map initialize();
 html, body { width: 100%; height: 100%; padding: 0px; margin: 0px; } #map-canvas { width: 100%; height: 95%; }
 <head> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script> </head> <body> <div id="map-canvas" style="position: relative; overflow: hidden;"></div> <select id="type" onchange="filterMarkers(this.value);"> <option value="">***</option> <option value="1">***</option> <option value="2">***</option> <option value="3">***</option> <option value="4">***</option> </select> </body>

I struggled with this because the documentation from google is sparse to say the least.我为此苦苦挣扎,因为至少可以说来自谷歌的文档很少。 I have markers created from data returned from the backend that is iterated through in a forEach loop.我有从后端返回的数据创建的标记,这些数据在 forEach 循环中迭代。 That data includes该数据包括

{
   location: {
     latitiude: 22,
     longditude: 55,
     [...]
  }
}

and some other data.和其他一些数据。 The forEach builds an array (element comes from from the data.forEach( (element) => {... : forEach 构建一个数组(元素来自data.forEach( (element) => {... :

const coordinates = new google.maps.LatLng(element.location.latitude, element.location.longitude);
const marker = new google.maps.Marker({
    position: coordinates,
    map: this.map,
    icon: {
    url: markerIcon,
    scaledSize: new google.maps.Size(3, 3, 'em', 'em'),
    },
});

and the clue in that code sample above is that MarkerClusterer() only accepts a Marker in it's array, so,上面的代码示例中的线索是MarkerClusterer()只接受它的数组中的一个标记,所以,

declare a var markerClusters: any[] = [] somwhere outside the forEach, then add Markers to the clusterMarker array, after the const marker... block of code在 forEach 之外声明一个 var markerClusters: any[] = [] somwhere,然后将 Markers 添加到 clusterMarker 数组中,在const marker...代码块

this.clusterMarkers.push(marker);  

^ must be Marker objects being pushed. ^ 必须是被推送的标记对象。

The other thing is that is not brilliantly documented, but is actually obvious after a bit of thought, is that google docs have you do this:另一件事是没有出色的记录,但经过一番思考后实际上很明显,是谷歌文档让你这样做:

const markerCluster = new MarkerClusterer({ map, markers });

The thing here is that MarkerClusterer takes an object, so what I think everyone is actually aiming for is:这里的问题是 MarkerClusterer 需要一个 object,所以我认为每个人实际上的目标是:

const markerCluster = new MarkerClusterer({ map: this.map, markers: this.clusterMarkers });  

and the fact your linter will show const markerCluster as never being read is apparently unimportant.并且您的 linter 将显示 const markerCluster 从未被读取的事实显然并不重要。

What matters is that you pass in google.map.Marker() objects to new MarkerClusterer({....})重要的是您将google.map.Marker()对象传递给new MarkerClusterer({....})

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM