未处理的承诺拒绝：错误：地图容器已初始化

编程问答 2022-06-05

问题描述

每当用户输入IP地址时，我都试图创建一个地图。当用户输入新的IP地址时，会出现问题，并且错误指出已经创建了映射。如何删除此地图并创建一个新地图？

document.getElementById('head_svg').addEventListener('click',function(){
// take users input
    var IP = document.getElementById('head_input').value;
    
// pull from api
    let response = axios.get(`https://geo.ipify.org/api/v1?apiKey=at_H3DsmnX2FUOcxvpVMeoLQsbgJE4OR&ipAddress=${IP}`)
      .then((response) => {
        console.log(response.data);
        var lat = response.data.location.lat;
        var long = response.data.location.lng;
        var city = response.data.location.city;
        var state = response.data.location.region;
        var zipcode = response.data.location.postalCode;
        var timezone = response.data.location.timezone;
        var ISP = response.data.isp;

// create new map 
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',osmAttribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,' + ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',osmLayer = new L.TileLayer(osmUrl,{maxZoom: 18,attribution: osmAttribution});
    var map = new L.Map('mapid',{zoomControl: false});
    map.setView(new L.LatLng(lat,long),9 );
    map.addLayer(osmLayer);
    var validatorsLayer = new OsmJs.Weather.LeafletLayer({lang: 'en'});
    map.addLayer(validatorsLayer);

// update elements on page
    document.getElementById('info_ip').innerText = IP;
    document.getElementById('info_city').innerText = `${city},${state}`
    document.getElementById('info_zipcode').innerText = zipcode;
    document.getElementById('info_timezone').innerText = `UTC ${timezone}`;
    document.getElementById('info_ISP').innerText = ISP;

// clearing input
    document.getElementById('head_input').value = "";
  })
});

解决方法

传单地图具有remove方法-不过，您将需要重构代码，以便可以“重用”地图变量，并在后续调用中执行public IActionResult onPostDismissed() { Response.Cookies.Append("MyCookie","value1",cookieOptions); } 

map.remove()
apiapijavascriptleaflet