Google地图会显示省份行

时间:2016-08-17 11:19:04

标签: google-maps

使用谷歌地图我有点困惑。

我想用国家和省份线创建地图。 我使用样式来创建这些线条。我想创建这样的东西(我在更改时将屏幕从7缩放到6):

with_lines

但我只能做到这一点:

without_lines

要获得省线,我必须放大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

1 个答案:

答案 0 :(得分:1)

您无法使用样式更改切片的行为。如果省级边界不在缩放级别6的图块上,则无法对其进行样式设置。最好的选择是从其他一些数据源(如this)获取缩放级别为6的省界,然后将它们隐藏在缩放级别6之上。

相关问题:Google Maps V3: Draw German State Polygons?

proof of concept fiddle

poland at zoom=5

代码段

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>