leaflet - 如何使用 esri-leaflet-geocoder 将标记地址从本地语言更改为英语?
问题描述
我的网站上有一张传单地图,例如
var map = L.map('map').setView([25.0750853, 54.9475437], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
marker = new L.marker([25.0750853, 54.9475437], {draggable:'true'});
marker.on('dragend', function(event){
var marker = event.target;
var position = marker.getLatLng();
marker.setLatLng(new L.LatLng(position.lat, position.lng),{draggable:'true'});
map.panTo(new L.LatLng(position.lat, position.lng))
getAddress(position);
});
map.addLayer(marker);
var geocodeService = L.esri.Geocoding.geocodeService();
function getAddress(position) {
geocodeService.reverse().latlng(position).run(function (error, result) {
if (error) {
return;
}
alert(result.address.Match_addr);
});
}
这是我的地图代码。当我移动标记时,我想获取位置地址。但是我正在获取本地语言的地址。如何将地址语言更改为英文
解决方案
您需要指定language("eng")
使其正常工作
function getAddress(position) {
geocodeService.reverse().latlng(position).language("eng") // here make the change
.run(function(error, result) {
if (error) {
return;
}
alert(result.address.Match_addr);
});
}
<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/perliedman-leaflet-control-geocoder/1.12.1/Control.Geocoder.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@2.3.3/dist/esri-leaflet.js"></script>
<!-- Load Esri Leaflet Geocoder from CDN -->
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.3.2/dist/esri-leaflet-geocoder.css" />
<script src="https://unpkg.com/esri-leaflet-geocoder@2.3.2/dist/esri-leaflet-geocoder.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
var map = L.map('map').setView([25.0750853, 54.9475437], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
marker = new L.marker([25.0750853, 54.9475437], {
draggable: 'true'
});
marker.on('dragend', function(event) {
var marker = event.target;
var position = marker.getLatLng();
marker.setLatLng(new L.LatLng(position.lat, position.lng), {
draggable: 'true'
});
map.panTo(new L.LatLng(position.lat, position.lng))
getAddress(position);
});
map.addLayer(marker);
var geocodeService = L.esri.Geocoding.geocodeService();
function getAddress(position) {
geocodeService.reverse().latlng(position).language("eng")
.run(function(error, result) {
if (error) {
return;
}
alert(result.address.Match_addr);
});
}
</script>
</body>
</html>
推荐阅读
- c# - 如何从更大的列表创建子列表以在 MVC 中循环
- listview - Flutter:水平列表视图的最小高度
- c - 使用指针算术求和数字
- php - 从 Woocommerce 的订单页面完成付款后更新订单元数据
- java - iText7 (PdfSweep):编辑文本时出现 NullPointerException
- eclipse-plugin - 如何像上次一样刷新 TreeViewer 并展开节点?
- foreach - Makefile:根据来自foreach的参数将不同的变量值传递给相同的目标
- javascript - 花式框中的箭头和键
- sharepoint - 通过 API 获得权限
- javascript - 如何在同一函数内选择一个使用 innerHTML 启动的类