GoogleMaps使用离子原生的方向服务-Java 学习之路

我正在使用googleMaps和我的ionic2应用程序 . 我正在使用离子原生的lib . 到目前为止，我已经实现了很多业务，现在我正在尝试使用谷歌路线服务找到两点之间的路线 . 但我找不到任何样品或我可以从哪里开始 . 任何想法或样品都完全赞赏 .

1 回答

Cordova尚未实施Directions-Service，因此无法在Ionic中轻松使用 .

以下是如何以其他方式使用它的示例：

打开并编辑'src / index.html'，然后在关闭body标签之前添加此脚本引用 .

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

我假设您知道如何从Google API控制台创建YOUR-API-KEY .

接下来，打开并编辑'src / pages / home / home.html'，然后用这行标签替换'ion-content'中的所有标签 .

<ion-content>
  <div id="floating-panel">
    <b>Start: </b>
    <select [(ngModel)]="start" id="start" (change)="calculateAndDisplayRoute()">
      <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><br>
    <b>End: </b>
    <select [(ngModel)]="end" id="end" (change)="calculateAndDisplayRoute()">
      <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 #map id="map"></div>
</ion-content>

打开并编辑'src / pages / home / home.ts'，然后用这些代码替换所有代码 .

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { NavController } from 'ionic-angular';

declare var google;

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild('map') mapElement: ElementRef;
  map: any;
  start = 'chicago, il';
  end = 'chicago, il';
  directionsService = new google.maps.DirectionsService;
  directionsDisplay = new google.maps.DirectionsRenderer;

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad(){
    this.initMap();
  }

  initMap() {
    this.map = new google.maps.Map(this.mapElement.nativeElement, {
      zoom: 7,
      center: {lat: 41.85, lng: -87.65}
    });

    this.directionsDisplay.setMap(this.map);
  }

  calculateAndDisplayRoute() {
    this.directionsService.route({
      origin: this.start,
      destination: this.end,
      travelMode: 'DRIVING'
    }, (response, status) => {
      if (status === 'OK') {
        this.directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

}

Reference Link

回复于 2024-04-29T10:54:11+08:00

GoogleMaps使用离子原生的方向服务

1 回答

相关问题