Question

在我的Google地图上，我要显示的只是

整个地图的背景色
以我选择的颜色划分县界
国家/地区用我选择的颜色填充
国家名称标签
省名标签
地区（城市）名称标签

除了3，我都知道了：

{featureType:'all', elementType: 'geometry', stylers: [{color: '#242f3e'}]}
{featureType: 'administrative.country', elementType: 'geometry.stroke', stylers: [{color: '#242f3e'}]}
???????我如何做到这一点?????
{feature.type: 'administrative.country', elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}
{feature.type: 'administrative.province', elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}
{feature.type: 'administrative.locality', elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}

但是我遇到了无法实现的问题。 3.这就是问题。

如果您可以测试在给定的JSFiddle中给出的解决方案，那就太好了，因为有时人们会给出甚至无效的建议。

Answer 1

您需要在所有国家/地区加载GeoJSON并附加样式。

您可以访问此网站here，选择所有世界区域并选择中等分辨率，然后构建一个包含所有世界国家的自定义GeoJson 。

您可以根据需要将其重命名。我将其重命名为country.geo.json。

加载GoogleMaps之后，导入GeoJson并为其添加样式：只要确保您将此html与country.geo.json放在同一位置即可。

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 34.397, lng: 150.644},
          zoom: 2
        });
        // here import the GeoJson holding all the countries
        map.data.loadGeoJson('countries.geo.json');
        // here attach a style - I gave red fill and white stroke 
        map.data.setStyle(function(feature) {
            return /** @type {google.maps.Data.StyleOptions} */({
                fillColor: 'red',
                strokeColor: 'white',
                strokeWeight: 2
            });
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY&callback=initMap"
    async defer></script>
  </body>
</html>

最后但并非最不重要的一点是，我想提到API密钥不是我的。我从developers.google.com here

借来的

使用Google地图，如何用某种颜色填充所有国家/地区？

1 个答案: