省略特定国家/地区的 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

代码sn-p：

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/npm/google-maps-utility-library-v3-infobox@1.1.14/dist/infobox.js"></script>
<div id="bounds"></div>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>