[TypeScript] 使用 Ionic 2 开发平台并结合 Google Maps API 的示例 [Android/iOS]

您好，我是网站团队的Goto。

这是一个在 Ionic 2 中使用 Google Maps API 的示例。
虽然其中包含大量英文信息，但我认为有些人觉得阅读英文不利于心理健康，所以
我觉得这个示例对他们来说会很有用。

本文或许对 Ionic 2 入门有所帮助。

学习如何使用 Ionic，请阅读 @tyoshikawa1106 在 @Qiita 上发布的《Ionic Book》
：http://qiita.com/tyoshikawa1106/items/cec9e893cb7449ba9ce7
开始使用 Angular 2 + Ionic 2，请阅读 @creativewebjp 在 @Qiita 上发布的
：http://qiita.com/creativewebjp/items/6986f97f8843e0157691

安装插件

“Google Maps Cordova插件”的
插件
使用此插件，您无需为Android和iOS分别编写代码。
此外，由于它使用原生Google Maps SDK而非Google Maps JavaScript API，
因此有助于减少数据流量并快速显示地图。

$ ionic plugin add cordova-plugin-googlemaps

---

*从现在开始，我将省略我已经编写好的代码。

查看地图

使用方法如下：
在想要显示地图的位置放置一个 div 元素，然后
使用 `new GoogleMap('放置的 div 元素的 ID')`。
*官方网站上的示例代码中，`GoogleMaps` 包含一个 `s`，但实际上并没有这个类！

import {Component} from '@angular/core'; import {GoogleMap, GoogleMapsEvent} from 'ionic-native'; @Component({ selector: 'map-canvas', template: '<div id="map_canvas" style="height: 100%; width: 100%;"></div> ' }) export class MapComponent { private map: GoogleMap; constructor() { console.log("地图组件构造函数"); this.map = new GoogleMap('map_canvas'); } }

确定显示位置

地图显示出来后，您需要决定它的显示位置。
默认显示位置设置为经纬度 0 度，放大倍数足以显示世界地图。
接下来，我们来设置地图的中心位置和放大倍数。

//导入 GoogleMapsLatLng。 import {GoogleMap, GoogleMapsEvent, GoogleMapsLatLng} from 'ionic-native'; export class MapPage { constructor() { this.map = new GoogleMap('map_canvas'); GoogleMap.isAvailable().then(() => { this.map.one(GoogleMapsEvent.MAP_READY).then(() => { //使用 GoogleMapsLatLng 创建一个坐标对象。 let myPosition = new GoogleMapsLatLng('34.6687443', '135.4876302'); //使用 GoogleMap.setCenter 设置中心坐标。 this.map.setCenter(myPosition); //使用 GoogleMap.setZoom 设置缩放比例。数值越大，显示区域越窄。 this.map.setZoom(15); }); }); } }

* 接收 Promise 的 then 方法

.then((/* Promise */) => { /** ...处理... **/ });

Promise.prototype.then()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
箭头函数
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions

放置标记

放置标记。

//新增导入 GoogleMapsMarkerOptions 和 GoogleMapsMarker。 import {GoogleMapsMarker, GoogleMapsMarkerOptions} from 'ionic-native'; export class MapComponent { private marker: GoogleMapsMarker; //声明一个变量来保存值 constructor() { GoogleMap.isAvailable().then(() => { this.map.one(GoogleMapsEvent.MAP_READY).then(() => { let myPosition = new GoogleMapsLatLng('34.6687443', '135.4876302'); this.map.setCenter(myPosition); this.map.setZoom(15); //放置标记。 this.map.addMarker({ position: myPosition //使用 GoogleMapsLatLng 类型指定纬度和经度。 }).then((marker)=>{ this.marker = marker; //存储在 this.marker 中 }); }); }); } }

允许您通过拖动来移动标记。

我们在放置标记时将其存储在 this.marker 中的原因是为了以后可以像这样对其进行操作。

//设置标记是否可拖动 this.marker.setDraggable(true);

用线连接标记

