根据其中的标记设置标记群集图标 [英] set marker cluster icon depending on markers inside it

问题描述

我整理了一张带有聚类的地图.

放大

放大红色的"17"集群

代码段:

  function initMap(){var map = new google.maps.Map(document.getElementById('map')，{中心:新的google.maps.LatLng(51，4)，变焦:6mapTypeControlOptions:路线图"});var markers = [];//随机制作红色，黄色，蓝色标记对于(var i = 0; i< 50; i ++){var latLng = new google.maps.LatLng(51.11-Math.random()，4.11-Math.random());var marker = new google.maps.Marker({位置:latLng，图标:"http://maps.google.com/mapfiles/ms/micons/green.png"，标签:" + i，地图:地图});markers.push(marker);}对于(var i = 0; i< 20; i ++){var latLng = new google.maps.LatLng(51.11-Math.random()，4.11-Math.random());var marker = new google.maps.Marker({位置:latLng，图标:"http://maps.google.com/mapfiles/ms/micons/yellow.png"，标签:" + i，地图:地图});markers.push(marker);}对于(var i = 0; i< 5; i ++){var latLng = new google.maps.LatLng(51.11-Math.random()，4.11-Math.random());var marker = new google.maps.Marker({位置:latLng，图标:"http://maps.google.com/mapfiles/ms/micons/red.png"，标签:" + i，地图:地图});markers.push(marker);}//将丛集图示与标记配对var calc = function(markers，numStyles){//默认为蓝色var maximumPriorityColor = 1;对于(var i = 0; i< markers.length; i ++){如果(markers [i] .getIcon().indexOf("red.png")> -1){//如果任何标记为红色，将为红色，可以返回结果返回 {文字:markers.length，指数:3};//红色的索引}否则，如果(markers [i] .getIcon().indexOf("yellow.png")> -1){//如果任何标记为黄色，则将其更新为黄色(如果为蓝色)如果(highestPriorityColor< 2)maximumPriorityColor = 2;//黄色的索引}/*否则，如果(markers [i] .getIcon().indexOf("green.png")> -1){//忽略绿色标记(将其保留为任何颜色，默认为蓝色)} */}//完成所有标记后返回结果返回 {文字:markers.length，索引:最高优先级颜色};//所选簇的索引}//定义集群图标var mcOptions = {gridSize:50，maxZoom:15样式:[{高度:50，网址:"https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m1.png"，宽度:50}，{高度:50，网址:"https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m2.png"，宽度:50}，{高度:50，网址:"https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m3.png"，宽度:50}]};var markerCluster = new MarkerClusterer(map，markers，mcOptions);markerCluster.setCalculator(calc);}  

  #map {高度:80％;}/*可选:使示例页面填充窗口.*/html，身体 {高度:100％;边距:0;填充:0;}  

 <脚本延迟src ="https://maps.googleapis.com/maps/api/js?v=3.42&key= AIzaSyA4PP1O36qWCzer8K3VFyjf0uxRs4WVNFo& callback = initMap</script>< script src ="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>< div id ="map"></div>  

I've put together a map with clusters. The idea was that cluster's color should depend on the color of markers inside: if there is a red marker, cluster is red; no red, but there is a yellow marker, cluster is yellow; no red and yellow markers, cluster is blue.

This only works as expected at specific zoom levels. Fully zoomed out it shows blue cluster, however there are red markers in there, so I expect a red cluster. When I start to zoom in and the map shows multiple clusters, most look right, but in some instances this offending behavior repeats, it will group red/yellow/blue markers into blue cluster, I expect red. Same with Yellow + Blue markers should form a yellow cluster, not blue.

According to this setCalculator function runs for each cluster individually, therefore I was expecting consistent behavior, but instead we have mixed results.

    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(51, 4),
            zoom:6,
            mapTypeControlOptions:"roadmap"
        });

        var markers = [];

        // make random red, yellow, blue markers
        for (var i = 0; i < 20; i++) {
            var latLng = new google.maps.LatLng(51.11 - Math.random(), 4.11 - Math.random());
            var marker = new google.maps.Marker({
                position: latLng, 
                icon: 'http://maps.google.com/mapfiles/ms/micons/green.png',
                label: i,
                map: map
            });
            markers.push(marker);
        }
        for (var i = 0; i < 20; i++) {
            var latLng = new google.maps.LatLng(51.11 - Math.random(),4.11 - Math.random());
            var marker = new google.maps.Marker({
                position: latLng, 
                icon: 'http://maps.google.com/mapfiles/ms/micons/yellow.png',
                label: i,
                map: map
            });
            markers.push(marker);
        }
        for (var i = 0; i < 20; i++) {
            var latLng = new google.maps.LatLng(51.11 - Math.random(),4.11 - Math.random());
            var marker = new google.maps.Marker({
                position: latLng, 
                icon: 'http://maps.google.com/mapfiles/ms/micons/red.png',
                label: i,
                map: map
            });
            markers.push(marker);
        }

        // match cluster icon to markers
        var calc = function(markers, numStyles) {
            for (var i = 0; i < markers.length; i++) {
                if (markers[i].getIcon().indexOf("red.png") > -1) {
                    return {text: markers.length, index: 3}; // index of red
                }else if (markers[i].getIcon().indexOf("yellow.png") > -1) {
                return {text: markers.length, index: 2}; // index of yellow
                }else if (markers[i].getIcon().indexOf("green.png") > -1) {
                    return {text: markers.length, index: 1};// index of blue
                }
            }
        }

        // define cluster icons
        var mcOptions = {gridSize: 50, maxZoom: 15, styles: [{
                height: 50,
                url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m1.png",
                width: 50
            },
            {
                height: 50,
                url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m2.png",
                width: 50
            },
            {
                height: 50,
                url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m3.png",
                width: 50
            }]
        };
        var markerCluster = new MarkerClusterer(map, markers, mcOptions);
        markerCluster.setCalculator(calc);
    }

    #map {
            height: 80%;
          }
          /* Optional: Makes the sample page fill the window. */
          html, body {
            height: 100%;
            margin: 0;
            padding: 0;
          }

    <script defer src="https://maps.googleapis.com/maps/api/js?v=3.42&key=AIzaSyA4PP1O36qWCzer8K3VFyjf0uxRs4WVNFo&callback=initMap"></script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

    <div id="map"></div>

