传单 - 刷新地图



我知道这个问题已被问到并以前回答,但是我无法成功实施这些示例。

我正在尝试通过zoomedIn()加载地图(正常工作(,然后在按钮上按zoomedOut()

加载地图

zoomedOut()中,我在var map = new L.Map('map');

之后投掷Map container is already initialized

我以为上一行if (map != undefined) { map.remove(); }会照顾好。

是怎么回事 - 我该如何重绘地图?

<body onLoad="javascript:zoomedIn();">
<form method = "post">
<button type="button" onclick="return zoomedOut()">Zoom Out</button>
<div id="map"</div>
</form>
<script language="javascript">
  function zoomedIn() {
     var map = new L.Map('map');
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        id: 'mapbox.streets'
    }).addTo(map);
         var devon = new L.LatLng(50.900958,-3.370846);
         map.setView(devon, 7);
      }
</script>
<script language="javascript">
  function zoomedOut() {
    if (map != undefined) { map.remove(); }
    var map = new L.Map('map');
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        id: 'mapbox.streets'
    }).addTo(map);
         var devon = new L.LatLng(50.900958,-3.370846);
         map.setView(devon, 1);
      }

您可以使用

map.invalidateSize()

它对我有用

最新更新