javascript - 如何将谷歌地图标签放在顶部？

Question

我正在使用谷歌地图中的折线。基本上我正在尝试使用折线在多条道路上画一条线。

现在这些折线正在阻挡(在顶部)道路标签。我已经更改了不透明度级别以便更好地查看，但我真的希望 Google map 标签位于顶部。

我研究了样式图，但还没有找到任何合适的解决方案。有没有办法做到这一点？

提前致谢。

Answer 1

图 block (包含地面、标签、街道等)以单个图像而不是层的形式提供，因此无法在图 block 中显示的特定特征之间放置任何内容。

但可能有办法。

假设您有 2 个(同步) map 、1 个完整 map 和 1 个仅显示标签的 map 。

当您将带有标签的 map 放在另一张 map 的顶部时，它将能够获得所需的效果(这并不意味着我会建议它，我只是想避免说“不可能”)

演示: http://jsfiddle.net/geocodezip/tq5zmre3/

代码片段:

// Setup the default map
latlng = [-6.2087634, 106.84559899999999];
latlng = new google.maps.LatLng(23.062521089244896, -68.78645340625002);

map = new google.maps.Map(document.getElementById('map'), {
  disableDefaultUI: true,
  styles: [{
    "elementType": "labels",
    "stylers": [{
      "visibility": "off"
    }]
  }],

  mapTypeId: google.maps.MapTypeId.ROADMAP
});
map2 = new google.maps.Map(document.getElementById('map2'), {
  mapTypeControl: false,
  backgroundColor: 'hsla(0, 0%, 0%, 0)',
  zoom: 5,
  styles: [{
    "stylers": [{
      "visibility": "off"
    }]
  }, {
    "elementType": "labels",
    "stylers": [{
      "visibility": "on"
    }]
  }],
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.bindTo('center', map2, 'center');
map.bindTo('zoom', map2, 'zoom');



new google.maps.Polygon({
  paths: [
    new google.maps.LatLng(15.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
  ],
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 1,
  map: map
});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.map {
  width: 100%;
  height: 100%;
  background: transparent !important;
}

<script src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map" class="map"></div>
<div id="map2" class="map" style="top:-100%;"></div>