传单地图重新加载 onclick

Question

我有一个图片缩略图库和一个图片查看器。每个图像都有不同的#id，并附有lat 和long。我在单击缩略图时触发了一系列onclick 事件。 imagename、lat 和 long 信息存储在 mysql 表中。以下是我目前写的函数。

function clickedImage(clicked_id) {
//series of functions
  $.post("getLatLong.php",{"clickedimag":clickedImg},function(data){
    var ll = JSON.parse(data);
    var lat = parseFloat(ll[0]);
    var long = parseFloat(ll[1]);
    var pname = ll[2];
    localStorage.setItem('lat',lat);
    localStorage.setItem('long',long);
    localStorage.setItem('cpname',pname);
    //alert([lat,long]);
  });
//Series of functions    
}

我的所有其他功能都在工作，包括我能够将经纬度、长信息保存到 localStorage。上述功能中的警报清楚地弹出，并附有图像的经度和经度。为了渲染地图，我使用了传单页面中给出的模板。

$(function(){
  var la = localStorage.getItem('lat');
  var lon = localStorage.getItem('long');
  var cpname = localStorage.getItem('cpname');
  var mymap = L.map('mapid').setView([la,lon], 13);
  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Ima$
  maxZoom: 18,
  id: 'mapbox/streets-v11',
  tileSize: 512,
  zoomOffset: -1,
  accessToken: 'my.access.token'
  }).addTo(mymap);
  var marker = L.marker([la, lon]).addTo(mymap);
  marker.bindPopup("<b>" + cpname +"</b>").openPopup();  
});

上面的代码可以正常工作并正确呈现地图，但是，只有当我刷新页面时。它不会异步更改地图。这个功能我也试过了：

function getMyMap(la,lon) {  
  var la = localStorage.getItem('lat');
  var lon = localStorage.getItem('long');
  var mymap = L.map('mapid').setView([la,lon], 13);
  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Ima$
  maxZoom: 18,
  id: 'mapbox/streets-v11',
  tileSize: 512,
  zoomOffset: -1,
  accessToken: 'myaccesstoken'
  }).addTo(mymap);
}

并在我的 onClick 事件中调用此函数。我得到了同样的结果。

HTML

<div class="rhsbar" id="rhsbar"  style="overflow:hidden;display:flex;flex-direction:column;">
<div id="mapid" >Loading map</div>
</div>

var h = $("#rhsbar").height();
var w = $("#rhsbar").width()+100;

document.getElementById("mapid").style.height=h+"px";
document.getElementById("mapid").style.width=w+"px";

如何在不刷新页面的情况下使用新坐标更新地图。

Answer 1

你需要的是：

your_mapid.fitBounds(your_mapid.getBounds());

每当有变化时，它都会对地图进行软刷新。