使用ionic 1实现Google地图方向

implementing google maps directions with ionic 1

本文关键字：地图 方向 Google 实现 ionic 使用      更新时间：2023-09-26

我在youtube上学习了这个教程:https://www.youtube.com/watch?v=gw3AKC4MsGQ

我做了同样的事情，但遇到了一个小问题，因为javascript自视频制作以来已经更新。关于应该对我的代码进行哪些更改以适应javascript中的更改的任何想法?

这是HTML:

<!DOCTYPE html>
<html>
 <head>
<meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
 <title></title>
 <link rel="manifest" href="manifest.json">
 <!-- un-comment this code to enable service worker
 <script>
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('service-worker.js')
       .then(() => console.log('service worker installed'))
       .catch(err => console.log('Error', err));
   }
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCMsQzZKDhyiXUMOxllFxi5iBz1tZ1j-mc&callback=initMap">
</script>
<script type="js/direction.js"></script>
<script src="js/app.js"></script>
</head>
  <body ng-app="starter">
    <ion-pane>
  <ion-header-bar class="bar-positive">
    <h1 class="title">Get Directions</h1>
  </ion-header-bar>
  <ion-content>
     <div id="map"></div> 
  </ion-content>
</ion-pane>

这是Javascript:

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

type="js/direction.js"，则src="js/direction.js"

相关文章：