javascript - 我正在使用 jQuery 在传单 map 中插入地标。但是当我尝试通过单击链接插入地标时，出现错误

Question

我得到的错误是“ Uncaught Error : map 容器已初始化。”
函数 placethemarks() 通过使用另一个函数 pullJson() 加载数据，该函数通过单击相应的链接来划分我想要在 map 上可视化的数据。我该如何解决这个错误？

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

我通过简单地将我必须添加的传单 map 添加到代码中最终解决了问题。现在，当我单击按钮时，我会看到地标已添加到 map 中。这是代码:

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