javascript - Angular 5和Google Maps v3 Api-从 map “单击”事件获取坐标

我正在尝试从地图上的点击事件获取协调

继承人我试图获得的结果：Here

到目前为止，这是我的代码：

import { Component, OnInit } from '@angular/core';
import { ViewChild } from '@angular/core';
import { } from '@types/googlemaps';
import { map } from 'rxjs/operator/map';
import { Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-google-map',
  templateUrl: './google-map.component.html',
  styleUrls: ['./google-map.component.css']
})
export class GoogleMapComponent implements OnInit {
  constructor() { }

  markers: Array<Object>
  myLatLng = { lat: 53.131083, lng: 23.154742 };
  latitude: 53.131083;
  longitute: 23.154742;
  googleMap: google.maps.Map;

  ngOnInit() {
    var mapCanvas = document.getElementById("map");
    var myCenter = new google.maps.LatLng(53.131083, 23.154742);
    var mapOptions = {
      center: myCenter,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.googleMap = new google.maps.Map(mapCanvas, mapOptions);
    google.maps.event.addListener(map, 'click', function (event) {
      this.placeMarker(event);
    });
  }

  placeMarker(event) {

    //-------------- i can't get map coords -------------
    var eventLatLng = { lat: event.clientX, lng: event.clientY };
    console.log(eventLatLng);
    var marker = new google.maps.Marker({
      position: this.myLatLng,
      map: this.googleMap
    });

    var infowindow = new google.maps.InfoWindow({
      content: 'Marker Location:' + marker.getPosition()
    });

    infowindow.open(this.googleMap, marker);
  }

  addBicycleLayer() {
    var bikeLayer = new google.maps.BicyclingLayer();
    bikeLayer.setMap(this.googleMap);
  }

  setMapType(mapTypeId: string) {
    this.googleMap.setMapTypeId(mapTypeId)
  }


  setCenter(e: any) {
    e.preventDefault();
    this.googleMap.setCenter(new google.maps.LatLng(this.latitude, this.longitute));
  }
}

HTML组件：

<div id="map" style="width:100%;height:600px" (click)="placeMarker($event)">
</div>

我不知道如何进行地图协调。这些在placeMarker函数中的坐标只是客户端坐标（未与Maps集成）
我找到了一些https://angular-maps.com/，但这将是一个很大的项目，我不想依靠它。
我将不胜感激:)

干杯

最佳答案

根据我的评论，删除(click)="placeMarker($event)"，因为它不是您想要执行的操作。

尝试在点击事件中记录this。可能不是您所追求的背景。相反，您应该使用粗箭头将正确的上下文传递给函数。

google.maps.event.addListener(this.googleMap, 'click', (event) => {
  this.placeMarker(event);
});

现在，您应该在placeMarker函数中具有正确的event。您应该可以从event呼叫latlng