省略Google地圖特定國家的城市/州標籤Javascript API

Question

情況：我有一張使用Google Maps Javascript API的加拿大地圖。該應用只涉及加拿大，所以我想隱藏美國所有州的標籤。基本上需要知道是否有可能用API來省略除加拿大以外的所有標籤。

Answer 1

您無法控制各國的標籤。你可以全部隱藏並手動添加加拿大的。您需要一個數據來源{geonames.org是一個），並確定哪些數據在視圖中並以特定縮放級別顯示。

類似的問題：

• Google Maps v3 Javascript: geojson overlays city and country names
• Display labels only to specific cities in Google Maps
• Google maps hide smaller cities (localites)

proof of concept fiddle

代碼片段：

var mapLabels = []; 
 
var CanadaBounds = new google.maps.LatLngBounds(); 
 

 
function initialize() { 
 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
    styles: [{ 
 
     "featureType": "administrative.locality", 
 
     "elementType": "labels", 
 
     "stylers": [{ 
 
     "visibility": "off" 
 
     }] 
 
    }] 
 
    }); 
 
    var geocoder = new google.maps.Geocoder(); 
 
    geocoder.geocode({ 
 
    'address': "Canada" 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     CanadaBounds = results[0].geometry.viewport; 
 
     map.fitBounds(results[0].geometry.viewport); 
 
    } else { 
 
     alert('Geocode was not successful for the following reason: ' + status); 
 
    } 
 
    }); 
 
    google.maps.event.addListener(map, 'bounds_changed', function() { 
 
    var bounds = map.getBounds(); 
 
    var south = bounds.getSouthWest().lat(); 
 
    if (south < CanadaBounds.getSouthWest().lat()) 
 
     south = CanadaBounds.getSouthWest().lat(); 
 
    var west = bounds.getSouthWest().lng(); 
 
    if (west < CanadaBounds.getSouthWest().lng()) 
 
     west = CanadaBounds.getSouthWest().lng() 
 
    var north = bounds.getNorthEast().lat(); 
 
    if (north > 85) north = 85; 
 
    var east = bounds.getNorthEast().lng(); 
 
    if (east > CanadaBounds.getNorthEast().lng()) 
 
     east = CanadaBounds.getNorthEast().lng(); 
 
    document.getElementById('bounds').innerHTML = bounds.toUrlValue(6); 
 
    var urlStr = "http://api.geonames.org/citiesJSON?formatted=true&south=" + south.toFixed(6) + "&west=" + west.toFixed(6) + "&north=" + north.toFixed(6) + "&east=" + east.toFixed(6) + "&lang=en&username=geocodezip&style=full"; 
 
    $.getJSON(urlStr, function(data) { 
 
     bounds = new google.maps.LatLngBounds(); 
 

 
     for (var i = 0; i < data.geonames.length; i++) { 
 
     if (data.geonames[i].countrycode != "CA") continue; 
 
     var marker = new google.maps.Marker({ 
 
      position: { 
 
      lat: data.geonames[i].lat, 
 
      lng: data.geonames[i].lng 
 
      }, 
 
      icon: { 
 
      path: google.maps.SymbolPath.CIRCLE, 
 
      scale: 3, 
 
      strokeWeight: 2 
 
      }, 
 
      map: map, 
 
      title: data.geonames[i].name 
 
     }); 
 
     bounds.extend(marker.getPosition()); 
 
     var myOptions = { 
 
      content: data.geonames[i].name, 
 
      boxStyle: { 
 
      border: "none", 
 
      textAlign: "center", 
 
      fontSize: "8pt", 
 
      width: "100px" 
 
      }, 
 
      disableAutoPan: true, 
 
      pixelOffset: new google.maps.Size(-50, 2), 
 
      position: new google.maps.LatLng(data.geonames[i].lat, data.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.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.addDomListener(window, "load", initialize);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> 
 
<div id="bounds"></div> 
 
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>