如何为 Google 地图创建“大小圆圈”图例

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>