将地图元素设为空白，消失(Google Maps JavaScript API，v3)

Question

有很多关于maps API的帮助请求，其中不需要空白的白色div。就我而言，这是可取的。

我知道如何使地图出现。

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

我知道如何显示方向。

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

有时我只是希望地图元素"变白"。稍后我想把地图或方向放回去。

我试过这个：

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

它有效，但在那之后我再也无法让地图出现。正确的方法是什么？

我想我可以制作和删除地图实例，但这个错误报告说每个被破坏的地图实例都会泄漏 2MB 内存，谷歌正式不鼓励这种做法(这里和这里(。 我真的宁愿不覆盖一个白色矩形，或者让地图显示：none。没有更好的方法吗？

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

Answer 1

我只是将地图div的内部HTML设置为"。

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

概念验证小提琴

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。

更好的是，使用类。

.CSS：

.map-hide {
visibility: hidden;
}

j查询：

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

JavaScript (IE10+(：

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

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

添加和删除类会更好，以防代码的多个部分因不同原因打开或关闭可见性。

将地图的可见性设置为隐藏比将其显示设置为无更好，后者可能会永久破坏地图渲染。我在文档中看到了一个关于 Map.fitBounds(( 中断的线索。