google-maps - 具有多个标记的 Angular 2 Google map

Question

我目前正在开发一个使用 Google map 的 Angular2 项目。

我正在尝试显示该区域周围的标记和多个标记。我可以使用 map ，但似乎无法标记。

<div class="google-maps"></div>



constructor(private _elementRef:ElementRef) {
  }
  ngAfterViewInit() {
    let el = this._elementRef.nativeElement.querySelector('.google-maps');
    GoogleMapsLoader.load((google) => {
      let myLatlng = new google.maps.LatLng(44.5403,-78.5463);
      new google.maps.Map(el, {
        center: new google.maps.LatLng(44.5403, -78.5463),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP

      });
      new google.maps.Marker(el,{ 
        draggable: true,
        animation: google.maps.Animation.DROP,
          position: myLatlng,
            title:"Hello World!"
          });
        }); 
  }

Answer 1

在我的项目中试试这个代码

Google 官方文档 here

import  GoogleMapsLoader  from 'google-maps';
import  { google } from 'google-maps';

ngAfterViewInit() {

let el = this._elementRef.nativeElement.querySelector('.contact-us');

GoogleMapsLoader.KEY = 'g4554645645645645645646';

GoogleMapsLoader.load((google) => {

let myLatlng = new google.maps.LatLng(23.5454, 90.8785);

let map =  new google.maps.Map(el, {

    center: new google.maps.LatLng(23.8787878, 90.87878),

    zoom: 18,

    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

let marker =  new google.maps.Marker({ 
      draggable: true,
      animation: google.maps.Animation.DROP,
      position: myLatlng,
      map: map,
      title:"Hello World!"
    });

});

模板.html

 <div class="contact-us" style="position: relative; height: 470px;"></div>