使地圖元素變爲空白，消失（Google Maps JavaScript API，v3）

對於地圖API，help有很多調用，其中blank白色div爲undesirable。在我的情況下，這是可取的。使地圖元素變爲空白，消失（Google Maps JavaScript API，v3）

我知道如何製作地圖。

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

它的工作原理，但在那之後我也沒辦法讓地圖再次出現。什麼是正確的方法？

我想我可以做和刪除地圖實例，但this bug report說每個摧毀地圖實例泄漏2MB內存，以及谷歌正式鼓勵的做法（here和here）。我真的不想覆蓋一個白色的矩形，或者使地圖顯示：無。有沒有更好的方式？

（我的應用程序是旁邊的一個地址條目形式的地圖。當輸入足夠的細節，地圖會自動出現。如果該字段的內容被刪除，地圖上一片空白一次。）

來源

2017-08-10 BobStein-VisiBone

我只想將地圖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>

來源

2017-08-11 01:22:34 geocodezip

我提到這違背了谷歌的建議。請參閱[本答案]（https://stackoverflow.com/a/10660672/673991），其中引用了一個視頻，其中googloids稱「他們不支持涉及創建/銷燬連續映射實例的用例」。還是我誤解了一些東西？ –

2011 [錯誤報告]（https://issuetracker.google.com/issues/35821412）「銷燬谷歌地圖實例永不釋放內存」（每個大約2MB）收到[官方回覆]（https://issuetracker.google .com/issues/35821412＃comment32）in 2015「我將這個標籤標記爲**不會修復**，因爲這在技術上很困難，我們不確定有多少地方正在泄漏。」 –

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

類添加到空白的地圖。渲染地圖時將其刪除。

如果代碼的多個部分因不同原因打開或關閉可見性，添加和刪除類更好。

將地圖的可見性設置爲隱藏比將其顯示設置爲無效更好，這會永久地破壞地圖渲染。我在docs中看到關於Map.fitBounds（）突破的一個線索。

來源

2017-08-11 16:57:13

使地圖元素變爲空白，消失（Google Maps JavaScript API，v3）

回答

相關問題