灰盒谷歌地图和角度2

Question

我对 angular 2 和谷歌地图的 API v3 有问题，问题是当我通过路由器插座加载页面时，地图是一个灰色框，但是当我刷新页面时，地图加载正确，我在索引页面上使用js库导入，地图加载到一个组件中。

this is the view of the map

我尝试了触发 rezise 但不起作用。我认为这是库加载或类似问题的问题。

这是代码：

    import {Component, OnInit} from "angular2/core";
import {MapsService} from "../maps/maps.service";
import {mapsIconService} from "./maps.icon.service";
import {BrowserDomAdapter} from 'angular2/platform/browser';


@Component({
    selector: "div-map",
    template: `
    <div id="map" style="height: 500px" class="maps"> </div> `,
    providers: [MapsService, mapsIconService, BrowserDomAdapter],
    style: `
        .maps{
            overflow:visible;
        }
    `

})

export class Maps {
    map;
    snappedCoordinates = [];
    points:string = "";
    map:Map;
    drawingManager;
    placeIdArray = [];
    polylines = [];
    markers = [];
    placeIds = [];
    infoWindows = [];
    snappedPolyline;
    showMap = false;

    lineSymbol = {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 8,
        strokeColor: '#005db5',
        strokeWidth: '#005db5'
    };

    mapOptions = {
        zoom: 15,
        center: {lat: 37.38658313258027, lng: -122.05207727132837},

    };

    constructor(private _dom:BrowserDomAdapter, private _mapService:MapsService, private _mapIconService:mapsIconService) {
        // google.maps.visualRefresh = true;
    }


    drawSnappedPolyline(snappedCoordinates) {
        this.snappedPolyline = new google.maps.Polyline({
            path: snappedCoordinates,
            strokeColor: 'black',
            strokeWeight: 3
        });
        this.polylines.push(this.snappedPolyline);
    }


    animateCircle(polyline) {
        var count = 0;
        // fallback icon if the poly has no icon to animate
        var defaultIcon = [
            {
                icon: this.lineSymbol,
                offset: '100%'
            }
        ];
        window.setInterval(function () {
            count = (count + 1) % 300;
            var icons = defaultIcon;
            icons[0].offset = (count / 3) + '%';
            polyline.set('icons', icons);
        }, 300);
    }

    setMarker(lat, lng, id) {
        var marker = new google.maps.Marker({
            position: this.map.getCenter()/*new google.maps.LatLng(lat, lng)*/,
            icon: {url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(this._mapIconService.getIcon(id))},
            draggable: false,
            map: this.map
        });
    }

    SetAllMarkers(points) {
        for (var i in points) {
            this.setMarker(points[i].lat, points[i].lng, points[i].id);
        }
    }


    ngOnInit() {


        this.map = new google.maps.Map(this._dom.query("#map"), this.mapOptions);
        google.maps.event.trigger(this.map, 'resize');

        this._mapService.goData().subscribe(data=> {
         this.drawSnappedPolyline(this._mapService.processSnapToRoadResponse(data));
         this.setMarker(37.38658313258027, -122.05207727132837, 0);
         this.snappedPolyline.setMap(this.map);
         this.animateCircle(this.snappedPolyline);
         });

    }


}

有人对此有想法吗？提前感谢

Answer 1

问题在于语义 UI，因为他将代码插入“推动器”，这会导致所有元素出现问题