动态添加/删除控件[Google地图] [英] Dynamically add/remove controls [Google Maps]

问题描述

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

有没有人有这个好的解决方案？添加和删​​除它们，隐藏它们或正确地索引它们都没有问题。使用 setOptions 使用 可动态更改地图选项（Google Maps JavaScript API V3的完整文档为 here ）

// create mapvar 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）; //删除控件的函数dinamicallyfunction toggleMapTypeControl（b）{map.setOptions（{mapTypeControl：b}）;} function toggleStreetViewControl（b）{map.setOptions（{streetViewContr ol：b}）;} function toggleZoomControl（b）{map.setOptions（{zoomControl：b}）;}

  #map_canvas {width：50％; height：200px; float：left;}  

< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?sensor=false>< / script>< div id =map_canvas>< / div>< inputclick =checkboxonclick =toggleMapTypeControl（this.checked）/> mapTypeControl< br>< input type =checkboxonclick =toggleStreetViewControl（this.checked）/> streetViewControl< br>< input type =checkboxonclick =toggleZoomControl（this.checked）/> zoomControl< br>

I made a custom search bar on my map that needs to overlap some controls that are on there as well, after messing with the z-index of those controls for a while I had no results (controls stay on top). My idea was to hide the controls while searching, though I can't find how to dynamically remove/hide the controls anywhere.

Does anybody have a good solution for this? Adding and removing them, hiding them or z-indexing them properly is all fine.

解决方案

Use setOptions to change the map's options dynamically (full documentation for Google Maps JavaScript API V3 is here)

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

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

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

这篇关于动态添加/删除控件[Google地图]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！