时间戳

首页 > 解决方案 > 可以在不创建函数的情况下使用 javascript 从 Google 地图中删除控件吗？

javascript - 可以在不创建函数的情况下使用 javascript 从 Google 地图中删除控件吗？

问题描述

使用这个小提琴：https ://jsfiddle.net/mwsy5vhu/但想象一下我们看不到代码。（因为它不是我们的网站）。我们不知道使用地图的 var X 名称。

我们如何使用 javascript 隐藏控件？IE：我们打开浏览器检查器工具>控制台

在控制台中我们可以执行什么来隐藏控件？

我努力了：

map.setOptions({disableDefaultUI: true});

（并且由于某种原因，即使使用真正的 var 名称 map 它也会给我一个错误，说 map 没有定义（？））

需要一种方法来隐藏地图控件而无需访问“源代码”，例如只需注入动态 javascript 代码来定位现有地图。

也许这可能与CSS有关？

谢谢。

标签： javascriptgoogle-maps

解决方案

对象上有一个.setOptions方法google.maps.Map可以让您MapOptions动态设置：

var defaultUI = true;
google.maps.event.addDomListener(document.getElementById('disableUI'), "click", function() {
   if (defaultUI) {
     map.setOptions({disableDefaultUI: true}); 
   } else {
     map.setOptions({disableDefaultUI: false}); 
   }
   defaultUI = !defaultUI;
});

概念证明小提琴

代码片段：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: -33,
      lng: 151
    },
    // disableDefaultUI: true
  });
  var defaultUI = true;
  google.maps.event.addDomListener(document.getElementById('disableUI'), "click", function() {
    if (defaultUI) {
      map.setOptions({
        disableDefaultUI: true
      });
    } else {
      map.setOptions({
        disableDefaultUI: false
      });
    }
    defaultUI = !defaultUI;
  });
}
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 90%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<input id="disableUI" value="disableUI" type="button" />
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

推荐阅读