使用 API 请求中的 Lat 和 Long 详细信息更新传单标记

Question

我正在从 API 请求中获取经纬度数据，如下所示，但我希望每次在下拉菜单 (selCountry) 中更改国家/地区时更新 markef。


$('#selCountry').on('change', function(){
  $.ajax({
      url: "php/restCountries.php",
      type: 'POST',
      dataType: 'json',
      data: {
          country: $('#selCountry').val()   
      },
      success: function(result) {
        
          console.log('restCountries', result);
          if (result.status.name == "ok") {
              currencyCode = result.currency.code;
              iso2CountryCode = result.data.alpha2Code;
              var countryName2 = result.data.name;
              countryName = countryName2.replace(/\s+/g, '_');
              var latlng = result.data.latlng
              
              $('#countryName').html('<strong> Country: ' + result['data']['nativeName'] + '</strong>');
              $('#txtCurrencyCode').html('<strong> Capital City: ' + result['data']['capital'] + '<br> Currency Symbol: '+ result.currency.symbol + '<br> Currency Name: '  + result.currency.name + '<br> Currency Code: ' + result.currency.code + '</strong>');
              
              console.log(result.data.latlng);

我已经尝试将标记详细信息更改为 latlng 信息，该信息会在选择新国家/地区时更新，但标记不会更新。我错过了什么？

我在 ajax 调用之外有标记，如果我将它移到调用内部，整个地图就会崩溃并且无法加载。

L.marker([latlng], {icon: redMarker}).bindPopup(result['data']['capital']).addTo(map);

如有任何建议，我们将不胜感激。

谢谢

Answer 1

设法找到使请求生效的方法。我将 latlng 数据分离到变量中，并将它们输入到标记语句中。

它现在为每个选定的国家更改添加一个标记。

$('#selCountry').on('change', function(){
  $.ajax({
      url: "php/restCountries.php",
      type: 'POST',
      dataType: 'json',
      data: {
          country: $('#selCountry').val()   
      },
      success: function(result) {
        
          console.log('restCountries', result);
          if (result.status.name == "ok") {
              currencyCode = result.currency.code;
              iso2CountryCode = result.data.alpha2Code;
              var countryName2 = result.data.name;
              countryName = countryName2.replace(/\s+/g, '_');
              
              $('#countryName').html('<strong> Country: ' + result['data']['nativeName'] + '</strong>');
              $('#txtCurrencyCode').html('<strong> Capital City: ' + result['data']['capital'] + '<br> Currency Symbol: '+ result.currency.symbol + '<br> Currency Name: '  + result.currency.name + '<br> Currency Code: ' + result.currency.code + '</strong>');
              
              //console.log(result.data.latlng[0]);
              
              var currentLat = result.data.latlng[0]
              var currentLng = result.data.latlng[1]
              
                marker = L.marker;
              
               L.marker([currentLat, currentLng], {icon: redMarker}).addTo(map);
             
        };

快乐的日子！

使用 API 请求中的 Lat 和 Long 详细信息更新传单标记

Updating a Leaflet Marker With Lan & Long Details From an API Request

ajax

leaflet

leaflet.markercluster