Javascript 传单。地理研究：从地址获取lon/lat

在没有任何JS知识的情况下，我被迫在一个网页上实现一个地图（通过传单实现OSM）。在这张地图上，应该有一个人实际地址的标记。该地址保存为数据库中的字符串。 我可以看到一张地图，可以给它添加标记，但在那之后，我就迷路了

我已经测试了一些传单地理编码插件，但我必须承认，对于我的实际编程经验来说，它们不够简单

另一个是关于同样的问题，但我不明白，如何从一个带有-插件的地址获取lon/lat

---

有谁能给我举个例子来查找地址（通过OSMN或其他方式，而不是google/bing或其他需要api密钥的提供商），将其转换为lon/lat并在地图上添加标记

首先，您必须将地理编码器的.js文件包含在HTML代码的头部，例如，我使用了以下示例：。像这样：

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

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

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);
});

---

我做了一把JF小提琴

有一个地址集

使用geosearch查找该地址的坐标

在geosearch找到的地址坐标处创建标记

可以在这里找到：

“棘手”的部分是处理geosearch返回的Javascript“Promise”实例，在这种情况下，地址可能是模糊的，并且可能返回多个坐标。另外，要小心，因为传单坐标中的第一个位置对应于纬度，第二个位置对应于经度，这与地理搜索“x”和“y”结果相反

Geosearch返回一个承诺，因为它是一个异步调用。另一种选择是同步呼叫，浏览器必须冻结，直到检索到应答为止。更多关于承诺和承诺的信息

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

代码细目：

<!-- 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>

//将地图初始化为指定坐标
var map=L.map（'map'{
中心：[51.5，-0.1]，//小心！！！第一个位置对应于纬度（y），第二个位置对应于经度（x）
缩放：12
});
//添加瓷砖（街道等）
L.tileLayer（'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；”，
子域：['a'，'b'，'c']
}).addTo（地图）；
var query_addr=“英国伦敦SE1 0JF南华街99号”；
//获取提供程序，在本例中是OpenStreetMap（OSM）提供程序。
const provider=new window.GeoSearch.openstreetmaprovider（）
//查询地址
var query\u promise=provider.search（{query:query\u addr}）；
//等我们对承诺有了答复再说
查询承诺。然后（值=>{
对于（i=0；i”+标签）.openPopup（）；
};
}，原因=>{
console.log（原因）；//错误！
} );

您可以从Nagnitm获得地址的lat/lon。我不知道如何把它放到你的传单地图中，对不起。我不会发布答案，因为我使用openlayers，但你可以在.Upvote中有一个想法，因为它可以工作，但很奇怪，

L

在哪里声明？@Mawg，L对应于传单，所以可能在

layer.js

中，我不知道具体在哪里。我没有发现这里有描述，但它是AngularJs传单指令示例的最终站点。我想我不需要知道它是在哪里声明的，只需要知道它：-）@Mawg，

spool.js

定义一个函数，然后将gobal变量

window

和

document

传递给它。它在说明“t.L=…”中定义了文档的L。您可以使用unnify.com取消对代码的整理，并在浏览器（Firefox、Chrome等）中通过将“t.L”的所有外观重命名为“t.G”或其他任何形式，并检查传单是否加载到G而不是L。

<!-- 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>