如何从MySQL数据库获取数据展示在Leaflet地图及相关报错排查

问题现象 #

实现从MySQL数据库调取数据并在Leaflet地图上展示标记点，控制台持续报错：Unchecked runtime.lastError: The message port closed before a response was received.，且标记点无法正常显示。

已引入依赖 #

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

现有业务代码 #

<script type="text/javascript"> 
 var map = L.map('map').setView([22.5726, 88.3639], 4);
 L.tileLayer('https://api.maptiler.com/maps/basic/256/{z}/{x}/{y}.png?key=dVhthbXQs3EHCi0XzzkL',{
   attribution:
   '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
 }).addTo(map);
 var marker = L.marker([22.5726, 88.3639]).addTo(map);
 var city = L.markerClusterGroup();
  var Points = $.getJSON("get_location.php", function(data) {      
 for (var i = 0; i < data.length; i++) {
   var new_location = new L.LatLng(data[i].latitude, data[i].longitude);
   var place = data[i].place;
   var marker = new L.Marker(new_location, {
     title: place
   });
   var message = 'Place name: ' +place;
   marker.bindPopup(message);
   city.addLayer(marker);

      if (data[i].latitude < SWlat) {SWlat = data[i].latitude}
      if (data[i].longitude < SWlng) {SWlng = data[i].longitude}
      if (data[i].latitude > NElat) {NElat = data[i].latitude}
      if (data[i].longitude > NElng) {NElng = data[i].longitude}

 }
  });
  Points.done(function() {
  locSW = new L.LatLng(SWlat, SWlng);
  locNE = new L.LatLng(NElat, NElng);
  mapBounds = L.latLngBounds(locSW, locNE);
  map.fitBounds(mapBounds);
  });
 map.addLayer(city);
</script>

问题修复方案 #

• 修复边界变量未初始化的问题：SWlat、SWlng、NElat、NElng四个边界变量未定义初始值，直接参与大小比较会得到非法值，导致边界计算失败。需要在遍历点位逻辑前添加初始化代码：

// 放在getJSON回调的遍历逻辑之前
var SWlat = 90, SWlng = 180, NElat = -90, NElng = -180;

• 调整异步逻辑结构：把边界计算、适配视野的逻辑直接放到getJSON的成功回调末尾，避免异步请求的作用域问题导致变量访问失败。
• 后端接口校验：打开浏览器控制台的网络面板检查get_location.php请求，确认接口返回状态码为200，返回的JSON格式合法，所有返回条目都包含latitude、longitude、place字段，且经纬度字段值为有效数字。
• 避免变量名冲突：已定义了全局marker变量，循环内重复定义同名变量会引发作用域污染，修改循环内的标记变量名为pointMarker即可。
• 排除扩展干扰：该报错可能为浏览器扩展注入脚本引发，禁用所有浏览器扩展后重新测试，排除非业务代码引发的问题。

内容的提问来源于stack exchange，提问作者drika