Leaflet 单击按钮时移动视图区域

Leaflet 单击按钮时移动视图区域,leaflet,Leaflet,这件事让我毛骨悚然 我有一个地图,当一个按钮被点击时加载,我希望它在其他按钮被点击时将地图移动到一个新的区域。但是,如果单击另一个按钮,则会出现错误“映射容器已初始化” 我尝试在那里添加一个条件,如果地图已经加载,则平移到一个新位置,但是我得到“无法读取未定义的属性”panTo 以下是地图加载功能的外观: function getMap(selectedArea) { if ( mapLoaded ) { map.panTo(selectedArea, 10); } else {

这件事让我毛骨悚然

我有一个地图,当一个按钮被点击时加载,我希望它在其他按钮被点击时将地图移动到一个新的区域。但是,如果单击另一个按钮,则会出现错误“映射容器已初始化”

我尝试在那里添加一个条件,如果地图已经加载,则平移到一个新位置,但是我得到“无法读取未定义的属性”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;
}
函数getMap(selectedArea){
如果(已加载贴图){
panTo地图(选定区域,10);
}否则{
$('#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'{
属性:“©;贡献者”
}).addTo(地图);
mapLoaded=true;
}
selectedArea根据用户点击按钮返回一个坐标数组,如[33.843970009,-118.170583372],mapLoaded是一个全局函数,在pageload时设置为false

有什么想法吗

非常感谢


Tayler

您所做的工作非常有效?只要您确保定义映射和加载标志的变量在用于创建或平移映射的函数之外声明:

var映射,已加载,坐标=[-25,-25],-25,25],[25,-25],[25,25];
函数getMap(坐标){
如果(已加载){
panTo地图(坐标,2);
}否则{
map=新的L.map(“传单”{
“中心”:坐标,
“缩放”:2,
“层”:[
新的L.TileLayer('/{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'{
“归属”:“©;贡献者,©;”
})
]
});
加载=真;
}
}
L.DomEvent.addListener(L.DomUtil.get('button'),'click',函数(){
getMap(坐标[Math.floor(Math.random()*coordinates.length)];
});
正文{
保证金:0;
}
#传单{
宽度:400px;
高度:300px;
}

变换坐标

你是对的,我只是在胡闹。我在错误的地方申报了我的地图。谢谢你给我指明了正确的方向。