Question

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

这是我试图得到的结果：Here

这是我的代码：

/* HTML */

<div id="anchor">
    <details><a href="#anchor"><summary>Embedded Video</summary></a>
        <div class="youtube-player" data-id="null"></div>
    </details>
</div>

HTML组件：

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

我不知道如何进入地图协调。这些coords in 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

Angular5和Google Maps v3 Api - 从地图获取协调＆＃34;点击＆＃34;事件

2 个答案: