更改不同缩放级别的国家/州标签的包含？

Question

在谷歌地图静态API（以及我可以告诉的其他API）中，在缩放级别7，美国的国家/地区标签消失，在缩放级别8，各个州的标签消失。

我有兴趣在缩放级别8生成地图，但保留国家和州标签。我意识到标签并不完全适合这种缩放级别，但如果您碰巧在适当的位置查看地图，我希望它们可见。

有没有办法使用Google Maps API实现这一目标？

我试过了

style=feature:administrative.country|element:labels|visibility:on&stylefeature:administrative.province|element:labels|visibility:on

但是这并没有在缩放级别8添加我想要的标签。我怀疑这根本无法完成，但也许有人知道解决方法。

Answer 1

您无法使用样式化地图进行更改。但是您可以在更高的缩放级别将它们自己添加到地图中。

proof of concept fiddle

proof of concept with all 50 states, but probably need to tweak some of the locations

代码段

＆＃13;

＆＃13;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(35.9, -97.092877),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  document.getElementById('zoom').innerHTML = "zoom="+map.getZoom();
  google.maps.event.addListener(map, 'click', function(e) {
    console.log(e.latLng.toUrlValue(6));
  });
  // 35.930648,-97.166119
  var myOptions = {
    content: "OKLAHOMA",
    boxStyle: {
      border: "none",
      textAlign: "center",
      fontSize: "14pt",
      width: "50px",
      color: "grey"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, 0),
    position: new google.maps.LatLng(36.05, -97.4),
    closeBoxURL: "",
    isHidden: false,
    pane: "mapPane",
    enableEventPropagation: true
  };
  var ibLabel = new InfoBox(myOptions);
  google.maps.event.addListener(map, 'zoom_changed', function() {
    console.log("zoom=" + map.getZoom());
    document.getElementById('zoom').innerHTML = "zoom=" + map.getZoom();
    if (map.getZoom() == 8) {
      ibLabel.open(map);
    } else {
      ibLabel.close();
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 98%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<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="zoom"></div>
<div id="map_canvas"></div>

＆＃13;

＆＃13;

＆＃13;