Javascript 获取纬度&；经度按照传单上给出的地址

在我的项目中，我使用传单来显示点

我正在从我的数据库中获取地址&希望显示该特定地址的点

我还没有找到任何能给我提供地址的经度和纬度的东西

---

有人能帮我吗？

已经为传单开发了一个很棒的地理编码器

您可以像这样轻松地使用结果

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

---

如果要使用OpenStreetmaps进行此操作，只需发出请求（使用jquery）：

---

您将获得包含（不仅）lat和lon的JSON对象。

解决方案，而不需要额外的插件。只有传单和纯JavaScript。拖动标记或输入地址可获得坐标。如果您对提名请求有问题，只需将https更改为http即可。 此处演示：

传单地址查找和坐标
html，正文{宽度：100%；填充：0；边距：0；}
.container{宽度：95%；最大宽度：980px；填充：1%2%；边距：0自动}
#lat，#lon{文本对齐：右}
#贴图{宽度：100%；高度：50%；填充：0；边距：0；}
.address{游标：指针}
.地址：hover{color:#AA0000；文本装饰：下划线}
协调
地址查找
搜寻


//纽约
var=40.75637123；
var Starton=-73.98545321；
变量选项={
中锋：[惊吓，惊吓]，
缩放：9
}
document.getElementById（'lat'）。value=starttat；
document.getElementById（'lon'）。value=on；
var map=L.map（'map'，选项）；
var nzoom=12；
L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'，{attribute:'osm'}）.addTo（map）；
var myMarker=L.marker（[startat，starton]，{title:“坐标”，alt:“坐标”，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（）；
如果（czoom<18）{nzoom=czoom+2；}
如果（nzoom>18）{nzoom=18；}
如果（czoom！=18）{map.setView（[lat，lon]，nzoom）；}else{map.setView（[lat，lon]）；}
document.getElementById（'lat'）。value=lat；
document.getElementById（'lon'）。value=lon；
bindPopup（“Lat”+Lat+”
Lon”+Lon.openPopup（）；
});
功能选择地址（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；
bindPopup（“Lat”+Lat+”
Lon”+Lon.openPopup（）；
}
函数myFunction（arr）
{
var out=“
”；
var i；
如果（arr.length>0）
{
对于（i=0；i

不使用任何插件的情况下再提供一个解决方案。我从Mongo DB读取数据，然后使用Javascript、Angular（不需要）和传单库为我们从Mongo DB获得的坐标绘制标记

HTML

只显示传单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>

注意

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

---

代码片段直接取自我的示例应用程序。因此，在需要时进行更改，以满足您的要求

我想传递地址，作为回报，我想得到拉蒂图特和朗吉图特。有没有api可以做到这一点。正确。这就是这个插件的功能。你输入一个地址，它会找出这个地址的地理坐标。您可以在事件触发的数据中访问所述地理数据。（上面的结果）如果您说要绕过用户输入并直接使用代码来完成，那么这也很简单。只需使用

control.geosearch（'New York，NY'）

你能提供一个例子吗？我想通过latLng获得街道名称，我该怎么做？

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