javascript 根据传单给出的地址获取纬度和经度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15919227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
get latitude & longitude as per address given for leaflet
提问by vaibhav shah
In my project I am using leaflet to display points.
在我的项目中，我使用传单来显示点。
I am getting address from my database & want to show point for that particular address.
我正在从我的数据库中获取地址并希望显示该特定地址的点。
I haven't found anything which will give me latitude & longitude as per address provided.
我没有找到任何可以根据提供的地址为我提供纬度和经度的信息。
Can anyone help me on this?
谁可以帮我这个事？
回答by movAX13h
If you want to use OpenStreetmaps for this, you can simply make a request (using jquery):
如果您想为此使用 OpenStreetmaps，您只需发出一个请求（使用 jquery）：
$.get(location.protocol + '//nominatim.openstreetmap.org/search?format=json&q='+address, function(data){
console.log(data);
});
You'll get JSON objects containing (not only) lat and lon.
您将获得包含（不仅）纬度和经度的 JSON 对象。
回答by snkashis
There is a great geocoder already developed for Leaflet.
已经为 Leaflet 开发了一个很棒的地理编码器。
https://github.com/smeijer/L.GeoSearch
https://github.com/smeijer/L.GeoSearch
You can use the results easily like
您可以轻松使用结果
map.on('geosearch_showlocation', function (result) {
L.marker([result.x, result.y]).addTo(map)
});
回答by Roland
solution without additional plugins. only Leaflet and pure JavaScript. dragging the marker or entering an address gives you coordinates. if you have problems with the nominatim request just change https to http. demo here : http://yellowthailand.com/leafletgeo.html
无需额外插件的解决方案。只有传单和纯 JavaScript。拖动标记或输入地址为您提供坐标。如果您对 nominatim 请求有问题，只需将 https 更改为 http。演示在这里：http: //yellowthailand.com/leafletgeo.html
<html>
<head>
<title>Leaflet Address Lookup and Coordinates</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style type="text/css">
html, body { width:100%;padding:0;margin:0; }
.container { width:95%;max-width:980px;padding:1% 2%;margin:0 auto }
#lat, #lon { text-align:right }
#map { width:100%;height:50%;padding:0;margin:0; }
.address { cursor:pointer }
.address:hover { color:#AA0000;text-decoration:underline }
</style>
</head>
<body>
<div class="container">
<b>Coordinates</b>
<form>
<input type="text" name="lat" id="lat" size=12 value="">
<input type="text" name="lon" id="lon" size=12 value="">
</form>
<b>Address Lookup</b>
<div id="search">
<input type="text" name="addr" value="" id="addr" size="58" />
<button type="button" onclick="addr_search();">Search</button>
<div id="results"></div>
</div>
<br />
<div id="map"></div>
</div>
<script type="text/javascript">
// New York
var startlat = 40.75637123;
var startlon = -73.98545321;
var options = {
center: [startlat, startlon],
zoom: 9
}
document.getElementById('lat').value = startlat;
document.getElementById('lon').value = startlon;
var map = L.map('map', options);
var nzoom = 12;
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: 'OSM'}).addTo(map);
var myMarker = L.marker([startlat, startlon], {title: "Coordinates", alt: "Coordinates", draggable: true}).addTo(map).on('dragend', function() {
var lat = myMarker.getLatLng().lat.toFixed(8);
var lon = myMarker.getLatLng().lng.toFixed(8);
var czoom = map.getZoom();
if(czoom < 18) { nzoom = czoom + 2; }
if(nzoom > 18) { nzoom = 18; }
if(czoom != 18) { map.setView([lat,lon], nzoom); } else { map.setView([lat,lon]); }
document.getElementById('lat').value = lat;
document.getElementById('lon').value = lon;
myMarker.bindPopup("Lat " + lat + "<br />Lon " + lon).openPopup();
});
function chooseAddr(lat1, lng1)
{
myMarker.closePopup();
map.setView([lat1, lng1],18);
myMarker.setLatLng([lat1, lng1]);
lat = lat1.toFixed(8);
lon = lng1.toFixed(8);
document.getElementById('lat').value = lat;
document.getElementById('lon').value = lon;
myMarker.bindPopup("Lat " + lat + "<br />Lon " + lon).openPopup();
}
function myFunction(arr)
{
var out = "<br />";
var i;
if(arr.length > 0)
{
for(i = 0; i < arr.length; i++)
{
out += "<div class='address' title='Show Location and Coordinates' onclick='chooseAddr(" + arr[i].lat + ", " + arr[i].lon + ");return false;'>" + arr[i].display_name + "</div>";
}
document.getElementById('results').innerHTML = out;
}
else
{
document.getElementById('results').innerHTML = "Sorry, no results...";
}
}
function addr_search()
{
var inp = document.getElementById("addr");
var xmlhttp = new XMLHttpRequest();
var url = "https://nominatim.openstreetmap.org/search?format=json&limit=3&q=" + inp.value;
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
var myArr = JSON.parse(this.responseText);
myFunction(myArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
</script>
</body>
</html>回答by VigKam
One more solution without using any plugins. I am reading the data from the Mongo DB and then use Javascript, Angular(not necessaril ) and Leaflet libraries to draw the marker for the coordinates that we get from the Mongo DB.
不使用任何插件的另一种解决方案。我正在从 Mongo DB 读取数据，然后使用 Javascript、Angular（不是 necessaril）和 Leaflet 库为我们从 Mongo DB 获得的坐标绘制标记。
HTML
HTML
Just displaying the leaflet div and the onclick event where we pass the date and email of a user. This information will be passed to the MongoDB to fetch the set of latitudes and longitudes of the user for the given time frame
只显示传单 div 和 onclick 事件，我们在其中传递用户的日期和电子邮件。此信息将传递给 MongoDB 以获取给定时间范围内用户的纬度和经度集
<div class="map" leaflet [leafletOptions]="historicalOptions">
<div *ngFor="let l of historicalLayers" [leafletLayer]="l"></div>
</div>
<div class="col-lg-3 d-flex justify-content-center align-items-center">
<button type="button" (click)="getHistoricalData(onDate,fromTime,toTime,user.email)" class="btn btn-primary p-4">
Get Map
</button>
</div>
Code
代码
ngOnInit() {
this.historicalOptions = {
layers: [
tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '...' }),
this.heatmapLayer
],
center: latLng(xxxxxxx, xxxxxxx),
zoom: 16
};
}
public getHistoricalData(onDate: Date, fromTime: Date, toTime: Date, userEmail) {
this.historicalLayers = [];
this.apiService.getGPSLocations(fromDate.toISOString(), toDate.toISOString(), userEmail)
.subscribe(data => {
if (data && data.length) {
const markerLayers = this.drawMarkerPlotline(data, 'blue');
this.historicalLayers = markerLayers;
}
}
}
private drawMarkerPlotline(data, color) {
if (data) {
let rawData;
if (typeof data === 'string')
rawData = JSON.parse(data);
else
rawData = data;
const layers = [];
if (rawData.length) {
this.heatmapData.data = [];
rawData.forEach((point, index) => {
if (point && point.sensorValue && point.sensorValue.attr_lat && point.sensorValue.attr_lng) {
const markerLayer = marker([point.sensorValue.attr_lat, point.sensorValue.attr_lng], {
icon: icon({
iconSize: [15, 15],
iconAnchor: [7, 7],
iconUrl: this.getIconPath(color)
}),
title: new Date(point.observationTimestamp).toLocaleString(),
});
markerLayer.userId = point.userAccount.userId;
layers.push(markerLayer);
this.heatmapData.data.push({
lat: point.sensorValue.attr_lat,
lng: point.sensorValue.attr_lng,
// count: 1
});
}
});
this.heatmapLayer.setData(this.heatmapData);
return [layerGroup(layers)];
}
}
return null;
}
private getIconPath(color) {
let icon: string;
switch (color) {
case 'green':
icon = 'assets/green-circle.png'
break;
case 'orange':
icon = 'assets/orange-circle.png'
break;
default:
icon = 'assets/blue-circle.png'
break;
}
return icon;
}
Note
笔记
Code snippets are directly taken from my sample application. Hence make changes wherever required in order to suit your requirements.
代码片段直接取自我的示例应用程序。因此，在需要时进行更改以满足您的要求。
