Angular 5 和 Google Maps v3 Api - 从地图“点击”事件中获取坐标

Question

我正在尝试从地图上的点击事件中获取坐标

这是我试图得到的结果：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 函数中的坐标只是客户端坐标（未与地图集成） 我找到了一些https://angular-maps.com/，但这将是一个大项目，我不想依赖这个。 我将不胜感激任何帮助:)

干杯

Answer 1

Jags之后 帮助我找到了答案！ 这是完整且有效的代码：

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(this.googleMap, 'click', (event) => {
      this.placeMarker(event);
    });
  }

  placeMarker(event) {

    var marker = new google.maps.Marker({
      position: event.latLng,
      map: this.googleMap
    });
    console.log(event.latLng.lat() +" "+ event.latLng.lng());
  }

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

Here is a picture of working code :)

Answer 2

根据我的评论，删除(click)="placeMarker($event)"，因为这不是你想要做的。

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

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

现在您应该在 placeMarker 函数中拥有正确的 event。你应该可以从event调用latlng