如何创建“大小圆圈"? Google地图图例 [英] How to create "sized circles" legend for Google Maps

问题描述

我有一个自定义的Google地图，该地图使用GeoJSON文件中的数据创建了尺寸较大的圆圈.我需要做的是创建一个图例/键来解释每个圆圈的大小

I have a custom google map that creates sized circles using data from a GeoJSON file. What I need to do is create a legend/key to explain what the sizes of each circle represents

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

I've tried following Google's guide on creating a custom legend (https://developers.google.com/maps/documentation/javascript/adding-a-legend), which works fine. However, I don't know how to utilize the circle size for the key instead of the icons. That is where I'm stuck.

下面是在我的地图上生成圆的函数.我只希望键显示缩放的圆圈.

Below is the function that generates the circles on my map. I just want the key to display the scaled circles.

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

请让我知道是否需要更多解决方法.

Please let me know if more is needed to solve this.

推荐答案

一种选择是替换

One option would be to replace the image URLs from the Google example with SVG circles with the appropriate color and fillOpacity (and some scal.

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 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地图图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！