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

Question

In my Google map, all I want to show is 在我的Google地图上，我要显示的是

a background color for the entire map 整个地图的背景色
counties boundaries in a color of my choice 县界以我选择的颜色
countries area filled with a color of my choice 国家区域充满了我选择的颜色
Labels for country names 国名标签
Labels for province names 省名标签
Labels for locality (city) names 地点（城市）名称标签

Except 3, I have them all figured out: 除了3，我都想通了：

{featureType:'all', elementType: 'geometry', stylers: [{color: '#242f3e'}]}
{featureType: 'administrative.country', elementType: 'geometry.stroke', stylers: [{color: '#242f3e'}]}
??????? ??????? HOW DO i ACHIEVE THIS ????? 我如何做到这一点？
{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'}]}

But I am having problem achieving no. 但是我遇到了无法实现的问题。 3. And that is the question. 3.这就是问题。

Please it will be great if you can test the solution you give in the JSFiddle given, because sometimes people give suggestions that don't even work. 如果可以测试您在JSFiddle中提供的解决方案，那将是很棒的，因为有时人们会给出甚至无效的建议。

Answer 1

You need to load a GeoJSON with all countries and attach a style. 您需要在所有国家/地区加载GeoJSON并附加样式。

You can visit this site here select all world regions and select for instance medium resolution and build a custom GeoJson containing all world countries . 您可以在这里访问此站点，选择所有世界区域，然后选择中等分辨率，并构建一个包含所有世界国家的自定义GeoJson 。

You can rename it as you desire. 您可以根据需要将其重命名。 I renamed it as countries.geo.json. 我将其重命名为country.geo.json。

Following load a GoogleMaps, import the GeoJson and attach a style to it: Just make sure you have this html in the same place as countries.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>

Last but not least I want to mention that the API key is not mine. 最后但并非最不重要的一点是，我想提到API密钥不是我的。 I borrowed it from developers.google.com here 我在这里从developers.google.com借来的

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

问题描述

1 个解决方案

解决方案1
2 2018-08-05 16:12:16

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

问题描述

1 个解决方案

解决方案1 2 2018-08-05 16:12:16

解决方案1
2 2018-08-05 16:12:16