使用来自API的值触发更改。
P粉633309801
2023-07-30 15:33:31
<p>我正在处理一个项目，在这个项目中，我需要获取当前的坐标，并将它们保存为变量，然后将这些参数发送到GeoNames，以获取国家代码。这个国家代码将用于触发一个更改事件，作用于一个下拉菜单（之前已经填充了国家代码作为值），该下拉菜单将显示一个国家的边界（使用geoJSON）。如果我实际上在菜单上点击任何一个国家，它都可以正常工作，但是当我从GeoNames获取到代码后，我无法触发更改事件。每当我在获取到国家代码后添加这行代码时，问题就出现了。</p>
<pre class="brush:php;toolbar:false;">$('#countrySelect').val('currCode').change();</pre>
<p>除了不起作用之外，我还收到了这个错误：Map.js:291 Uncaught Error: Bounds are not valid.</p><p>有人知道我做错了什么吗？（我正在使用php进行解码，并且我从leaflet获取地图）。</p><p>以下是详细信息：</p><p>这个代码用于填充下拉菜单：</p><p><br /></p>
<pre class="brush:php;toolbar:false;">$.ajax({
url: "libs/php/geoJson.php",
type: "POST",
dataType: "json",
success: function(result) {
//console.log(result);
for (var i=0; i<result.data.border.features.length; i++) {
$('#countrySelect').append($('<option>', {
value: result.data.border.features[i].properties.iso_a3,
text: result.data.border.features[i].properties.name,
}));
}
}
});</pre>
<p>当手动选择国家时，这将创建边界（并且它可以正常工作）。</p>
<pre class="brush:php;toolbar:false;">var border;
$('#countrySelect').on("change", function() {
let name = $('#countrySelect').val();
//get + show border
$.ajax({
url: "libs/php/geoJson.php",
type: 'POST',
dataType: 'json',
success: function(result) {
const filterData = result.data.border.features.filter((a) => (a.properties.iso_a3 === name));
border = L.geoJSON(filterData[0]).addTo(map);
map.fitBounds(border.getBounds());
},
});
});</pre>
<p>这部分代码尝试获取坐标（似乎可以正常工作），将它们传递给GeoNames以获取国家代码（似乎也可以正常工作），然后触发上述的更改事件（但这部分不起作用）。</p>
<pre class="brush:php;toolbar:false;">navigator.geolocation.getCurrentPosition(success);
function success(position) {
let lat = position.coords.latitude;
let lng = position.coords.longitude;
let coords = {"lat": lat, "lng": lng};
//AJAX request with coords to geoNames to get country code
$.ajax({
url: "libs/php/getCurrentCode.php",
type: "POST",
dataType: "json",
data: coords,
success: function(result) {
console.log(JSON.stringify(result));
if (result.status.name == "ok") {
$(result["data"]["countryCode"]);
let currCode = result.data;
console.log(currCode);
//trigger change with retrieved code
$('#countrySelect').val('currCode').change();
};
};
});
};</pre>
<p>我的 php:</p>
<pre class="brush:php;toolbar:false;">ini_set('display_errors', 'On');
error_reporting(E_ALL);
$executionStartTime = microtime(true);
$url='http://api.geonames.org/countryCodeJSON?&lat=' . $_REQUEST['lat'] . '&lng=' . $_REQUEST['lng'] . '&username=&style=full';
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL,$url);
$result=curl_exec($ch);
curl_close($ch);
$decode = json_decode($result,true);
$output['status']['code'] = '200';
$output['status']['name'] = 'ok';
$output['status']['description'] = 'success';
$output['status']['returnedIn'] = intval((microtime(true) - $executionStartTime) * 1000) . ' ms';
$output['data'] = $decode['countryCode'];
//var_dump($decode);
header('Content-Type: application/json; charset=UTF-8');
echo json_encode($output);</pre>
<p><br /></p>
$('#countrySelect').val('currCode').change();这将把值设置为字面字符串currCode。您想将其设置为变量currCode中的值。为了做到这一点，请删除引号：
$('#countrySelect').val(currCode).change();