问题
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