Góc 2 google thực hiện bản đồ

Tôi mới sử dụng góc cạnh 2. Tôi muốn sử dụng API bản đồ google cho dịch vụ chỉ đường và triển khai ví dụ được hiển thị trong https://developers.google.com/maps/documentation/javascript/examples/directions-simple cho dự án của tôi như được hiển thị bên dưới mã. Nhưng vì lý do nào đó bản đồ không tải. Ai đó có thể giúp tôi với điều này?Góc 2 google thực hiện bản đồ

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 {}

Nguồn

2016-08-10 Gaurav Ram

Tìm thấy một giải pháp cho việc này.

1) Thêm google map api kịch bản trong index.html

index.html

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

2) Thêm chỉ html mã liên quan trong file html của bạn.

map.html

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

3) Thêm phong cách mã liên quan trong file css riêng biệt hoặc trong thành phần.

map.css

 #map { 
     height: 500px; 
     }

4) Khai báo google như biến. Và thêm tất cả javascript vào phương thức 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); 
      } 
     }); 
     } 

    }

Nguồn

2016-08-10 20:27:52

là này vẫn còn hiệu lực –

Làm việc lớn đối với tôi, cảm ơn! Tôi đã làm một '

' với bản đồ '@ViewChild (" bản đồ "): ElementRef;' và 'new google.maps.Map (this.map.nativeElement, {...' bởi vì nó có vẻ thành ngữ hơn, nhưng nếu không thì nó đã hoạt động hoàn hảo. –

Góc 2 google thực hiện bản đồ

Trả lời

Các vấn đề liên quan