javascript - 使用 Mapbox 地理编码器将地址转换为坐标的未定义错误
问题描述
我第一次使用 Mapbox 地理编码器服务,我试图获取坐标(纬度和经度)作为地址搜索的结果,我做到了,但是当我尝试将此结果插入两个输入时,输入搜索将选择的地址更改为“未定义”,我现在不知道为什么。我希望将坐标输入两个输入,但也将所选地址保留在输入搜索中。这是显示错误的图像:
这是我现在拥有的代码:
mapboxgl.accessToken = 'pk.eyJ1IjoiY2FybWVuOTIiLCJhIjoiY2s2cGljM3ZzMW1udjNlbnkxZmMzdXJ3ZCJ9.HJQPFlX5VUh6wlS18R3bFw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40], // starting position
zoom: 9 // starting zoom
});
var geocoder = new MapboxGeocoder({ // Initialize the geocoder
accessToken: mapboxgl.accessToken, // Set the access token
marker: {
color: 'orange'
},
mapboxgl: mapboxgl // Set the mapbox-gl instance
getItemValue: e => {
document.getElementById('LocationLongitude_listingAdd').value = e['center'][0]; //long
document.getElementById('LocationLatitude_listingAdd').value = e['center'][1]; //lat
document.getElementsByClassName('mapboxgl-ctrl-geocoder--input').value = e['place_name']; //lat
}
});
document.getElementById('geocode_container').appendChild(geocoder.onAdd(map));
#container_map{ position: relative; width: 100%; height: 400px;}
#map { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; }
.mapboxgl-ctrl-geocoder--input{min-width: 100%; width: 100%; border: 1px solid #DFE3E7 !important; border-radius: 0.267rem !important; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;}
#map .mapboxgl-canvas-container canvas
{
width: 100% !important;
height: 400px !important;
}
.mapboxgl-ctrl-geocoder--input:focus{
border-color: #5A8DEE !important;
outline: 0 !important;
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1) !important;
}
.coordinates-result input { display: inline-block; }
@media screen and (min-width: 640px)
{
.mapboxgl-ctrl-geocoder
{
width: 100% !important;
font-size: 12px;
line-height: 20px;
}
}
.mapboxgl-ctrl-geocoder, .mapboxgl-ctrl-geocoder .suggestions {
box-shadow: none !important;
}
<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<!-- BEGIN: Head-->
<head>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css" rel="stylesheet" /></head>
<body>
<div id="map"></div>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
</body>
</html>
如何获取在 Mapbox 上搜索地址的结果坐标并将地址和坐标保留在其输入中,因为我会将这些数据保存在数据库中。
解决方案
您需要在 getItemValue 方法中返回 [place_name]。
前任:
getItemValue: e => {
document.getElementById('LocationLongitude_listingAdd').value = e['center'][0]; //long
document.getElementById('LocationLatitude_listingAdd').value = e['center'][1]; //lat
return e['place_name'];
}
推荐阅读
- entity-framework-core - dotnet ef migrations add:仅在有更改时创建迁移文件
- hive - 解析数组
在 Hive 中使用 OPEN CSV SEREDE - postgresql - 在同一台服务器中设置多个 postgresql 10 实例
- java - 使用批处理运行多个 java 程序
- twitter-bootstrap - 如何使用 Browserify / Gulp 要求 Bootstrap 4 依赖项(jQuery 和 Popper.js)
- c++11 - C++ Randomly Generate Simple Code To Make A Syntactically Correct Programs?
- python - 尝试从 DataFrame 或 Matrix 创建热图
- virtualbox - Two host only networks do not see each other. Why?
- python - 如何在正确的 if 语句之前打印第 X 行
- javascript - 在 JavaScript 中创建“运行循环”的最佳解决方案