根据传单给出的地址获取纬度和经度
[英]get latitude & longitude as per address given for leaflet
问题描述
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? 谁可以帮我这个事？
4 个解决方案
解决方案1
9 2013-04-10 07:21:34
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)
});
解决方案2
9 2015-12-11 23:00:47
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. 你将得到包含（不仅仅是）lat和lon的JSON对象。
解决方案3
4 2018-07-17 07:35:02
solution without additional plugins. 没有额外插件的解决方案。 only Leaflet and pure JavaScript. 只有Leaflet和纯JavaScript。 dragging the marker or entering an address gives you coordinates. 拖动标记或输入地址可为您提供坐标。 if you have problems with the nominatim request just change https to http. 如果你对nominatim请求有问题，只需将https更改为http。 demo here : http://yellowthailand.com/leafletgeo.html 这里演示：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/leaflet@1.3.1/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.3.1/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>
解决方案4
0 2018-11-06 14:39:33
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（非必需品）和Leaflet库来绘制我们从Mongo DB获得的坐标的标记。
HTML HTML
Just displaying the leaflet div and the onclick event where we pass the date and email of a user. 只显示传单div和onclick事件，我们传递用户的日期和电子邮件。 This information will be passed to the MongoDB to fetch the set of latitudes and longitudes of the user for the given time frame 该信息将被传递到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. 因此，在需要的地方进行更改以满足您的要求。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.