如何在 Angular 2 中实现 Google Map JavaScript？答案

【问题标题】：How to implement Google Map JavaScript in Angular2+?如何在 Angular 2 中实现 Google Map JavaScript？
【发布时间】：2019-03-17 17:24:21
【问题描述】：

我正在尝试在我的 Angular6 组件中实现 Google Map。但是，我无法这样做。我已经从 -

嵌入了 Google Map JavaScript

https://developers.google.com/maps/documentation/javascript/examples/rectangle-simple

我的地图没有加载。

app.component.html

<div  id="map"></div>

app.component.ts

import { Component, OnInit,AfterViewInit } from '@angular/core';

import { ViewChild, ElementRef, Renderer } from '@angular/core'

const url = '../../../assets/googlemap.js'


@Component({
  selector: 'app-search-api',
  templateUrl: './search-api.component.html',
  styleUrls: ['./search-api.component.scss']
})
export class SearchApiComponent implements OnInit, AfterViewInit {

  PhotoGoogleSDK: any;

  constructor() { }

  ngOnInit() {
 this.loadScript();
  }

  // ------------------ Javascript code  ----------------

  public loadScript() {
    console.log('preparing to load...')
    let node = document.createElement('script');
    node.src = url;
    node.type = 'text/javascript';
    node.async = true;
    node.charset = 'utf-8';
    document.getElementsByTagName('head')[0].appendChild(node);
  }

}

googlemap.js

     var citymap = {
        chicago: {
          center: {lat: 41.878, lng: -87.629},
          population: 2714856
        }
      };

      function initMap() {
        // Create the map.
        var map = new google.maps.Map(document.getElementById('map'), 
         {
          zoom: 4,
          center: {lat: 37.090, lng: -95.712},
          mapTypeId: 'terrain'
        });

        // Construct the circle for each value in citymap.
        // Note: We scale the area of the circle based on the population.
        for (var city in citymap) {
          // Add the circle for this city to the map.
          var cityCircle = new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            center: citymap[city].center,
            radius: Math.sqrt(citymap[city].population) * 100
          });
        }
      }

        var tag = document.createElement('script');
  tag.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyCXNFDDBMRr6YX8LJtltvEbQJsLA&callback=initMap";
  tag.defer = true;
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

【问题讨论】：

您不能在 Angular 应用程序中这样做。您必须使用服务来加载地图并等待 initMap 函数。我目前正在研究 google map on angular 应用程序。将为您分享一些代码
你可以试试这个angular-maps.com。如果您需要实现自己的代码，请告诉我，我将分享我的代码
你能给出#map的高度和宽度并反馈吗？谢谢

标签： javascript angular google-maps

【解决方案1】：

为了在 angular2+ 中实现谷歌地图，你必须做这些事情。

在 index.html 文件中插入谷歌地图脚本。（您需要从 Google 获得 API key。）
现在在您的 component.ts 中将 const google 声明为 any

declare const google: any;
现在在组件的 html 中，添加带有 id 的新 div

<div id="google_map" class="map"></div>

包含该方法并在初始化时运行它（向 ngOnInit() 添加方法）

public initializeMap() {
    let _map = document.getElementById('google_map');

    let lat = YOUR_INITIAL_LATITUDE;
    let lng = YOUR_INITIAL_LONGITUDE;

    let pos = new google.maps.LatLng(lat, lng);

    let map = new google.maps.Map(_map, {
      center: pos,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

 }

请注意，您可能需要安装 google typing。

npm install --save @types/googlemaps

【讨论】：