Leafletjs 地图不会在里面移动答案

【问题标题】：Leafletjs the map does not move inside itLeafletjs 地图不会在里面移动
【发布时间】：2020-07-12 05:11:39
【问题描述】：

我正在尝试让地图在其中移动，将地图拖到一边，这样我就可以绕过地图。

But this is only being possible onmousedown on map1, when choosing map2 the map does not move, it is not possible to drag it.

当点击map1 button 时，地图出现并且可以在其中移动，但是在我点击map2 button 后，它不再可以在地图内移动。

按照正在发生的事情的代码。

如何解决这个问题？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Map</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
</head>
<body>
    <div style="margin: 10px">
        <button onclick="maps(['New York', 40.6971494, -74.2598757])">Map 1</button>
    </div>
    <div style="margin: 10px">
        <button onclick="maps(['London', 51.528308, -0.3817849])">Map 2</button>
    </div>
    <div id="mapid" style="width: 200px; height: 200px; margin: 10px"></div>

    <script>
        function maps(location) {
            var container = L.DomUtil.get('mapid');
            if(container != null){
                container._leaflet_id = null;
            }

            var map = L.map( 'mapid', {
                center: [location[1], location[2]],
                minZoom: 2,
                zoom: 13
              });
            
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            var m = L.marker([location[1], location[2]]).addTo(map).bindPopup(location[0])

        }
    </script>
</body>
</html>

【问题讨论】：

标签： leaflet

【解决方案1】：

我发现了问题，我需要改变地图的初始化方式，按照下面的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Map</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
</head>
<body>
    <div style="margin: 10px">
        <button onclick="maps(['New York', 40.6971494, -74.2598757])">Map 1</button>
    </div>
    <div style="margin: 10px">
        <button onclick="maps(['London', 51.528308, -0.3817849])">Map 2</button>
    </div>
    <div id="mapid" style="width: 200px; height: 200px; margin: 10px"></div>

    <script>
        var map = null; //added

        function maps(location) {
            
            //var container = L.DomUtil.get('mapid'); //removed
            //if(container != null){                  //removed
            //    container._leaflet_id = null;       //removed
            //}

            if (map !== undefined && map !== null) { map.remove(); }//added

            map = L.map( 'mapid', { //alterated
                center: [location[1], location[2]],
                minZoom: 2,
                zoom: 13
              });
            
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            var m = L.marker([location[1], location[2]]).addTo(map).bindPopup(location[0])

        }
    </script>
</body>
</html>

【讨论】：