gri kutu google haritalar ve açısal 2

Question

Ben açısal 2 ve google maps API v3 ile ilgili bir sorun var, sorun, ben yönlendirici çıkışı üzerinden sayfayı yüklediğimde, harita gri bir kutu, ancak ben yenilendiğinde haritanın doğru şekilde yüklendiği sayfa, indeks sayfasında js kütüphanesi içe aktarma kullanıyorum ve harita bir bileşene yüklenir.

this is the view of the map

Ben tetik rezise ile denedim ama işe yaramaz. Bu kitaplık yükü veya benzeri bir sorun olduğunu düşünüyorum. Bu konuda bir fikrim yok

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); 
     }); 

    } 


} 

herhangi biri:

bu kodu? peşin teşekkür

Answer 1

sorun anlamsal UI, o ben krom başka sorun vardı ama çözüm buradaydı