2017-06-25 22 views
0

私はこの質問が尋ねられ、以前に答えられたことを理解していますが、私はそれらの例を首尾よく実装することができませんでした。リーフレット - 地図を更新する

私はしかし、私は Map container is already initialized私が持っていた

var map = new L.Map('map');後を投げてるし、ボタンを押し上 zoomedOut()zoomedOut()

でマップをロードし、(正常に動作します)zoomedIn()を経由してマップをロードしようとしている

前の行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); 
     } 

+0

を理解していない私のために働いた

map.invalidateSize() 

使用することができます。なぜマップを削除してからもう一度追加したいのですか? –

+0

私は地図上にたくさんのマーカーを持っています - 私はそれらのマーカーを再描画しようとしています。もちろんこれは上のコードではありませんが、私が理解しているように、私はそれを再描画する必要があります。 –

+0

ここでは:https://stackoverflow.com/questions/19186428/refresh-leaflet-map-map-container-is-alreay-initialized –

答えて

0

あなたは、それは私はあなたが達成しようとしているものを

関連する問題