erhalten latitude & Längen als pro Adresse für die Broschüre

In meinem Projekt bin ich mit dem Faltblatt Punkte anzeigen.

Erhalte ich die Adresse aus meiner Datenbank & zeigen wollen, zeigen Sie für die jeweilige Adresse.

Ich habe nicht gefunden was die mir geben wird, latitude & Längen als pro Adresse zur Verfügung gestellt.

Kann mir jemand helfen?

InformationsquelleAutor vaibhav shah | 2013-04-10

  1. 9

    Gibt es eine große geocoder bereits entwickelte für die Broschüre.

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

    Können Sie die Ergebnisse einfach wie

    map.on('geosearch_showlocation', function (result) {
    L.marker([result.x, result.y]).addTo(map)
});
    Möchte ich weitergeben-Adresse & im Gegenzug erhalten wollen, latitute & longitute. Gibt es eine api, die dies tut.
    Richtig.Das ist es, was dieses Plugin macht. Geben Sie in einer Adresse und es findet die geo-Koordinaten. Sie Zugang zu diesen Geodaten in der event gefeuert Daten.(Ergebnis oben)
    Wenn Sie sagen, Sie wollen zu umgehen Benutzereingaben und tun Sie es direkt mit dem code, das ist einfach zu. verwenden Sie einfach control.geosearch('New York, NY')
    können Sie Beispiel.
    Ich will Straßennamen von latLng, wie kann ich es tun?

    InformationsquelleAutor snkashis

  2. 5

    Wenn Sie möchten, um die Verwendung von OpenStreetmaps für diese, können Sie machen Sie einfach eine Anfrage (mit jquery):

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

    Erhalten Sie JSON-Objekte enthält (nicht nur) lat und lon.

    InformationsquelleAutor movAX13h

  3. 0

    Noch eine Lösung ohne plugins. Ich lese die Daten aus der Mongo DB und verwenden Sie dann Javascript, Angular(nicht necessaril ) und Merkblatt Bibliotheken zum zeichnen der marker für die Koordinaten, die wir aus der Mongo DB.

    HTML

    Nur anzeigen der Broschüre und div onclick-Ereignis, in denen wir das Datum und die E-Mail eines Benutzers. Diese Informationen werden weitergeleitet, um die MongoDB zu Holen, die Gruppe von breiten-und Längengrade, die der Benutzer für den angegebenen Zeitrahmen

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

    Hinweis

    Code-Schnipsel direkt aus meinem Beispiel-Anwendung. Daher änderungen vornehmen, wo es erforderlich ist, um Ihren Anforderungen gerecht zu werden.

    InformationsquelleAutor VigKam

Schreibe einen Kommentar