Leaflet.Geosearch：从地址获取经纬度

Question

Leaflet.Geosearch：从地址获取经纬度

javascriptleafletgeocoding

8

我没有JS知识，但被迫在网页上实现一个地图(OSM通过Leaflet)。在这张地图上，应该有一个标记表示一个人的实际地址。该地址保存为数据库中的字符串。我可以看到地图，并在地图上添加标记，但之后我就不知道该怎么做了。

我测试了一些Leaflet-geocoding-plugins，但必须承认，它们对我的实际编程经验来说并不够简单。

另一个问题是关于同样的问题，但我不明白如何使用L.Geosearch-plugin for Leaflet从地址获取lon/lat。

有人能够为我提供一个示例，查找地址(via OSMN或其他方式，而不是google / bing或其他需要API密钥的提供商)，将其转换为lon/lat并在地图上添加标记吗？

- Gromden

1

你可以从nominatim http://open.mapquestapi.com/nominatim/获取地址的经纬度。如何将其放入你的leaflet地图中，我不知道，抱歉。 - Gwny

1

我不会提供答案，因为我使用的是openlayers，但你可以在这个例子中得到一个想法。 - Jonatas Walker

2个回答

8

我做了一个jsfiddle，它：

设置了地址
使用geosearch查找该地址的坐标
在geosearch找到的那个地址的坐标处创建了一个标记。

您可以在此处找到它：https://jsfiddle.net/Alechan/L6s4nfwg/ “棘手”的部分是处理由geosearch返回的Javascript“Promise”实例，以及地址可能不明确并且在这种情况下可能返回多个坐标。此外，请注意，Leaflet坐标中的第一个位置对应于纬度，第二个位置对应于经度，这与Geosearch“x”和“y”结果相反。

Geosearch返回一个Promise，因为它是一个异步调用。另一种选择将是同步调用，浏览器将被冻结，直到获得答案。有关promises的更多信息来自MDM（Mozilla）和Google。

在我的示例中，我为找到的每个结果创建一个标记。但是，在这种情况下，地址是明确的，并且只返回一个结果。

代码细节：

<!-- Head, imports of Leaflet CSS and JS, Geosearch JS, etc -->

<div id='map'></div>


<script>
// Initialize map to specified coordinates
  var map = L.map( 'map', {
    center: [ 51.5, -0.1], // CAREFULL!!! The first position corresponds to the lat (y) and the second to the lon (x)
    zoom: 12
});

  // Add tiles (streets, etc)
  L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: ['a','b','c']
}).addTo( map );

var query_addr = "99 Southwark St, London SE1 0JF, UK";
// Get the provider, in this case the OpenStreetMap (OSM) provider.
const provider = new window.GeoSearch.OpenStreetMapProvider()
// Query for the address
var query_promise = provider.search({ query: query_addr});
// Wait until we have an answer on the Promise
query_promise.then( value => {
   for(i=0;i < value.length; i++){
     // Success!
     var x_coor = value[i].x;
     var y_coor = value[i].y;
     var label = value[i].label;
     // Create a marker for the found coordinates
     var marker = L.marker([y_coor,x_coor]).addTo(map) // CAREFULL!!! The first position corresponds to the lat (y) and the second to the lon (x)
     // Add a popup to said marker with the address found by geosearch (not the one from the user)
     marker.bindPopup("<b>Found location</b><br>"+label).openPopup();
   };
}, reason => {
  console.log(reason); // Error!
} );

</script>

- Alechan

点赞，因为它有效，但是好奇 - L 在哪里声明的？ - Mawg says reinstate Monica

1

@Mawg，L对应Leaflet，因此可能在leaflet.js中，但我不确定具体位置。 - Alechan

1

我在那里没有找到它的描述，但是这个网站(http://angular-ui.github.io/ui-leaflet/)是AngularJs Leaflet指令示例的权威网站。我想我不需要知道它在哪里声明，只需要意识到它就好了 :-) - Mawg says reinstate Monica

1

@Mawg，“leaflet.js”定义了一个函数，然后将全局变量“window”和“document”传递给它。它在指令“t.L = ...”中定义了文档的L。您可以使用unminify.com解密代码，并在浏览器（Firefox、Chrome等）中尝试重命名所有出现的“t.L”为“t.G”或其他名称，以检查是否已将Leaflet加载到G而不是L中。 - Alechan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Titsjmen · Accepted Answer

首先，您需要在HTML代码头部包含地理编码器的.js文件。在我的例子中，我使用了这个：https://github.com/perliedman/leaflet-control-geocoder。代码如下:

<script src="Control.Geocoder.js"></script>

然后，您需要在.js文件中初始化Geocoder：

geocoder = new L.Control.Geocoder.Nominatim();

然后，您需要指定要查找的地址，可以将其保存在变量中。例如：

var yourQuery = (Addres of person);

您也可以从数据库中获取地址，然后将其保存在变量中。

接着，您可以使用以下代码将您的地址“地理编码”为纬度/经度。此函数将返回地址的纬度/经度。您可以将纬度/经度保存在变量中，以便后续在标记中使用。然后，您只需要将该标记添加到地图上即可。

geocoder.geocode(yourQuery, function(results) {    
       latLng= new L.LatLng(results[0].center.lat, results[0].center.lng);
       marker = new L.Marker (latLng);
       map.addlayer(marker);
});