angular - 在 <agm-direction> 中拖动原点时方向发生变化时获取坐标

标签 angular angular7

当原点标记在 map 上拖动时,我试图检索纬度和经度等坐标。

我尝试实现 Dragend 或 Dragend 属性,但没有任何效果

html

<agm-map id="map" [latitude]='origin.lat' [longitude]='origin.lng' [zoom]='zoom'>
<agm-direction [origin]="origin" [destination]="destination" [renderOptions]="renderOptions" [markerOptions]="markerOptions" (dragEnded)="getcoords($event)"></agm-direction>
</agm-map>

ts 文件

import { Component } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { ViewChild, ElementRef, NgZone } from '@angular/core';
import { MapsAPILoader, AgmMap } from '@agm/core';
import {} from "googlemaps";
declare let google: any;
@Component({
  selector: 'app-root',
  templateUrl: './direction.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppDirection
{
public origin: {};
public destination: {};
public renderOptions = {
   suppressMarkers: true,
}

public markerOptions = {
   origin: {
           draggable: true,
        },
   destination: {
            opacity: 0.8,
        },
 }

 origin={lat:30.7227148,lng:76.6932551};
 destination={lat:30.7123702,lng:76.71970320000003};   

 constructor(private mapsAPILoader: MapsAPILoader, private ngZone: NgZone){}

 ngOnInit() {}

 getcoords(event){
  console.log(event);
 }  
}

最佳答案

originDrag 是检索 <agm-direction> 中原点变化时的纬度和经度的函数下面是对我有用的代码:

html 代码:

<agm-direction [origin]="origin" [destination]="destination" [renderOptions]="renderOptions" [markerOptions]="markerOptions" (originDrag)="getcoords('direction',$event)"> </agm-direction>

在 ts 文件中:

getcoords(type,event)
    {
        let coords=JSON.stringify(event);
        let coords3=JSON.parse(coords);
        console.log("updated latitude :: "+coords3.lat);
        console.log("updated longitude :: "+coords3.lng);
    }

希望它也能帮助其他人......

关于angular - 在 <agm-direction> 中拖动原点时方向发生变化时获取坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57817406/

相关文章:

angular - 成功登录后,get 和 post api 不起作用

angular - 相互依赖的多个 Angular APP_INITIALIZER

html - 在 ng2-pdf-viewer Angular 上添加元素 <button>

angular - 如何使用 Angular 6/7 从 google 驱动器下载文件/视频?

javascript - 如何获取导航历史?

javascript - 图片加载时滚动缓慢

angular - 如何从 ReactivForms 中的 FormControl 返回图像名称

javascript - 动态创建的组件在模型更改时未绑定(bind)到模型

javascript - Angular 7 通用 : inner components are not rendered

javascript - 跳过 NULL 并在下拉列表中仅显示唯一值