Google Maps Marker群集无法正常工作

编程问答 2022-10-26

问题描述

我从此代码段here中获得了此代码，该代码工作正常并且做了一些改动。但是现在我想将标记聚类添加到地图上，例如this，但是我什么也没做。 我加了

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

解决方法

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

  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]);
    3. 之后）

我收到您报告的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数组）

enter image description here

工作代码段： 

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

google-maps-api-3htmljavascript

相关问答

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起...
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct...