2017-04-24 18 views
1

我得到的錯誤是:我使用jQuery將地標插入到傳單地圖中。但是,當我試圖通過單擊鏈接而它給插入標Me錯誤

Uncaught Error: Map container is already initialized.

功能通過使用其他功能pullJson()劃分我想可視化的數據placethemarks()加載數據點擊相應的鏈接即可查看地圖。我怎樣才能解決這個錯誤?

$(window).load(function(){     
    var element = $('#mapPage');   
    element.height(element.height() - 42);    
    var map = L.map('map').setView([44.493889, 11.342778], 13);   
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', attributionControl = false).addTo(map);   
}); 

function placethemarks(){ 
    var jsondata = pullJsonData(); 
    var marker_art = new Array(); 
    var marker_museum = new Array(); 

    for(var a in jsondata) { 
    var tipocat = jsondata[a].type; 

    if (tipocat == 'artwork') { 
     storeCoordinate(jsondata[a].geometry.coordinates[0], jsondata[a].geometry.coordinates[1], marker_art); 
    } else if(tipocat == 'arts_centre'||tipocat == 'museum') { 
     storeCoordinate(jsondata[a].geometry.coordinates[0], jsondata[a].geometry.coordinates[1], marker_museum); 
    } 
    } 

    var marker_array = []; 
    for (var i = 0; i < marker_art.length; i++) { 
    var x = marker_art[i].x; 
    var y = marker_art[i].y; 
    var arr = [y, x]; 
    marker_array.push(arr); 
    } 

    for(var i = 0; i < marker_array.length-1; i++) { 
    new L.marker(marker_array[i]).addTo(map); 
    } 
} 
<li><a href="#" data-icon="star" onClick=placethemarks()>Art</a></li> 
<li><a href="#" data-icon="star" onClick=placethemarks()>Museums</a></li> 

回答

0

我通過簡單地添加到代碼中的單張地圖我不得不添加解決最後的問題。現在,當我點擊按鈕時,我看到地圖添加了地標。這是代碼:

<div id = "butt"> 
     <button type="button" onClick = placeTheMarks()>Place The Marks!</button> 
     </div> 

    <script> 
     function placeTheMarks(){  

      // I take the data from another page 
      var json = JSON.parse(window.sessionStorage.getItem('response')); 

      var marker_art = new Array(); 
      var marker_museum = new Array(); 
      for(var a in json){ 
       var tipocat = json[a].type; 

       if(tipocat=='artwork') { 
        storeCoordinate(json[a].geometry.coordinates[0], json[a].geometry.coordinates[1], marker_art); 
       } 
       else if(tipocat == 'arts_centre' || tipocat == 'museum') { 
        storeCoordinate(json[a].geometry.coordinates[0], json[a].geometry.coordinates[1], marker_museum); 
       } 
      } 
      var marker_array = []; 
      for (var i = 0; i < marker_art.length; i++) { 
       var x = marker_art[i].x; 
       var y = marker_art[i].y; 
       var arr = [y,x]; 
       marker_array.push(arr); 

      } 

      for(var i = 0; i < marker_array.length-1; i++){ 
         new L.marker(marker_array[i]).addTo(map); 
      } 
     } 

      var map = L.map('map').setView([44.7215826, 10.624086], 12); 

      L.tileLayer("http://a.tile.openstreetmap.org/{z}/{x}/{y}.png", { 
       attribution: 'Map data&copy; OpenStreetMap contributors' 
       }).addTo(map); 

      </script> 
相關問題