使用谷歌地图我有点困惑。
我想用国家和省份线创建地图。 我使用样式来创建这些线条。我想创建这样的东西(我在更改时将屏幕从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"
}
]
}
]
答案 0 :(得分:1)
您无法使用样式更改切片的行为。如果省级边界不在缩放级别6的图块上,则无法对其进行样式设置。最好的选择是从其他一些数据源(如this)获取缩放级别为6的省界,然后将它们隐藏在缩放级别6之上。
相关问题:Google Maps V3: Draw German State Polygons?
代码段
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>