离子地图标记不会显示

Question

我正在实施一个基于Google Maps Javascript SDK的Ionic项目。

似乎有点工作，但我的标记（和圆圈）不会在地图上显示。我看了谷歌和SO的答案，但我无法帮助它。

仅为记录，代码是从AngularJS项目中复制的。这一切都运作良好，没有任何错误，每个标记，圆圈和infoWindow都正常工作。

请帮帮我，这是我的代码。

import { identifierModuleUrl } from '@angular/compiler/compiler';
import { Component, NgZone, ViewChild, ElementRef } from '@angular/core';
import { ActionSheetController, AlertController, App, LoadingController, NavController, Platform, ToastController } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';

import { Observable } from 'rxjs/Observable';
import { Storage } from '@ionic/storage';
import {
 GoogleMaps,
 GoogleMap,
 GoogleMapsEvent,
 GoogleMapOptions,
 CameraPosition,
 MarkerOptions,
 Marker
} from '@ionic-native/google-maps';

//declare var google: any

@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})

export class MapPage {

  map: GoogleMap;
  constructor(private googleMaps: GoogleMaps) {}

  ionViewDidLoad() {
   this.loadMap();
  }

  loadMap() {
    const hotspots = [
        {
            "id":           1,
            "lat":          45,
            "long":         25,
            "year":         2017,
            "month":        10,
            "day":          7,
            "startHour":    20,
            "startMinutes": 15,
            "endHour":      21,
            "endMinutes":   20,
            "probability":  100,
            "description":  "asdasdasdf"
        },
        {
            "id":           2,
            "lat":          46,
            "long":         26,
            "year":         2017,
            "month":        10,
            "day":          7,
            "startHour":    20,
            "startMinutes": 15,
            "endHour":      21,
            "endMinutes":   20,
            "probability":  100
        }
    ];

    const infoWindow = new google.maps.InfoWindow();
    let markers: Array<Object> = [];
    let unauthorizedMarkers: Array<Object> = [];
    let addHotspotListener: boolean = false;
    let addHotspotClass: boolean = false;
    let infoWindowHover: boolean = false;
    const mapOptions: GoogleMapOptions = {
        zoom:      5,
        center:    new google.maps.LatLng(44.32, 23.8),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    this.map = new google.maps.Map(document.getElementById('map'), mapOptions);

    const Circle = new google.maps.Circle({
        strokeColor:   'black',
        strokeOpacity: 0.08,
        strokeWeight:  20,
        fillColor:     '#add8e6',
        fillOpacity:   0.40,
        setMap:           map,
        radius:        100000,
        visible:       true,
        flag:          false
    });

    function addHotspot() {
        addHotspotListener = true;
        addHotspotClass    = true;

        if (Circle.visible === true) {
            Circle.setVisible(false);
            Circle.flag = true;
        }
        markers.forEach( (marker) => {
            marker.setVisible(false);
        });
    };

    google.maps.event.addListener(this.map, 'click', function (e) {

        console.log("click listener 1");
        let myLatLng = new google.maps.LatLng(parseFloat(e.latLng.lat()), parseFloat(e.latLng.lng()));

        infoWindow.close();
        infoWindowHover = false;

        if (addHotspotListener) {
            let info          = {};
            const today       = new Date();
            info.year         = today.getFullYear();
            info.month        = today.getMonth();
            info.day          = today.getDate();
            info.startHour    = today.getHours();
            info.startMinutes = today.getMinutes();

            createMarker(myLatLng, 'unauth');

            addHotspotClass = false;
            addHotspotListener = false;

            if (Circle.flag === true) {
                Circle.setVisible(true);
                Circle.flag = false;
                markers.forEach(function (marker) {
                    if (Circle.getBounds().contains(marker.getPosition())) {
                        marker.setVisible(true);
                    }
                    else marker.setVisible(false);
                });
            }
            return;
        }
        Circle.setCenter(myLatLng);
        console.log("circle", myLatLng);
        Circle.setVisible(true);

        markers.forEach(function (marker) {
            if (Circle.getBounds().contains(marker.getPosition())) {
                marker.setVisible(true);
            }
            else marker.setVisible(false);
        });
    });

    function createMarker (info, type) {
        let myLatLng = new google.maps.LatLng(info.lat, info.long);
        console.log(myLatLng);
        let icon   = {
            url:        'http://icons.iconarchive.com/icons/martz90/hex/512/warning-icon.png',
            scaledSize: new google.maps.Size(50, 50)
        };
        let marker = new google.maps.Marker({
            setMap:      map,
            position: myLatLng,
            icon:     icon,
            title:    '',
            visible:  true,
            content:  '<p>info</p>'
        });

        if (type === 'default') {
            google.maps.event.addListener(marker, 'mouseover', function () {
                infoWindow.setContent(marker.content);
                infoWindow.open(map, marker);
            });
            markers.push(marker);
        }
        else if (type === 'unauth') {
            icon.url = 'https://png.icons8.com/ask-question/color/1600';
            marker.setIcon(icon);
            marker.setVisible(true);

            google.maps.event.addListener(marker, 'mouseover', function () {
                infoWindow.setContent('<p>info</p>');
                infoWindow.open(map, marker);
            });

            infoWindow.setContent('<p>info</p>');
            infoWindow.open(map, marker);
            setTimeout(function () {
                infoWindow.close();
            }, 3000);
            unauthorizedMarkers.push(marker);
        }

        google.maps.event.addListener(marker, 'mouseout', function () {
          if(!infoWindowHover)
            infoWindow.close();

          infoWindowHover = false;
        });

        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.open(map, marker);
            compute.increase(marker);
            hotspots = compute.get();
            load();

            infoWindowHover = true;
        });
    };


    // LOAD MARKERS
    function load() {
      hotspots.forEach(function (marker) {
          console.log(marker.lat, marker.long);
          createMarker(marker, 'default');
      });
    };

    load();
  }
}