2015-04-01 101 views
1

我正在使用地圖樣式,我試圖隱藏所有小城市的標籤。問題是他們都被列爲地方。所以如果我關閉「featureType」:「locality」,它甚至會關閉大城市。谷歌地圖隱藏較小的城市(本地人)

請看看這個谷歌地圖鏈接的位置,你會看到當你縮小更大的城市,例如'巴西利亞'和'戈亞尼亞'有更大更大膽的標籤。而周圍的其他小城市則有較小的字體大小標籤。

因此,默認情況下谷歌地圖顯然是不同大小的城市造型。

https://www.google.com.au/maps/place/Faina,+State+of+Goi%C3%A1s,+Brazil/@-15.4463132,-50.4081042,8z/data=!4m2!3m1!1s0x9367dd6707a3d11d:0xd225bdabe7eabd49

我怎麼能創建自己的那些小城市的標籤風格?

我嘗試過「featureType」:「locality.sub_locality」,但它隱藏了包括大城市在內的所有地方。

回答

1

一個選擇是隱藏所有地點(「locality.sub_locality」),然後爲您想要顯示的大城市添加自己的標籤。

proof of concept fiddle using a small sample of cities from geonames.org

代碼片段:

function initialize() { 
 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    styles: [{ 
 
     "featureType": "administrative.locality", 
 
     "elementType": "labels", 
 
     "stylers": [{ 
 
     "visibility": "off" 
 
     }] 
 
    }] 
 
    }); 
 
    google.maps.event.addListener(map, 'zoom_changed', function() { 
 
    for (var i = 0; i < mapLabels.length; i++) { 
 
     if (map.getZoom() > 5) { 
 
     mapLabels[i].setVisible(true); 
 
     } else { 
 
     mapLabels[i].setVisible(false); 
 
     } 
 
    } 
 
    }); 
 
    google.maps.event.addListener(map, 'bounds_changed', function() { 
 
    document.getElementById('bounds').innerHTML = map.getBounds().toUrlValue(6); 
 
    }); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var mapLabels = []; 
 

 
    for (var i = 0; i < citiesJSON.geonames.length; i++) { 
 
    var marker = new google.maps.Marker({ 
 
     position: { 
 
     lat: citiesJSON.geonames[i].lat, 
 
     lng: citiesJSON.geonames[i].lng 
 
     }, 
 
     // map:map, 
 
     title: citiesJSON.geonames[i].name 
 
    }); 
 
    bounds.extend(marker.getPosition()); 
 
    var myOptions = { 
 
     content: citiesJSON.geonames[i].name, 
 
     boxStyle: { 
 
     border: "none", 
 
     textAlign: "center", 
 
     fontSize: "8pt", 
 
     width: "100px" 
 
     }, 
 
     disableAutoPan: true, 
 
     pixelOffset: new google.maps.Size(-50, 0), 
 
     position: new google.maps.LatLng(citiesJSON.geonames[i].lat, 
 
     citiesJSON.geonames[i].lng), 
 
     closeBoxURL: "", 
 
     isHidden: false, 
 
     pane: "mapPane", 
 
     enableEventPropagation: true 
 
    }; 
 

 
    var ibLabel = new InfoBox(myOptions); 
 
    ibLabel.open(map); 
 
    mapLabels.push(ibLabel); 
 
    } 
 
    map.fitBounds(bounds); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 
