web-dev-qa-db-fra.com

obtenir la latitude et la longitude selon l'adresse indiquée pour le dépliant

Dans mon projet, j'utilise un dépliant pour afficher des points.

Je reçois l'adresse de ma base de données et je veux montrer le point pour cette adresse particulière.

Je n'ai rien trouvé qui me donnera la latitude et la longitude selon l'adresse fournie.

Quelqu'un peut-il m'aider à ce sujet?

javascriptleaflet
17
vaibhav shah

Si vous souhaitez utiliser OpenStreetmaps pour cela, vous pouvez simplement faire une demande (en utilisant jquery):

    $.get(location.protocol + '//nominatim.openstreetmap.org/search?format=json&q='+address, function(data){
       console.log(data);
    });

Vous obtiendrez des objets JSON contenant (non seulement) lat et lon.

12
movAX13h

Il y a un grand géocodeur déjà développé pour Leaflet.

https://github.com/smeijer/L.GeoSearch

Vous pouvez facilement utiliser les résultats comme

map.on('geosearch_showlocation', function (result) {
    L.marker([result.x, result.y]).addTo(map)
});
10
snkashis

solution sans plugins supplémentaires. uniquement Leaflet et JavaScript pur. faire glisser le marqueur ou entrer une adresse vous donne des coordonnées. si vous rencontrez des problèmes avec la demande de nominatim, remplacez simplement https par http. Démo ici: 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>
8
Roland

Encore une solution sans utiliser de plugins. Je lis les données de la base de données Mongo et j'utilise ensuite les bibliothèques Javascript, angulaire (pas nécessairement) et Leaflet pour dessiner le marqueur des coordonnées que nous obtenons de la base de données Mongo.

HTML

Il suffit d'afficher le dépliant div et l'événement onclick où nous transmettons la date et l'e-mail d'un utilisateur. Ces informations seront transmises à la MongoDB pour récupérer l'ensemble des latitudes et longitudes de l'utilisateur pour la période donnée

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

Remarque

Les extraits de code sont directement extraits de mon exemple d'application. Par conséquent, apportez les modifications nécessaires pour répondre à vos besoins.

0
VigKam