从 google 地图中删除按钮 api Javascript

Question

我想实现这个行为：我打开地图，当我拖动它时，会出现一个名为 'Search in this area' 的按钮。单击该按钮后，我希望它消失，这样用户将无法在同一区域再次搜索。我拖动地图后，按钮又会出现

这是代码：

  controlMarkerUI = document.createElement('div')
  controlText = document.createElement('div')

  mapReady(map) {
    this.my_map = map
    var self = this
    google.maps.event.addListener(this.my_map, 'dragend', function () {
      self.redo_search_button(self.my_map)
    });
  }

  redo_search_button(map) {    
    this.controlMarkerUI.style.cursor = 'pointer'
    this.controlMarkerUI.style.backgroundColor = '#fff';
    this.controlMarkerUI.style.marginTop = '10px'
    this.controlMarkerUI.style.border = '2px solid #fff'
    this.controlMarkerUI.style.borderRadius = '3px'
    this.controlMarkerUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'
    this.controlMarkerUI.style.textAlign = 'center'
    this.controlMarkerUI.title = 'Click to redo search in this area'

    this.controlText.style.color = 'rgb(25,25,25)';
    this.controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
    this.controlText.style.fontSize = '16px';
    this.controlText.style.lineHeight = '38px';
    this.controlText.style.paddingLeft = '5px';
    this.controlText.style.paddingRight = '5px';
    this.controlText.innerHTML = 'Search in this area';

    this.controlMarkerUI.appendChild(this.controlText);
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(this.controlMarkerUI)

    var this_ = this
    this.controlMarkerUI.addEventListener('click', function () {
      this_.redo_search() // refresh the markers
      this_.removeDummy()
    });
  }

我试过调用函数

  removeDummy() {
    this.controlMarkerUI.parentNode.removeChild(this.controlMarkerUI);
    return false;
  }

这将使按钮消失，但也会在每次拖动地图时将按钮移到右侧。

Answer 1

创建时将您的按钮样式显示设置为 none。

this.controlMarkerUI.style.display = 'none'

在您的按钮上注册一个事件侦听器以在单击时隐藏它。
在您的地图上注册一个事件侦听器，以便在拖动结束时显示它。

下面是完整的工作示例：

var map;

function initialize() {

  var mapOptions = {
    center: new google.maps.LatLng(10, 10),
    zoom: 5
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  // Set CSS for the control button
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#444';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '1px';
  controlUI.style.borderColor = 'white';
  controlUI.style.height = '28px';
  controlUI.style.marginTop = '5px';
  controlUI.style.marginLeft = '5px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.style.display = 'none';


  // Set CSS for the control text
  var controlText = document.createElement('div');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '10px';
  controlText.style.color = 'white';
  controlText.style.paddingLeft = '10px';
  controlText.style.paddingRight = '10px';
  controlText.style.marginTop = '8px';
  controlText.innerHTML = 'My button text';
  controlUI.appendChild(controlText);

  // Setup the click event listeners to hide the button
  google.maps.event.addDomListener(controlUI, 'click', function() {

    this.style.display = 'none';
  });

  // Push button to map controls
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlUI);

  // Setup event listener to show the button on drag end
  google.maps.event.addListener(map, 'dragend', function() {
    controlUI.style.display = 'block'
  });
}

#map-canvas {
  height: 160px;
}

<div id="map-canvas"></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=initialize">
</script>

从 google 地图中删除按钮 api Javascript

Remove button from google maps api Javascript

google-maps

google-maps-api-3

typescript

angular

angular6