0

有很多关于地图 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 内存，谷歌正式不鼓励这种做法（这里和这里）。我真的不想覆盖一个白色矩形，或者让地图显示：无。没有更好的办法吗？

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

4

2 回答 2

0

我只是将地图 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
});

概念证明小提琴

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>

于 2017-08-11T01:22:34.333 回答
0

将地图设置visibility为hidden。

更好的是，使用一个类。

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

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

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

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

于 2017-08-11T16:57:13.867 回答