使地图元素空白，消失（Google Maps JavaScript API, v3）

Question

help with the maps API where a blank white div is 的呼声很多。就我而言，这是可取的。

我知道如何显示地图。

map.setCenter(new google.maps.LatLng(latitude, longitude));

我知道如何显示路线。

directionsService.route(request, function(result, status) {
    if (status === google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
    }
});

偶尔我只是想 地图元素到 "go white." 之后我想把地图或路线放回那里。

我试过这个：

$('#map').empty();

它有效，但之后我再也不能让地图出现了。正确的做法是什么？

我想我可以创建和删除地图实例，但是 this bug report says each destroyed map instance leaks 2MB memory, and Google officially discourages the practice (here and here)。我真的不想覆盖一个白色矩形，或者制作地图 display:none。有没有更好的方法？

（我的应用程序是地址输入表单旁边的地图。输入足够的详细信息后，地图会自动出现。如果字段内容被删除，地图将再次变为空白。）

Answer 1

我只想将地图 div 的 innerHTML 设置为“”。

document.getElementById('map_canvas').innerHTML = "";

（但 $("#map_canvas").empty(); 也有效）

完成后，您需要重新创建并重新初始化地图对象。

map = new google.maps.Map(document.getElementById("map_canvas"), {
  center: new google.maps.LatLng(37.4419, -122.1419),
  zoom: 13,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

proof of concept fiddle

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var displayMap = true;
  google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
    if (displayMap) {
      document.getElementById('map_canvas').innerHTML = "";
    } else {
      map = new google.maps.Map(
        document.getElementById("map_canvas"), {
          center: new google.maps.LatLng(37.4419, -122.1419),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
    }
    displayMap = !displayMap;

  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" id="btn" value="toggle map" />
<div id="map_canvas"></div>

Answer 2

将地图 visibility 设置为 hidden。

更好的是，使用 class。

CSS:

.map-hide {
    visibility: hidden;
}

jQuery:

$('#map').addClass('map-hide');
$('#map').removeClass('map-hide');

JavaScript (IE10+):

document.getElementById("map").classList.add('map-hide');
document.getElementById("map").classList.remove('map-hide');

添加 class 以空白地图。渲染地图时将其移除。

如果代码的多个部分出于不同原因打开或关闭可见性，则添加和删除 class 更好。

将地图的可见性设置为隐藏优于将其显示设置为 none，后者会永久破坏地图渲染。我在关于 Map.fitBounds() 中断的 docs 中看到了一条线索。

使地图元素空白，消失（Google Maps JavaScript API, v3）

Make a map element blank, disappear (Google Maps JavaScript API, v3)

google-maps

google-maps-api-3

google-api-javascript-client