Angular 2 implementacja mapy google

Jestem nowy w kanciastym 2. Chciałem użyć google map API do obsługi kierunku i zaimplementowałem przykład pokazany w https://developers.google.com/maps/documentation/javascript/examples/directions-simple do mojego projektu, jak pokazano poniżej. Ale z jakiegoś powodu mapa się nie ładuje. Czy ktoś może mi w tym pomóc?Angular 2 implementacja mapy google

map.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Directions service</title> 
    <style> 
     html, body { 
     height: 500px; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 500px; 
     } 
     #floating-panel { 
     position: absolute; 
     top: 10px; 
     left: 25%; 
     z-index: 5; 
     background-color: #fff; 
     padding: 5px; 
     border: 1px solid #999; 
     text-align: center; 
     font-family: 'Roboto','sans-serif'; 
     line-height: 30px; 
     padding-left: 10px; 
     } 
    </style> 
    </head> 
    <body>   
    <div id="floating-panel"> 
    <b>Start: </b> 
    <select id="start"> 
     <option value="chicago, il">Chicago</option> 
     <option value="st louis, mo">St Louis</option> 
     <option value="joplin, mo">Joplin, MO</option> 
     <option value="oklahoma city, ok">Oklahoma City</option> 
     <option value="amarillo, tx">Amarillo</option> 
     <option value="gallup, nm">Gallup, NM</option> 
     <option value="flagstaff, az">Flagstaff, AZ</option> 
     <option value="winona, az">Winona</option> 
     <option value="kingman, az">Kingman</option> 
     <option value="barstow, ca">Barstow</option> 
     <option value="san bernardino, ca">San Bernardino</option> 
     <option value="los angeles, ca">Los Angeles</option> 
    </select> 
    <b>End: </b> 
    <select id="end"> 
     <option value="chicago, il">Chicago</option> 
     <option value="st louis, mo">St Louis</option> 
     <option value="joplin, mo">Joplin, MO</option> 
     <option value="oklahoma city, ok">Oklahoma City</option> 
     <option value="amarillo, tx">Amarillo</option> 
     <option value="gallup, nm">Gallup, NM</option> 
     <option value="flagstaff, az">Flagstaff, AZ</option> 
     <option value="winona, az">Winona</option> 
     <option value="kingman, az">Kingman</option> 
     <option value="barstow, ca">Barstow</option> 
     <option value="san bernardino, ca">San Bernardino</option> 
     <option value="los angeles, ca">Los Angeles</option> 
    </select> 
    </div> 
    <div id="map"></div> 
    <script> 
     function initMap() { 
     var directionsService = new google.maps.DirectionsService; 
     var directionsDisplay = new google.maps.DirectionsRenderer; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 7, 
      center: {lat: 41.85, lng: -87.65} 
     }); 
     directionsDisplay.setMap(map); 

     var onChangeHandler = function() { 
      calculateAndDisplayRoute(directionsService, directionsDisplay); 
     }; 
     document.getElementById('start').addEventListener('change', onChangeHandler); 
     document.getElementById('end').addEventListener('change', onChangeHandler); 
     } 

     function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
     directionsService.route({ 
      origin: document.getElementById('start').value, 
      destination: document.getElementById('end').value, 
      travelMode: 'DRIVING' 
     }, function(response, status) { 
      if (status === 'OK') { 
      directionsDisplay.setDirections(response); 
      } else { 
      window.alert('Directions request failed due to ' + status); 
      } 
     }); 
     } 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=MY-KEY&callback=initMap"> 
    </script> 
    </body> 
</html>

MapComponent

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'map', 
    templateUrl: 'app/dashboard/features/map.html' 
}) 

export class MapComponent {}

Źródło

2016-08-10 Gaurav Ram

Znaleziono rozwiązanie tego problemu.

1) Dodaj skrypt google map API w index.html

index.html

<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR-KEY]" async defer></script>

2) Dodaj kod związany tylko html w pliku html.

map.html

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

3) Dodaj stylu związanych kody w osobnym pliku css lub w składniku.

map.css

 #map { 
     height: 500px; 
     }

4) stwierdzenie google jako zmienną. I dodaj wszystkie javascript w metodzie ngOnInit().

MapComponent.ts

declare var google: any; 

@Component({ 
    selector: 'map', 
    templateUrl: 'app/dashboard/features/map.html', 
    styleUrls: ['app/dashboard/features/map.css'] 
}) 

export class MapComponent implements OnInit, OnChanges { 

ngOnInit() { 

     var directionsService = new google.maps.DirectionsService; 
     var directionsDisplay = new google.maps.DirectionsRenderer; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 7, 
      center: {lat: 41.85, lng: -87.65} 
     }); 
     directionsDisplay.setMap(map); 
     calculateAndDisplayRoute(directionsService, directionsDisplay); 

     function calculateAndDisplayRoute(directionsService, directionsDisplay) { 

      var waypts = []; 
      var checkboxArray:any[] = [ 
       'winnipeg', 'regina','calgary' 
     ]; 
     for (var i = 0; i < checkboxArray.length; i++) { 

      waypts.push({ 
       location: checkboxArray[i], 
       stopover: true 
      }); 

     } 

     directionsService.route({ 
      origin: {lat: 41.85, lng: -87.65}, 
      destination: {lat: 49.3, lng: -123.12}, 
      waypoints: waypts, 
      optimizeWaypoints: true, 
      travelMode: 'DRIVING' 
     }, function(response, status) { 
      if (status === 'OK') { 
      directionsDisplay.setDirections(response); 
      } else { 
      window.alert('Directions request failed due to ' + status); 
      } 
     }); 
     } 

    }

Źródło

2016-08-10 20:27:52

jest to nadal aktualne –

Pracował wielki dla mnie, dzięki! Zrobiłem '

' z '@ViewChild (" map ") map: ElementRef;' i 'new google.maps.Map (this.map.nativeElement, {...' ponieważ wydawało się bardziej idiomatyczne, ale poza tym to działało doskonale. –

Odpowiedz

Powiązane problemy