//新增 GoogleMapsPolyline 的导入。 import {GoogleMapsPolyline} from 'ionic-native'; export class MapComponent { private positions: Array<GoogleMapsLatLng> ; //声明用于保存多个位置的变量类型 private markers: Array<GoogleMapsMarker> ; //声明用于保存多个标记的变量类型 private poly_lines: Array<GoogleMapsPolyline> //声明一个变量类型来保存多条线 //初始化多个位置 this.positions = [ new GoogleMapsLatLng('34.669', '135.485'), new GoogleMapsLatLng('34.68', '135.488'), new GoogleMapsLatLng('34.69', '135.485'), new GoogleMapsLatLng('34.66', '135.481'), ]; this.markers = Array(); //初始化一个数组来保存标记 this.poly_lines = Array(); //初始化一个数组来保存线条 this.map.one(GoogleMapsEvent.MAP_READY).then(() => { //在指定位置放置标记 this.positions.forEach((position) => { this.map.addMarker({ position: position }).then((marker) => { this.markers.push(marker); //保留已放置的标记 }); }); //在位置之间绘制线条 this.positions.forEach((position, index, positions) => { this.map.addPolyline({ if (index != 0) { points: [positions[index], positions[index-1]], //线条的起点和终点 color: '#00A8E8', //线条颜色 width: 1 //线条粗细 } }).then((poly_line) => { this.poly_lines.push(poly_line); //保留已放置的线条 }); }); } }

画一个圆圈

//新增导入 GoogleMapsCircle。 import {GoogleMapsCircle} from 'ionic-native'; export class MapComponent { private circle: GoogleMapsCircle; //声明用于保存圆的变量类型 this.map.one(GoogleMapsEvent.MAP_READY).then(() => { //放置圆 let circle_position = new GoogleMapsLatLng('34.6687443', '135.4876302'); this.map.addCircle({ center: circle_position, //设置圆心坐标 radius: 100, //设置圆的半径（单位：米） strokeColor: '#f53d3d', //设置圆周线的颜色 strokeWidth: 1, //设置圆周线的粗细 fillColor: '#E6F7FF' //设置圆内的颜色 }).then((circle) => { this.circle = circle; //保存放置的圆 }); } }

其他的

我可能会再次写关于这个的内容，但如果你想做其他事情，

你应该阅读{project}/node_modules/ionic-native/dist/plugins/googlemaps.d.ts

类似的方法有很多种。

/** * 获取可见区域 */ getVisibleRegion(): Promise<VisibleRegion> showDialog(): void; closeDialog(): void; getLicenseInfo(): Promise<string> ; setCenter(latLng: GoogleMapsLatLng): void; setZoom(zoomLevel: number): void; setMapTypeId(typeId: string): void; setTilt(tiltLevel: number): void; animateCamera(cameraPosition: CameraPosition): void; moveCamera(cameraPosition: CameraPosition): void; setMyLocationEnabled(enabled: boolean): void; setIndoorEnabled(enabled: boolean): void; setTrafficEnabled(enabled: boolean): void; setCompassEnabled(enabled: boolean): void; setAllGesturesEnabled(enabled: boolean): void; addMarker(options: GoogleMapsMarkerOptions): Promise<GoogleMapsMarker> addCircle(options: GoogleMapsCircleOptions): Promise<GoogleMapsCircle> ; addPolygon(options: GoogleMapsPolygonOptions): Promise<GoogleMapsPolygon> ; addPolyline(options: GoogleMapsPolylineOptions): Promise<GoogleMapsPolyline> ; addTileOverlay(options: GoogleMapsTileOverlayOptions): Promise<GoogleMapsTileOverlay> ; addGroundOverlay(options: GoogleMapsGroundOverlayOptions): Promise<GoogleMapsGroundOverlay> ; addKmlOverlay(options: GoogleMapsKmlOverlayOptions): Promise<GoogleMapsKmlOverlay> setDiv(domNode: HTMLElement): void; setVisible(visible: boolean): void; setOptions(options: any): void; setBackgroundColor(backgroundColor: string): void; setPadding(top?: number, right?: number, bottom?: number, left?: number): void; clear(): void; refreshLayout(): void; fromLatLngToPoint(latLng: GoogleMapsLatLng, point: any): Promise<any> ; fromPointToLatLng(point: any, latLng: GoogleMapsLatLng): Promise<GoogleMapsLatLng> toDataURL(): Promise<any> remove(): void; panBy(): void;

选项定义在下面，所以如果你看一下，应该就能掌握它们的用法了！

就是这样！！