根据更新的坐标平移/将Leaflet地图移动到新位置/单击

Question

我已经很接近这个目标了，但我糟糕的 Javascript 让我失望了。

我一直坚持向 Leaflet 地图添加事件侦听器 addListener() 或 on() 来移动地图。

在我的非营利性古代遗址网站上，我有一个页面，您可以在其中根据城镇名称查找来查找并跳转到某个位置。 这是我正在尝试更新的带有 Google 地图的旧版本： https://www.megalithic.co.uk/searchtown.php 搜索城镇名称（例如切达），单击名称以在地图上显示位置，然后再次单击不同的城镇名称以将地图移动到新位置。

这是新的Leaflet版本。当您单击将现有地图移动到其他位置时，代码会正常工作。上传至此处： https://www.megalithic.co.uk/searchtown-leaflet.php

我一直在关注的几个例子： 单击按钮时移动视图区域 和 https://groups.google.com/g/leaflet-js/c/Q9XUc7ArJeI?pli=1

非常感谢您的帮助

我的代码：

echo "
<script type=\"text/javascript\">

// this function will be called by our JSON callback
// the parameter jData will contain an array with geonames objects
function getLocation(jData) {
  if (jData == null) {
    // There was a problem parsing search results
    return;
  }

  var html = '';
  var geonames = jData.geonames;
  for (i=0;i< geonames.length;i++) {
     var name = geonames[i];
     // we create a simple html list with the geonames objects
     // the link will call the center() javascript method with lat/lng as parameter
     html = html + '<a href=\"javascript:center(' + name.lat +',' + name.lng + ');\">' + name.name + '</a><br><br>';
  }
  document.getElementById('resultDiv').innerHTML = html;
}

function center(lat,lng){
  if (map instanceof L.map) {
        map.panTo([lat, lng], 2);
        //map.setView([lat, lng], 13); // alternative from https://groups.google.com/g/leaflet-js/c/Q9XUc7ArJeI?pli=1
    } else {
    var map = L.map('map').setView([lat, lng], 13);
    var tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>'
    }).addTo(map);
    }
    var latitude = document.getElementById(\"latitude\");
    var longitude = document.getElementById(\"longitude\");
    latitude.value = lat;
    longitude.value = lng;
    L.DomEvent.addListener (map, \"click\", function (e) {
       latitude.value  = e.latLng.lat().toFixed(6)
       longitude.value = e.latLng.lng().toFixed(6);
    });

}

// previous version of function that worked on Google Maps
function center_old_google(lat,lng){
        var myOptions = {
          center: new google.maps.LatLng(lat,lng),
          zoom: 10,
          scaleControl: true,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById(\"goomap\"),
            myOptions);
  var latitude = document.getElementById(\"latitude\");
  var longitude = document.getElementById(\"longitude\");
  latitude.value = lat;
  longitude.value = lng;
google.maps.event.addListener(map, \"click\", function (e) {
       latitude.value  = e.latLng.lat().toFixed(6)
       longitude.value = e.latLng.lng().toFixed(6);
    });
}

// TO DO CONVERT THIS FROM GOOGLE TO LEAFLET
//google.maps.event.addListener(map, \"click\", function (e) {
//       latitude.value  = e.latLng.lat().toFixed(6)
//       longitude.value = e.latLng.lng().toFixed(6);
//});

// from example here: https://stackoverflow.com/questions/35575428/moving-the-view-area-when-a-button-is-clicked
//map.addListener(map, \"click\", function (e) {
//    center(lat,lng)
//});

// calls the geonames JSON webservice with the search term
function search() {
  request = 'https://secure.geonames.org/searchJSON?q=' +  encodeURIComponent(document.getElementById('q').value)  + '&maxRows=10&callback=getLocation&username=mega';

  // Create a new script object
  // Build the script tag
  aObj.buildScriptTag();
  // Execute (add) the script tag
  aObj.addScriptTag();
}

</script>
<script src=\"https://unpkg.com/[email protected]/dist/leaflet.js\"></script>
";

Answer 1

检查您的控制台日志。它说：

Map.js:1105 Uncaught Error: Map container is already initialized.
at i._initContainer (Map.js:1105:10)
at i.initialize (Map.js:136:8)
at new i (Class.js:22:20)
at t.map (Map.js:1728:9)
at center (searchtown-leaflet.php:277:17)
at <anonymous>:1:1

在尝试重新加载地图之前删除先前的地图元素。

if (map != undefined) { map.remove(); } 

了解更多详情