如何在Ionic 3中借助原生Google Maps插件实现两点标记间的路线展示

我来帮你搞定Ionic 3里实现两个标记点之间路线展示的需求，下面分两种情况详细说明——先讲原生Google Maps插件的实现步骤，再给你介绍其他可选的方案~

这是性能最优的原生方案，依赖cordova-plugin-googlemaps插件，步骤如下：

1. 安装插件与依赖 #

首先在项目根目录执行以下命令安装插件和对应的Ionic Native包装器：

# 安装原生插件（替换成你的API密钥）
ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY"
# 安装Ionic Native包（Ionic 3对应4.x版本）
npm install @ionic-native/google-maps@4

注意：一定要确保你的Google Cloud控制台已经启用了Android Maps SDK、iOS Maps SDK和Directions API，并且API密钥配置了正确的应用签名/包名，不然会出现加载失败或路线请求报错的问题。

2. 配置App Module #

在src/app/app.module.ts中导入并注册Google Maps服务：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule, IonicApp } from 'ionic-angular';
import { MyApp } from './app.component';
import { GoogleMaps } from '@ionic-native/google-maps';

@NgModule({
  declarations: [MyApp],
  imports: [BrowserModule, IonicModule.forRoot(MyApp)],
  bootstrap: [IonicApp],
  entryComponents: [MyApp],
  providers: [GoogleMaps] // 添加到providers数组
})
export class AppModule {}

3. 页面中实现路线绘制 #

以home.ts为例，编写核心代码：

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, Marker, DirectionsRequest, DirectionsResult } from '@ionic-native/google-maps';

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

  constructor(public navCtrl: NavController, private platform: Platform, private googleMaps: GoogleMaps) {
    // 等待平台就绪后初始化地图
    this.platform.ready().then(() => {
      this.initMap();
    });
  }

  initMap() {
    // 创建地图实例，绑定到页面的map容器
    this.map = this.googleMaps.create('map_canvas', {
      camera: {
        target: { lat: 37.7749, lng: -122.4194 }, // 初始中心点（旧金山）
        zoom: 12
      }
    });

    // 等待地图加载完成后执行后续操作
    this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
      // 定义起点和终点坐标
      const startPoint = { lat: 37.7749, lng: -122.4194 };
      const endPoint = { lat: 37.3382, lng: -121.8863 };

      // 添加起点标记
      this.map.addMarker({
        position: startPoint,
        title: '起点'
      }).then((marker: Marker) => {
        marker.showInfoWindow();
      });

      // 添加终点标记
      this.map.addMarker({
        position: endPoint,
        title: '终点'
      }).then((marker: Marker) => {
        marker.showInfoWindow();
      });

      // 构造路线请求参数
      const request: DirectionsRequest = {
        origin: startPoint,
        destination: endPoint,
        travelMode: 'DRIVING' // 可选：DRIVING（驾车）、WALKING（步行）、TRANSIT（公共交通）
      };

      // 请求并绘制路线
      this.map.getDirections(request).then((result: DirectionsResult) => {
        // 用折线绘制路线
        this.map.addPolyline({
          points: result.routes[0].points,
          color: '#007bff',
          width: 5
        });

        // 自动调整地图视野，让整个路线都显示在屏幕内
        this.map.moveCamera({
          target: result.routes[0].points
        });
      }).catch(err => {
        console.error('获取路线失败:', err);
      });
    });
  }
}

然后在home.html中添加地图容器：

<ion-content>
  <div id="map_canvas" style="width: 100%; height: 100%;"></div>
</ion-content>

如果原生插件的配置对你来说太繁琐，也可以试试以下方案：

1. 使用Google Maps JavaScript API（Web版） #

通过WebView加载Google Maps JS API，无需原生插件，配置更简单：

• 在src/index.html中引入API脚本：

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

• 在页面ts中实现路线绘制：

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
declare var google: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements OnInit {
  @ViewChild('map') mapElement: ElementRef;
  map: any;

  ngOnInit() {
    this.initMap();
  }

  initMap() {
    const mapOptions = {
      center: new google.maps.LatLng(37.7749, -122.4194),
      zoom: 12
    };
    // 初始化地图
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

    // 初始化路线服务和渲染器
    const directionsService = new google.maps.DirectionsService();
    const directionsRenderer = new google.maps.DirectionsRenderer();
    directionsRenderer.setMap(this.map);

    // 构造路线请求
    const request = {
      origin: new google.maps.LatLng(37.7749, -122.4194),
      destination: new google.maps.LatLng(37.3382, -121.8863),
      travelMode: 'DRIVING'
    };

    // 请求并渲染路线
    directionsService.route(request, (result, status) => {
      if (status == 'OK') {
        directionsRenderer.setDirections(result);
      }
    });
  }
}

• 对应的html：

<ion-content>
  <div #map style="width: 100%; height: 100%;"></div>
</ion-content>

优点：配置简单，跨平台体验一致；缺点：性能略逊于原生插件，离线场景无法使用。

2. 使用Leaflet + Leaflet-Routing-Machine（开源方案） #

如果你不想依赖Google服务，可以用Leaflet地图配合路由插件，基于OpenStreetMap的免费数据：

• 安装依赖：

npm install leaflet leaflet-routing-machine --save

• 在src/index.html中引入样式：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css" />

• 页面ts代码：

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
declare var L: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements OnInit {
  @ViewChild('map') mapElement: ElementRef;
  map: any;

  ngOnInit() {
    this.initMap();
  }

  initMap() {
    // 初始化Leaflet地图
    this.map = L.map(this.mapElement.nativeElement).setView([37.7749, -122.4194], 12);
    // 添加OpenStreetMap瓦片图层
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);

    // 添加路由控件
    L.Routing.control({
      waypoints: [
        L.latLng(37.7749, -122.4194),
        L.latLng(37.3382, -121.8863)
      ],
      routeWhileDragging: true // 允许拖动标记点实时更新路线
    }).addTo(this.map);
  }
}

优点：免费开源，无需API密钥；缺点：路线数据的准确性和覆盖范围不如Google Maps，部分地区支持度有限。

内容的提问来源于stack exchange，提问作者Siddharth Vyas