在 <agm-direction> 中拖动原点时方向发生变化时获取坐标
Getting coordinates when directions changed on drag of origin in <agm-direction>
我正在尝试在地图上拖动原点标记时检索纬度和经度等坐标。
我尝试实现 dragend 或 dragended 属性,但没有任何效果
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);
}
}
您需要在您的 ts 文件中执行类似以下操作:
markerDragEnd($event: MouseEvent): void {
this.markerCreator($event, '');
}
markerCreator($event: any): void {
console.log($event.coords.lat)
console.log($event.coords.lng)
}
HTML
<agm-marker
[markerDraggable]="newMarker.draggable"
(dragEnd)="markerDragEnd($event)"
></agm-marker>
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);
}
希望对其他人也有帮助...
我正在尝试在地图上拖动原点标记时检索纬度和经度等坐标。
我尝试实现 dragend 或 dragended 属性,但没有任何效果
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);
}
}
您需要在您的 ts 文件中执行类似以下操作:
markerDragEnd($event: MouseEvent): void {
this.markerCreator($event, '');
}
markerCreator($event: any): void {
console.log($event.coords.lat)
console.log($event.coords.lng)
}
HTML
<agm-marker
[markerDraggable]="newMarker.draggable"
(dragEnd)="markerDragEnd($event)"
></agm-marker>
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);
}
希望对其他人也有帮助...