Question

具有html表中各个位置的纬度和经度，单击该行时，函数会将纬度和经度值发送到javascript函数，该函数会在bootstrap模式中加载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);

            }

地图div有没有办法

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

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

Answer 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);

Answer 2

如果您创建地图并尝试再次映射，则会收到此错误。请尝试以下示例代码

//Use this before creating the map

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

//Use this after adding tile layer

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

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

2 个答案: