如何通过点击地图获得经度和纬度?

时间:2018-07-18 09:37:59

标签: angular5

大家好,我试图增加用户从单击获得纬度和经度并在字段中获得纬度和经度的可能性:这是我的html部分:

    <div class="col-sm-4">
      <div class=" panel panel-primary" style="background-color: darkgray;" >
        <div class="panel-heading">Position :</div>
        <div class="panel-body">

          <div class="form-group">
            <label class="control-label">Adresse :</label>
            <input type="text" class="form-control" [(ngModel)]="pan.adresse"/>
          </div>

          <div class="form-group">
            <label class="control-label">Latitude</label>
            <input type="text" class="form-control" [(ngModel)]="pan.latitude"/>
          </div>

          <div class="form-group">
            <label class="control-label">Longitude :</label>
            <input type="text" class="form-control" [(ngModel)]="pan.longitude"/>
          </div>

          <div class="form-group">
            <label class="control-label">Etat :</label>
            <input type="text" class="form-control" [(ngModel)]="pan.etat"/>
          </div>

        </div></div>
    </div>

    <div class="col-sm-8">
      <div class=" panel panel-primary"  >
        <div class="panel-heading">Map :</div>
        <div class="panel-body">

          <agm-map [latitude]="36.718241" [longitude]="3.091969" [zoom]="6">
          </agm-map>

        </div></div>
    </div>

所以我有地图和与纬度和经度有关的输入,而不是写我想通过单击地图来替换的信息,字段将自动填满 谢谢大家。

1 个答案:

答案 0 :(得分:0)

您可以使用mapClick事件来检索用户单击的位置的经纬度,并将该信息分配给模板中正在访问的变量

 <agm-map (mapClick)="mapClick($event)" [latitude]="36.718241" [longitude]="3.091969" [zoom]="6">
 </agm-map>

在.ts文件中添加

mapClick($event) {
this.pan.latitude = $event.lat();
this.pan.longtitude = $event.lng();
}

mapClick Latlng