Leaflet: pan map to new set of coordinates at new zoom-level on user action

孤者浪人 提交于 2019-12-24 18:05:10

问题


I have a web app with a list of GPS-check-ins from field agents.

I would like to pan/zoom the current map/view when a check-in item from the list is clicked.

I have setup the leaflet map and click event like so:

function checkin_clicked(dt, mobile, address, lat, lon) {
    console.log(dt, mobile, address, lat, lon);

    var html = '<div style="width: 300px;" class="message"><img class="message-avatar" src="media/profile-pics/{mobile}.jpg" alt="">    <a class="message-author" href="#"> {name} </a>    <span class="message-date"> {date} </span>    <span class="message-content">    {address}    </span></div>'

    html = html.replace("{address}", address);
    html = html.replace("{mobile}", mobile);
    html = html.replace("{date}", dt);
    html = html.replace("{name}", mobile);

    map.setView([lat, lon], 14);

    var popup = L.popup()
            .setLatLng([lat,lon])
            .setContent(html)
            .openOn(map);
}

function setup_map() { var map = L.map('map').setView([8.2, 6.95], 7);

L.tileLayer('http://localhost/tileserver/tiles.aspx?z={z}&x={x}&y={y}', {
    minZoom: 7, maxZoom: 18,
}).addTo(map);

}

Please how do I perform this action.

I have seen this: How to change the map center in leaflet and https://stackoverflow.com/a/12735612/44080

But in my case I need to adjust the zoom level while panning.

Edit: I added map.setview in my click event, now i get this error:

 "Map container is already initialized" 

来源:https://stackoverflow.com/questions/35740338/leaflet-pan-map-to-new-set-of-coordinates-at-new-zoom-level-on-user-action

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!