Leaflet：初始化地图容器的函数答案

【问题标题】：Leaflet : Function to initialize map containerLeaflet：初始化地图容器的函数
【发布时间】：2017-06-02 20:38:16
【问题描述】：

在 html 表中拥有各个位置的纬度和经度，单击该行时，函数将纬度和经度值发送到 javascript 函数，该函数在引导模式中加载 openstreetmap 地图和标记。这在第一次调用函数时有效，显示标记但在关闭模式并再次调用函数时出现错误
未捕获的错误：地图容器已初始化。

function sendlatlng(id) {
       var geom=document.getElementById('cor'+id).value;
       var geom1=document.getElementById('cod'+id).value;
      var map = L.map(('map'),{scrollWheelZoom:true}).setView([geom,geom1], 12);
       L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
         {
            maxZoom: 18
         }).addTo(map);
       L.marker([geom,geom1]).addTo(map);

            }

有没有办法让map div

<div id="map" class="map" style="height: 300px;"></div>

每次打开模态或调用函数时都会重新初始化。

【问题讨论】：

标签： javascript jquery twitter-bootstrap leaflet openstreetmap

【解决方案1】：

来自传单的错误，因为我们试图在每次执行 sendlatlng 时创建一个地图容器。没关系，因为我们可以创建一次，然后使用该函数更新现有对象的坐标，而不是尝试在 sendlatlng 函数中创建地图和标记。这是一个例子：

<html>

<head>
    <title>A Leaflet map!</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <style>
        #map {
            width: 450px;
            height: 250px
        }
    </style>
</head>

<body>

    <div id="map"></div>

    <script>
        //just for the demo
        var defaultCoords = [-41.291, -185.229];

        //set up our map
        var map = L.map('map').setView(defaultCoords, 12);
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            {
                maxZoom: 18
            }).addTo(map);

        //this is how we are going to demo our sendlatlng function
        map.on('click', onMapClick);


        //use this variable to track our marker here outside of the sendlatlng function
        var myMarker = L.marker(defaultCoords).addTo(map);

        //in our example, we are going to listend for clicks on the map to trigger
        //changes to the coords with our sendlatlng function
        function onMapClick(e) {
            sendlatlng(e.latlng)
        }


        //update the map and marker positions based on the coords passed to the function
        //we will just update our existing map and myMarker variables instead of create new ones
        function sendlatlng(coords) {
            map.setView(coords, 12);
            myMarker.setLatLng(coords);

        }
    </script>
</body>

</html>

在演示中，我们通过在地图上单击鼠标来触发 sendlatlng 功能。这将使地图居中并将myMarker 移动到新中心。

例如，如果您想在点击位置创建一个新标记，我们可以按照您最初的函数的方式执行此操作：添加一个新标记：L.marker(coords).addTo(map);

【讨论】：

【解决方案2】：

如果您创建地图并尝试再次对其进行映射，则会收到此错误。试试下面的示例代码

//Use this before creating the map

if (map != undefined) {
   map.remove();
}

//Use this after adding tile layer

setTimeout(function () { map.invalidateSize() }, 1200);

【讨论】：