Question

情况：我有一张使用Google Maps Javascript API的加拿大地图。该应用仅涉及加拿大，因此我想隐藏美国的所有州标签。基本上需要知道API是否有可能省略除加拿大之外的所有标签。

Answer 1

您无法按国家/地区控制标签。您可以将它们全部隐藏起来＆＃34;手动＆＃34;为加拿大添加。您需要一个数据源{geonames.org是一个），并确定哪些是在视图中并以特定的缩放级别显示。

类似的问题：

代码段：

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

为特定国家/地区Javascript API省略Google Maps城市/州标签

1 个答案: