如何为 Google 地图创建 "sized circles" 图例

Question

我有一个自定义 google 地图，它使用 GeoJSON 文件中的数据创建大小圆圈。我需要做的是创建一个 legend/key 来解释每个圆圈的大小代表什么

我尝试按照 Google 的指南创建自定义图例 (https://developers.google.com/maps/documentation/javascript/adding-a-legend)，效果很好。但是，我不知道如何使用圆圈大小来代替图标。那就是我被困的地方。

下面是在我的地图上生成圆圈的函数。我只想要显示缩放圆圈的键。

function getCircle(nctcount) {
var nctamt = nctcount;
if (nctamt <= 10) {
    return {
        path: google.maps.SymbolPath.CIRCLE,
        fillOpacity: 1,
        fillColor: 'green',
        scale: 5,
        strokeColor: 'white',
        strokeWeight: .5
    };
}

else if (nctamt <= 100) {
    return {
        path: google.maps.SymbolPath.CIRCLE,
        fillOpacity: .8,
        fillColor: 'green',
        scale: 10,
        strokeColor: 'white',
        strokeWeight: .5
    };
}

else if (nctamt <= 250) {
    return {
        path: google.maps.SymbolPath.CIRCLE,
        fillOpacity: .6,
        fillColor: 'green',
        scale: 15,
        strokeColor: 'white',
        strokeWeight: .5
    };
}

else if (nctamt <= 500) {
    return {
        path: google.maps.SymbolPath.CIRCLE,
        fillOpacity: .4,
        fillColor: 'green ',
        scale: 20,
        strokeColor: 'white',
        strokeWeight: .5
    };
}

else if (nctamt <= 2000) {
    return {
        path: google.maps.SymbolPath.CIRCLE,
        fillOpacity: .2,
        fillColor: 'green',
        scale: 25,
        strokeColor: 'white',
        strokeWeight: .5
    };
}

else {
    return {
        path: google.maps.SymbolPath.CIRCLE,
        fillOpacity: .2,
        fillColor: 'green',
        scale: 35,
        strokeColor: 'white',
        strokeWeight: .5
    };
 }
}

如果需要更多解决此问题，请告诉我。

Answer 1

一种选择是将 Google example 中的图像 URL 替换为具有适当颜色和 fillOpacity（以及一些缩放比例）的 SVG 圆圈。

var legend = document.getElementById('legend');
for (var key in icons) {
  var type = icons[key];
  var name = type.name;
  var icon = type.icon;
  var scale = type.scale;
  var opacity = type.fillOpacity;
  var div = document.createElement('div');
  div.innerHTML = "<img src='data:image/svg+xml;utf8,<svg viewBox=\"0 0 100 100\" height=\""+ 8*scale/8 + "\" width=\""+ 8*scale/8 + "\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"50\" cy=\"50\" r=\"50\" style=\"fill: green; stroke: white; stroke-width: 1;\" opacity=\""+ opacity+ "\"/></svg>'> " + name;
  legend.appendChild(div);
}

map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);

proof of concept fiddle

代码片段：

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 37.090,
      lng: -95.712
    },
    mapTypeId: 'terrain'
  });
  var icons = [];
  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Marker({
      map: map,
      icon: getCircle(citymap[city].population),
      position: citymap[city].center,
    });
    if (!icons[cityCircle.getIcon().scale])
      icons[cityCircle.getIcon().scale] = cityCircle.getIcon();
  }

  var legend = document.getElementById('legend');
  for (var key in icons) {
    var type = icons[key];
    var name = type.name;
    var icon = type.icon;
    var scale = type.scale;
    var opacity = type.fillOpacity;
    var div = document.createElement('div');
    div.innerHTML = "<img src='data:image/svg+xml;utf8,<svg viewBox=\"0 0 100 100\" height=\"" + 8 * scale / 8 + "\" width=\"" + 8 * scale / 8 + "\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"50\" cy=\"50\" r=\"50\" style=\"fill: green; stroke: white; stroke-width: 1;\" opacity=\"" + opacity + "\"/></svg>'> " + name;
    legend.appendChild(div);
  }

  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);

}

function getCircle(nctcount) {
  var nctamt = nctcount;
  if (nctamt <= 10) {
    return {
      path: google.maps.SymbolPath.CIRCLE,
      fillOpacity: 1,
      fillColor: 'green',
      scale: 5,
      strokeColor: 'white',
      strokeWeight: .5,
      name: "<= 10"
    };
  } else if (nctamt <= 100) {
    return {
      path: google.maps.SymbolPath.CIRCLE,
      fillOpacity: .8,
      fillColor: 'green',
      scale: 10,
      strokeColor: 'white',
      strokeWeight: .5,
      name: "<= 100"
    };
  } else if (nctamt <= 250) {
    return {
      path: google.maps.SymbolPath.CIRCLE,
      fillOpacity: .6,
      fillColor: 'green',
      scale: 15,
      strokeColor: 'white',
      strokeWeight: .5,
      name: "<= 250"
    };
  } else if (nctamt <= 500) {
    return {
      path: google.maps.SymbolPath.CIRCLE,
      fillOpacity: .4,
      fillColor: 'green ',
      scale: 20,
      strokeColor: 'white',
      strokeWeight: .5,
      name: "<= 500"
    };
  } else if (nctamt <= 2000) {
    return {
      path: google.maps.SymbolPath.CIRCLE,
      fillOpacity: .2,
      fillColor: 'green',
      scale: 25,
      strokeColor: 'white',
      strokeWeight: .5,
      name: "<= 2000"
    };
  } else {
    return {
      path: google.maps.SymbolPath.CIRCLE,
      fillOpacity: .2,
      fillColor: 'green',
      scale: 35,
      strokeColor: 'white',
      strokeWeight: .5,
      name: ">2000"
    };
  }
}

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {
      lat: 41.878,
      lng: -87.629
    },
    population: 8
  },
  newyork: {
    center: {
      lat: 40.714,
      lng: -74.005
    },
    population: 80
  },
  losangeles: {
    center: {
      lat: 34.052,
      lng: -118.243
    },
    population: 200
  },
  vancouver: {
    center: {
      lat: 49.25,
      lng: -123.1
    },
    population: 450
  },
  dallas: {
    center: {
      lat: 32.78,
      lng: -96.80
    },
    population: 1900
  },
  omaha: {
    center: {
      lat: 41.257,
      lng: -95.935
    },
    population: 5000
  }
};

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

#legend {
  font-family: Arial, sans-serif;
  background: #fff;
  padding: 10px;
  margin: 10px;
  border: 3px solid #000;
}

#legend h3 {
  margin-top: 0;
}

#legend img {
  vertical-align: middle;
}

<div id="map"></div>
<div id="legend"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>

如何为 Google 地图创建 "sized circles" 图例

How to create "sized circles" legend for Google Maps

javascript

google-maps-api-3