var citiesJSON = { 
 
    "geonames": [{ 
 
    "lng": -47.92972, 
 
    "geonameId": 3469058, 
 
    "countrycode": "BR", 
 
    "name": "Brasília", 
 
    "fclName": "city, village,...", 
 
    "toponymName": "Brasília", 
 
    "fcodeName": "capital of a political entity", 
 
    "wikipedia": "en.wikipedia.org/wiki/Bras%C3%ADlia", 
 
    "lat": -15.77972, 
 
    "fcl": "P", 
 
    "population": 2207718, 
 
    "fcode": "PPLC" 
 
    }, { 
 
    "lng": -49.25388889, 
 
    "geonameId": 3462377, 
 
    "countrycode": "BR", 
 
    "name": "Goiânia", 
 
    "fclName": "city, village,...", 
 
    "toponymName": "Goiânia", 
 
    "fcodeName": "seat of a first-order administrative division", 
 
    "wikipedia": "en.wikipedia.org/wiki/Goi%C3%A2nia", 
 
    "lat": -16.67861111, 
 
    "fcl": "P", 
 
    "population": 1171195, 
 
    "fcode": "PPLA" 
 
    }, { 
 
    "lng": -47.81027778, 
 
    "geonameId": 3451328, 
 
    "countrycode": "BR", 
 
    "name": "Ribeirão Preto", 
 
    "fclName": "city, village,...", 
 
    "toponymName": "Ribeirão Preto", 
 
    "fcodeName": "seat of a second-order administrative division", 
 
    "wikipedia": "en.wikipedia.org/wiki/Ribeir%C3%A3o_Preto", 
 
    "lat": -21.1775, 
 
    "fcl": "P", 
 
    "population": 619746, 
 
    "fcode": "PPLA2" 
 
    }, { 
 
    "lng": -48.27722222, 
 
    "geonameId": 3445831, 
 
    "countrycode": "BR", 
 
    "name": "Uberlândia", 
 
    "fclName": "city, village,...", 
 
    "toponymName": "Uberlândia", 
 
    "fcodeName": "populated place", 
 
    "wikipedia": "en.wikipedia.org/wiki/Uberl%C3%A2ndia", 
 
    "lat": -18.91861111, 
 
    "fcl": "P", 
 
    "population": 563536, 
 
    "fcode": "PPL" 
 
    }, { 
 
    "lng": -49.37944444, 
 
    "geonameId": 3448639, 
 
    "countrycode": "BR", 
 
    "name": "São José do Rio Preto", 
 
    "fclName": "city, village,...", 
 
    "toponymName": "São José do Rio Preto", 
 
    "fcodeName": "seat of a second-order administrative division", 
 
    "wikipedia": "en.wikipedia.org/wiki/S%C3%A3o_Jos%C3%A9_do_Rio_Preto", 
 
    "lat": -20.81972222, 
 
    "fcl": "P", 
 
    "population": 374699, 
 
    "fcode": "PPLA2" 
 
    }, { 
 
    "lng": -48.95277778, 
 
    "geonameId": 3472287, 
 
    "countrycode": "BR", 
 
    "name": "Anápolis", 
 
    "fclName": "city, village,...", 
 
    "toponymName": "Anápolis", 
 
    "fcodeName": "populated place", 
 
    "wikipedia": "en.wikipedia.org/wiki/An%C3%A1polis", 
 
    "lat": -16.32666667, 
 
    "fcl": "P", 
 
    "population": 319587, 
 
    "fcode": "PPL" 
 
    }, { 
 
    "lng": -47.40083333, 
 
    "geonameId": 3463011, 
 
    "countrycode": "BR", 
 
    "name": "Franca", 
 
    "fclName": "city, village,...", 
 
    "toponymName": "Franca", 
 
    "fcodeName": "seat of a second-order administrative division", 
 
    "wikipedia": "en.wikipedia.org/wiki/Franca", 
 
    "lat": -20.53861111, 
 
    "fcl": "P", 
 
    "population": 305041, 
 
    "fcode": "PPLA2" 
 
    }, { 
 
    "lng": -47.93194444, 
 
    "geonameId": 3445839, 
 
    "countrycode": "BR", 
 
    "name": "Uberaba", 
 
    "fclName": "city, village,...", 
 
    "toponymName": "Uberaba", 
 
    "fcodeName": "populated place", 
 
    "wikipedia": "en.wikipedia.org/wiki/Uberaba", 
 
    "lat": -19.74833333, 
 
    "fcl": "P", 
 
    "population": 260843, 
 
    "fcode": "PPL" 
 
    }, { 
 
    "lng": -47.95027778, 
 
    "geonameId": 3458329, 
 
    "countrycode": "BR", 
 
    "name": "Luziânia", 
 
    "fclName": "city, village,...", 
 
    "toponymName": "Luziânia", 
 
    "fcodeName": "populated place", 
 
    "wikipedia": "en.wikipedia.org/wiki/Luzi%C3%A2nia", 
 
    "lat": -16.2525, 
 
    "fcl": "P", 
 
    "population": 143601, 
 
    "fcode": "PPL" 
 
    }, { 
 
    "lng": -46.51805556, 
 
    "geonameId": 3454783, 
 
    "countrycode": "BR", 
 
    "name": "Patos de Minas", 
 
    "fclName": "city, village,...", 
 
    "toponymName": "Patos de Minas", 
 
    "fcodeName": "populated place", 
 
    "wikipedia": "en.wikipedia.org/wiki/Patos_de_Minas", 
 
    "lat": -18.57888889, 
 
    "fcl": "P", 
 
    "population": 126234, 
 
    "fcode": "PPL" 
 
    }] 
 
};
html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script> 
 
<div id="bounds"></div> 
 
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

+0

是的,我雖然有關,但谷歌是dinamically了變化對於那些小城市的風格。所以我想知道如何做。這將節省很多時間。 – user3750757 2015-04-01 04:45:45