UPDATE: changed marker icons to be more distinguishable from cluster icons.

解决方案

One of your issues is your calculator function. You want it to return "red" if there are any red markers in the cluster, yellow if there are any yellow markers but no red ones, and blue otherwise. Write the code to do that:

// match cluster icon to markers
var calc = function(markers, numStyles) {
    // default to blue
    var highestPriorityColor = 1;
    for (var i = 0; i < markers.length; i++) {
        if (markers[i].getIcon().indexOf("red.png") > -1) {
            // if any markers are red, will be red, can return result
            return {text: markers.length, index: 3}; // index of red
        } else if (markers[i].getIcon().indexOf("yellow.png") > -1) {
            // if any markers are yellow, update it to yellow if it is blue
            if (highestPriorityColor < 2)
                highestPriorityColor = 2; // index of yellow
        } /* else if (markers[i].getIcon().indexOf("green.png") > -1) {
            // ignore green markers (leave it whatever color it is, defaults to blue)
        } */
    }
    // return result once complete processing all the markers
    return {text: markers.length, index: highestPriorityColor}; // index of chosen cluster
}

zoomed out

zoom in

zoom in on red "17" cluster

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(51, 4),
    zoom: 6,
    mapTypeControlOptions: "roadmap"
  });

  var markers = [];

  // make random red, yellow, blue markers
  for (var i = 0; i < 50; i++) {
    var latLng = new google.maps.LatLng(51.11 - Math.random(), 4.11 - Math.random());
    var marker = new google.maps.Marker({
      position: latLng,
      icon: 'http://maps.google.com/mapfiles/ms/micons/green.png',
      label: "" + i,
      map: map
    });
    markers.push(marker);
  }
  for (var i = 0; i < 20; i++) {
    var latLng = new google.maps.LatLng(51.11 - Math.random(), 4.11 - Math.random());
    var marker = new google.maps.Marker({
      position: latLng,
      icon: 'http://maps.google.com/mapfiles/ms/micons/yellow.png',
      label: "" + i,
      map: map
    });
    markers.push(marker);
  }
  for (var i = 0; i < 5; i++) {
    var latLng = new google.maps.LatLng(51.11 - Math.random(), 4.11 - Math.random());
    var marker = new google.maps.Marker({
      position: latLng,
      icon: 'http://maps.google.com/mapfiles/ms/micons/red.png',
      label: "" + i,
      map: map
    });
    markers.push(marker);
  }

  // match cluster icon to markers
  var calc = function(markers, numStyles) {
    // default to blue
    var highestPriorityColor = 1;
    for (var i = 0; i < markers.length; i++) {
      if (markers[i].getIcon().indexOf("red.png") > -1) {
        // if any markers are red, will be red, can return result
        return {
          text: markers.length,
          index: 3
        }; // index of red
      } else if (markers[i].getIcon().indexOf("yellow.png") > -1) {
        // if any markers are yellow, update it to yellow if it is blue
        if (highestPriorityColor < 2)
          highestPriorityColor = 2; // index of yellow
      }
      /* else if (markers[i].getIcon().indexOf("green.png") > -1) {
                 // ignore green markers (leave it whatever color it is, defaults to blue)
             } */
    }
    // return result once complete processing all the markers
    return {
      text: markers.length,
      index: highestPriorityColor
    }; // index of chosen cluster
  }

  // define cluster icons
  var mcOptions = {
    gridSize: 50,
    maxZoom: 15,
    styles: [{
        height: 50,
        url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m1.png",
        width: 50
      },
      {
        height: 50,
        url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m2.png",
        width: 50
      },
      {
        height: 50,
        url: "https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m3.png",
        width: 50
      }
    ]
  };
  var markerCluster = new MarkerClusterer(map, markers, mcOptions);
  markerCluster.setCalculator(calc);
}

#map {
  height: 80%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script defer src="https://maps.googleapis.com/maps/api/js?v=3.42&key=AIzaSyA4PP1O36qWCzer8K3VFyjf0uxRs4WVNFo&callback=initMap"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

<div id="map"></div>

这篇关于根据其中的标记设置标记群集图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！