时间戳

首页 > 解决方案 > 谷歌地图标记聚类不起作用

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

问题描述

我从这里的这段代码片段中得到了这段代码，它工作得很好并且做了一点改动。但是现在我想像这样将标记聚类添加到地图中，但我什么也没做。我添加了

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

到头部和

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

在“ markers1 =”前面，但后来我得到了错误

Uncaught TypeError: e.getDraggable is not a function

我不知道为什么没有标记集群，这段代码在这里不起作用。在我的页面上，它工作正常。

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>

标签： javascripthtmlgoogle-maps-api-3

解决方案

当我将指定的代码添加到发布的代码段时：

  1. <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'});到gmarkers1数组可用后（循环调用后addMarker(markers1[i]);

我收到您报告的 javascript 错误：Uncaught TypeError: e.getDraggable is not a function

那是因为构造函数需要三个参数：

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

（您缺少第一个map论点）

更新

您问题中更新代码的另外两个问题：

  1. 构造函数在MarkerClusterer错误的位置（它在initialize函数之外，它在创建标记之前运行。
  2. markers1数组是要添加到的错误类型，MarkerClusterer它们必须是google.maps.Marker对象（gmarkers1数组）

在此处输入图像描述

工作代码片段：

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>

推荐阅读