Question

我把头发拉过这个！

我有一张地图在点击按钮时加载，我希望在点击其他按钮时将地图移动到新区域。但是，如果单击另一个按钮，我会收到错误“地图容器已初始化。”

我尝试在那里添加一个条件，如果已经加载了地图，那么平移到一个新的位置，但是我得到'无法读取属性'未定义的'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只返回一个坐标数组，如[33.843970009，-118.170583372]，基于用户点击按钮，mapLoaded是一个全局函数，在页面加载时设置为false。

有什么想法？

非常感谢！

泰勒

Answer 1

你做的很完美吗？只要您确保定义map和loaded标志的变量在您用于创建或平移地图的函数之外声明：

＆＃13;

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)]);
});

＆＃13;

body {
    margin: 0;
}

#leaflet {
    width: 400px;
    height: 300px;
}

＆＃13;

<!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>

＆＃13;

也许您的代码中有其他内容弄乱了map或mapLoaded变量？

仅供参考：您不必设置/使用标记来标记已加载您只需使用map运算符检查L.Map变量是否包含instanceof的实例：

instanceof运算符测试对象在其原型链中是否具有构造函数的prototype属性。

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>'
                })
            ]
        });
    }
}

单击按钮时移动视图区域

1 个答案: