单击按钮时移动视图区域

Question

我正在为这个而烦恼！

我有一张地图，它会在单击某个按钮时加载，我希望它能在单击其他按钮之一时将地图移动到新区域。但是，如果单击另一个按钮，我会收到错误 'Map container is already initialized.'

我尝试在其中添加一个条件，如果地图已经加载，则平移到新位置，但随后我得到“无法读取未定义的属性 'panTo'”！

这是地图加载功能的样子：

function getMap(selectedArea) {
if ( mapLoaded ) {
    map.panTo(selectedArea, 10);
} else {
    $('#map').show();
    $('html, body').animate({ scrollTop: $(document).height () }, 'slow')

    var map = L.map('map').setView(selectedArea, 10);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    mapLoaded = true;
}

selectedArea 只是 returns 基于用户按钮点击的坐标数组，如 [33.843970009，-118.170583372]，并且 mapLoaded 是一个全局函数，在页面加载时设置为 false。

有什么想法吗？

非常感谢！

泰勒

Answer 1

您的操作是否完美？只要您确保定义地图和加载标志的变量是在您用来创建或平移地图的函数之外声明的：

var map, loaded, coordinates = [[-25, -25], [-25, 25], [25, -25], [25, 25]];

function getMap(coordinate) {
    if (loaded) {
        map.panTo(coordinate, 2);
    } else {
        map = new L.Map('leaflet', {
            'center': coordinate,
            'zoom': 2,
            'layers': [
                new L.TileLayer('//{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
                    'attribution': '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
                })
            ]
        });
        loaded = true;
    }
}

L.DomEvent.addListener(L.DomUtil.get('button'), 'click', function () {
    getMap(coordinates[Math.floor(Math.random() * coordinates.length)]);
});

body {
    margin: 0;
}

#leaflet {
    width: 400px;
    height: 300px;
}

<!DOCTYPE html>
<html>
  <head>
    <link type="text/css" rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  </head>
  <body>
    <button id="button">Change coordinate</button>
    <div id="leaflet"></div>
    <script type="application/javascript" src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
  </body>
</html>

也许您的代码中有其他东西扰乱了 map 或 mapLoaded 变量？

仅供参考：您不必 set/use 标志来标记已加载，您可以使用 [=18= 检查 map 变量是否包含 L.Map 的实例] 运算符：

The instanceof operator tests whether an object has in its prototype chain the prototype property of a constructor.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof

var map, coordinates = [[-25, -25], [-25, 25], [25, -25], [25, 25]];

function getMap(coordinate) {
    if (map instanceof L.Map) {
        map.panTo(coordinate, 2);
    } else {
        map = new L.Map('leaflet', {
            'center': coordinate,
            'zoom': 2,
            'layers': [
                new L.TileLayer('//{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
                    'attribution': '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
                })
            ]
        });
    }
}

单击按钮时移动视图区域

Moving the view area when a button is clicked

leaflet