如何在Angular 2中使用Google Maps

Question

我想在基于Angular 2的项目中使用Google Maps。我尝试从此处实现代码，但出现此错误：

ReferenceError：未定义initMap

下面的Angular 2代码和页面显示为pop ..，但是我不知道如何在Angular 2方法中使用initMap()函数。

           'use strict';
    const angular = require('angular');

    import * as properties from '../../../properties';
    import { ReadableAddress, setCorrectPhotoPath } from '../../../Utility/Utility';
    export default class ListComponent {
      /*@ngInject*/
      constructor($http, $scope, $location) {
        var me = this;
        this.$scope = $scope;
        this.$http = $http;

        this.$location = $location;

        }
  initMap() {
         var myLatLng = {
           lat: -25.363,
           lng: 131.044
         };

         var map = new google.maps.Map(document.getElementById('map'), {
           zoom: 4,
           center: myLatLng
         });

         var marker = new google.maps.Marker({
           position: myLatLng,
           map: map,
           title: 'Hello World!'
         });
       }         


       setLocation(mylocation) {


            this.openComponentModalLocation();
          }
  ngOnInit() {
         this.initMap();  /* Use "this" here. */
       }
     openComponentModalLocation() {
        var modalInstance = this.$uibModal.open({
          animation: this.animationsEnabled,
          template: require('../show/location.html'),
          scope: this.$scope,
          size: 'lg'
        });
        this.$scope.modalInstance = modalInstance;
        return modalInstance.result;
      }

我在api代码下输入以下代码。

    <div class="modal-header">   
        <h4 class="job_header">Location</h4>
    </div>
    <div class="modal-body" id="modal-body">
        <section class="panel">
            <header class="panel-heading">
                <h2 class="panel-title">Engineer Location</h2>
            </header>
             <style>    
          #map {
            height: 100%;
          }    

        </style>
            <div class="panel-body">
                 <div id="map"></div>
            </div>
        </section>
        <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>
    </div>
    <div class="modal-footer">

</div>

Answer 1

这是因为initMap函数未定义为ListComponent类的成员函数。

   export default class ListComponent {
       /*@ngInject*/
       constructor($http, $scope, $location) {
           var me = this;
           this.$scope = $scope;
           this.$http = $http;

           this.$location = $location;
       }

       /* Define function as a member */
       initMap() {
         var myLatLng = {
           lat: -25.363,
           lng: 131.044
         };

         var map = new google.maps.Map(document.getElementById('map'), {
           zoom: 4,
           center: myLatLng
         });

         var marker = new google.maps.Marker({
           position: myLatLng,
           map: map,
           title: 'Hello World!'
         });
       }         

       setLocation(mylocation) {
           this.initMap();  /* Use "this" here. */ 
           this.openComponentModalLocation();
       }

       openComponentModalLocation() {
           var modalInstance = this.$uibModal.open({
               animation: this.animationsEnabled,
               template: require('../show/location.html'),
               scope: this.$scope,
               size: 'lg'
           });
           this.$scope.modalInstance = modalInstance;
           return modalInstance.result;
       }
   }