我正在使用 jQuery 在傳單地圖中插入地標。 但是當我嘗試通過單擊鏈接插入地標時，它給了我錯誤

Question

我得到的錯誤是“未捕獲的錯誤：地圖容器已經初始化。”
函數 placethemarks() 使用另一個函數 pullJson() 加載數據，該函數通過單擊相應的鏈接來划分我想要在地圖上可視化的數據。 我該如何解決這個錯誤？

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

      }

藝術

博物館

Answer 1

我最終通過簡單地將我必須添加的 Leaflet 地圖添加到代碼中解決了這個問題。 現在，當我單擊按鈕時，我看到地標已添加到地圖中。 Hese是代碼：

  <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>