Javascript Angular5和谷歌地图v3 Api-从地图中获取协调；点击"；事件

我正试图从地图上的点击事件中获得协调

以下是我试图得到的结果：

以下是我的代码：

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

从'@angular/core'导入{Component，OnInit}；
从“@angular/core”导入{ViewChild}；
从'@types/googlemaps'导入{}；
从'rxjs/operator/map'导入{map}；
从“@angular/core”导入{Input，Output，EventEmitter}；
@组成部分({
选择器：“应用谷歌地图”，
templateUrl:'./google map.component.html'，
样式URL:['./googlemap.component.css']
})
导出类GoogleMapComponent实现OnInit{
构造函数（）{}
标记：数组
myLatLng={lat:53.131083，lng:23.154742}；
纬度：53.131083；
朗吉图特：23.154742；
谷歌地图：google.maps.Map；
恩戈尼尼特（）{
var mapCanvas=document.getElementById（“map”）；
var myCenter=new google.maps.LatLng（53.131083,23.154742）；
变量映射选项={
中心：迈森特，
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
this.googleMap=new google.maps.Map（mapCanvas，mapOptions）；
google.maps.event.addListener（映射，'click'，函数（事件）{
这是一个地点标记（事件）；
});
}
地点标记（事件）{
//--------------我找不到地图坐标-------------
var eventLatLng={lat:event.clientX，lng:event.clientY}；
控制台日志（eventLatLng）；
var marker=new google.maps.marker({
位置：this.myLatLng，
地图：这是谷歌地图
});
var infowindow=new google.maps.infowindow({
内容：“标记位置：”+Marker.getPosition（）
});
打开（this.googleMap，marker）；
}
addBicycleLayer（）{
var bikeLayer=new google.maps.BicyclingLayer（）；
setMap（this.googleMap）；
}
setMapType（mapTypeId:string）{
this.googleMap.setMapTypeId（mapTypeId）
}
设置中心（e:任何）{
e、 预防默认值（）；
this.googleMap.setCenter（新的google.maps.LatLng（this.latitude，this.longitute））；
}
}

HTML组件：

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

我不知道怎么去地图坐标。这些位于placeMarker函数中的坐标只是客户端坐标（未与地图集成） 我找到了一些，但这将是一个大项目，我不想依赖这个。 我将非常感谢您的帮助：）

---

干杯

根据我的评论，删除

（单击）=“placeMarker（$event）”

，因为这不是您想要做的事情

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

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

现在，在placeMarker函数中应该有正确的

事件

。之后，您应该能够从

事件调用latlng
帮我找到答案！
以下是完整的工作代码：

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

从'@angular/core'导入{Component，OnInit}；
从“@angular/core”导入{ViewChild}；
从'@types/googlemaps'导入{}；
从'rxjs/operator/map'导入{map}；
从“@angular/core”导入{Input，Output，EventEmitter}；
@组成部分({
选择器：“应用谷歌地图”，
templateUrl:'./google map.component.html'，
样式URL:['./googlemap.component.css']
})
导出类GoogleMapComponent实现OnInit{
构造函数（）{}
标记：数组
myLatLng={lat:53.131083，lng:23.154742}；
纬度：53.131083；
朗吉图特：23.154742；
谷歌地图：google.maps.Map；
恩戈尼尼特（）{
var mapCanvas=document.getElementById（“map”）；
var myCenter=new google.maps.LatLng（53.131083,23.154742）；
变量映射选项={
中心：迈森特，
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
this.googleMap=new google.maps.Map（mapCanvas，mapOptions）；
google.maps.event.addListener（this.googleMap，'click'，（event）=>{
这是一个地点标记（事件）；
});
}
地点标记（事件）{
var marker=new google.maps.marker({
位置：event.latLng，
地图：这是谷歌地图
});
console.log（event.latLng.lat（）+“”+event.latLng.lng（））；
}
addBicycleLayer（）{
var bikeLayer=new google.maps.BicyclingLayer（）；
setMap（this.googleMap）；
}
setMapType（mapTypeId:string）{
this.googleMap.setMapTypeId（mapTypeId）
}
设置中心（e:任何）{
e、 预防默认值（）；
this.googleMap.setCenter（新的google.maps.LatLng（this.latitude，this.longitute））；
}
}

看看Google Maps JS API，你不应该使用
event.latLng
来获取坐标位置标记（event）（）？用简单的语言尝试过，但不知道event.latLng是什么，它显示了Firefox中的一个错误（你说的event.latLng就在这里：我想得到相同的结果我可以从coords中添加标记，我把自己放在代码中，但是很难通过click event和mapI获得它。我不确定我是否遵循，你试图从click event中获得坐标，即事件对象，对吗？如果是，Firefox显示了什么错误r
event.latLng
？如果没有，请进一步解释您想做什么。我想从地图上获取纬度和经度，从“单击”事件中创建标记。（我将单击地图，获取纽约街的坐标，并在地图上创建标记）。将代码更改为event.latLng后（请参阅var marker中的“位置”）点击地图我得到了这个错误：正如你说的，我删除了click事件并更改了addListener函数，但是现在点击地图后什么也没有发生。将listner对象更改为
这个。googleMap
我将更新我的答案以反映您的
eventLatLng
现在将在
placeMarker
事件中失败。这是beca使用你现在得到的是一个google事件，而不是点击事件。你应该可以从这里找到它。我认为这个位置：event.LatLng应该可以工作，但它说它未定义如果你控制台.log（事件），你会得到什么？