谷歌地图显示省线答案

【问题标题】：Google Maps display province lines谷歌地图显示省线
【发布时间】：2016-08-17 11:19:03
【问题描述】：

我对使用 Google 地图有点困惑。

我想创建带有国家和省线的地图。我使用样式器来创建这些线条。我想创建这样的东西（我在从 7 到 6 的缩放期间制作了屏幕）：

但我只能做到这一点：

要获得省线，我必须放大 7 级（我看不到整个波兰），但我想在所有缩放级别上显示它（高于 7 - 6,5 等）

我的样式器片段：

styles:[
  {
    "featureType": "administrative",
    "elementType": "labels.text",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.province",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "invert_lightness": true
      },
      {
        "visibility": "on"
      }
    ]
  },
  {
    "featureType": "landscape",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "landscape.man_made",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "landscape.natural.landcover",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "on"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "on"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "on"
      }
    ]
  }
]

fiddle demonstrating current behavior

【问题讨论】：

你能把样式器完整的贴出来吗？

标签： google-maps

【解决方案1】：

您无法通过样式更改图块的行为。如果省份边界不在缩放级别 6 的图块上，则无法设置它们的样式。最好的选择是从其他一些数据源（如this）获取缩放级别 6 的省份边界，然后将它们隐藏在缩放级别 6 以上。

proof of concept fiddle

代码 sn-p：

var geocoder;
var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: styles
    });
  var FT_TableID = 420419;
  var FT_Query = "SELECT 'kml_4326' FROM " + FT_TableID + " WHERE 'name_0' = 'Poland';";
  var FT_Options = {
    suppressInfoWindows: true,
    query: FT_Query
  };
  var boundaries = new google.maps.FusionTablesLayer(FT_TableID, FT_Options);
  boundaries.setMap(map);
  google.maps.event.addListener(map, 'zoom_changed', function() {
    if ((map.getZoom() > 6) || (map.getZoom() < 2)) {
      boundaries.setMap(null);
    } else {
      boundaries.setMap(map);
    }
    document.getElementById('zoom').innerHTML = "zoom= " + map.getZoom();
  });
  geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': "Poland"
  }, function(results, status) {
    if (status === 'OK') {
      map.fitBounds(results[0].geometry.viewport);
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

}
google.maps.event.addDomListener(window, "load", initialize);
var styles = [{
  "featureType": "administrative",
  "elementType": "labels.text",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "administrative.province",
  "elementType": "geometry.stroke",
  "stylers": [{
    "invert_lightness": true
  }, {
    "visibility": "on"
  }]
}, {
  "featureType": "landscape",
  "elementType": "geometry",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "landscape",
  "elementType": "labels",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "landscape.man_made",
  "elementType": "geometry",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "landscape.natural.landcover",
  "elementType": "geometry",
  "stylers": [{
    "visibility": "on"
  }]
}, {
  "featureType": "poi",
  "elementType": "geometry",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "poi",
  "elementType": "labels",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "road",
  "elementType": "all",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "transit",
  "elementType": "geometry",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "transit",
  "elementType": "labels",
  "stylers": [{
    "visibility": "off"
  }]
}, {
  "featureType": "water",
  "elementType": "geometry",
  "stylers": [{
    "visibility": "on"
  }]
}, {
  "featureType": "water",
  "elementType": "labels",
  "stylers": [{
    "visibility": "on"
  }]
}];

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<div id="zoom"></div>
<div id="map_canvas"></div>

【讨论】：