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

Question

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

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

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

提前致谢。

Answer 1

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

但可能有办法。

假设您有 2 个（同步）地图、1 个完整地图和 1 个仅显示标签的地图。

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

Demo:http://jsfiddle.net/geocodezip/tq5zmre3/

代码 sn-p：

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

Answer 2

有一种更简洁的方法可以使用单个地图和 StyledMapType 实现此目的。

// Create an overlay to display map labels only
var labelsMapType = new google.maps.StyledMapType([{
    // Hide all map features by default
    stylers: [{
        visibility: 'off'
    }]
}, {
    // then turn the label feature on
    elementType: 'labels',
    stylers: [{
        visibility: 'on'
    }]
}], {
    name: 'Labels'
});

// Add to the map's overlay collection
map.overlayMapTypes.push(labelsMapType);