Question

我在我的地图上创建了一个自定义搜索栏，需要重叠一些控件，在这些控件的z-index搞定了一段时间后我没有结果（控件保持在最顶层）。我的想法是在搜索时隐藏控件，但我无法找到如何在任何地方动态删除/隐藏控件。

有人有一个很好的解决方案吗？添加和删除它们，隐藏它们或正确地对它们进行z索引都很好。

Answer 1

使用setOptions动态更改地图的选项（Google Maps JavaScript API V3的完整文档为here）

＆＃13;

// create map
var myLatlng = new google.maps.LatLng(-33, 151);
var myOptions = {
  center: myLatlng,
  zoom: 5,
  streetViewControl: false,
  zoomControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


// functions for removing controls dinamically
function toggleMapTypeControl(b) {
  map.setOptions({
    mapTypeControl: b
  });
}

function toggleStreetViewControl(b) {
  map.setOptions({
    streetViewControl: b
  });
}

function toggleZoomControl(b) {
  map.setOptions({
    zoomControl: b
  });
}

＆＃13;

#map_canvas {
  width: 50%;
  height: 200px;
  float: left;
}

＆＃13;

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>
<input type="checkbox" onclick="toggleMapTypeControl(this.checked)" />mapTypeControl
<br>
<input type="checkbox" onclick="toggleStreetViewControl(this.checked)" />streetViewControl
<br>
<input type="checkbox" onclick="toggleZoomControl(this.checked)" />zoomControl
<br>

＆＃13;

Answer 2

我的第一个想法就是在我想要出现在容器上的z-index: 999999或者其他东西之后添加一些非常高的东西，经过多次努力和谷歌搜索后，我无法让它发挥作用。

似乎发生的事情是，当一个元素被添加到地图时，它会被z-index重置为0.经过一段时间的尝试，我仍然找不到让地图保持css的方法{ {1}}价值。最后我选择在将其添加到地图之后去。

z-index

由于z-index重置已经发生，这似乎有效。不像我想要的那么干净，但它确实有效。

动态添加/删除控件[Google Maps]

2 个答案: