Как создать легенду "размером с круги" для Карт Google

Question

У меня есть пользовательская карта Google, которая создает круги размером, используя данные из файла GeoJSON.Что мне нужно сделать, это создать легенду / ключ, чтобы объяснить, что размеры каждого круга представляют

Я пытался следовать руководству 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

Один из вариантов - заменить URL-адреса изображений из примера Google на кружки SVG с соответствующим цветом и fillOpacity (и некоторыми масштабами.

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>