[TypeScript] 将 GoogleMapsAPI 与 ionic2 结合使用的示例 [Android/iOS]

大家好，我是网络团队的 Goto。

这是在 ionic2 中使用 GoogleMapsAPI 的示例。
英文有很多信息，但我认为有些人出于心理健康的原因不喜欢阅读英文，所以
我认为这本书对这些人很有用。

我认为这篇文章对于如何开始使用 ionic2 会有帮助。

了解如何使用 Ionic 与 @tyoshikawa1106 在 @Qiita 上的 The Ionic Book
http://qiita.com/tyoshikawa1106/items/cec9e893cb7449ba9ce7
我开始使用 Angular 2 + Ionic 2 by @creativewebjp on @Qiita
http://qiita.com/creativewebjp /项目/6986f97f8843e0157691

安装插件

我们使用一个名为
Google Maps plugin for Cordova 的通过使用插件，无需为 Android 和 iOS 编写单独的代码。
此外，由于它使用原生Google Maps SDK而不是Google Maps JavaScript API，因此
可以减少数据费用并且显示速度更快。

$ ionic 插件添加 cordova-plugin-googlemaps

---

*从现在开始，我将省略曾经写过的代码。

显示地图

使用方法如下。
在要显示地图的位置放置一个 div 元素，然后
执行 new GoogleMap('ID of the div you place');
*官网上的示例代码是一个带有GoogleMaps和“s”的陷阱。没有这样的班级！

从 '@angular/core' 导入 {Component}；从 'ionic-native' 导入 {GoogleMap, GoogleMapsEvent}；@Component({ 选择器：'地图画布'，模板：'<div id="map_canvas" style="height: 100%; width: 100%;"></div> ' }) 导出类 MapComponent { private map: GoogleMap; constructor() { console.log("地图组件构造函数"); this.map = new GoogleMap('map_canvas');

决定显示位置

显示地图后，我想决定在哪里显示它。
初始显示位置设置为允许世界地图在0度纬度和经度处显示的放大倍数。
确定地图的中心位置和放大倍数。

//导入新的GoogleMapsLatLng。从 'ionic-native' 导入 {GoogleMap, GoogleMapsEvent, GoogleMapsLatLng} 导出类 MapPage { constructor() { this.map = new GoogleMap.isAvailable().then(() => { this. map.one(GoogleMapsEvent.MAP_READY).then(() => { //用GoogleMapsLatLng创建坐标对象。let myPosition = new GoogleMapsLatLng('34.6687443', '135.4876302'); //用GoogleMap.setCenter设置中心坐标.map.setCenter(myPosition); //使用GoogleMap.setZoom设置放大倍数。值越大，显示的区域越窄 }) });

*Then 接收 Promise 的方法

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

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

放置一个标记

设置一个标记。

//GoogleMapsMarkerOptions，导入一个新的GoogleMapsMarker。 import {GoogleMapsMarker, GoogleMapsMarkerOptions} from 'ionic-native'; export class MapComponent { private mark: 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); //设置一个标记。 });

允许通过拖动来移动标记

我之所以在设置marker时将其保存在this.marker中，是为了以后这样操作。

//设置可拖动选项 this.marker.setDraggable(true);

用线连接标记

//导入新的GoogleMapsPolyline。从 'ionic-native' 导入 {GoogleMapsPolyline} 导出类 MapComponent { 私有位置：数组<GoogleMapsLatLng>; //声明持有多个位置的变量类型私有标记：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]], // 线条颜色的起点和终点: '#00A8E8', //线条颜色宽度: 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;<string> ; setCenter(latLng: GoogleMapsLatLng): void; setZoom(zoomLevel: number): void; setMapTypeId(typeId: string): void; setTilt(tiltLevel: number): void; CameraPosition): void; setMyLocationEnabled(启用: boolean): void; setIndoorEnabled(启用: boolean): void; setTrafficEnabled(启用: boolean): void; setCompassEnabled(启用: boolean): void; addMarker（选项：GoogleMapsMarkerOptions）：承诺<GoogleMapsMarker>; addCircle（选项：GoogleMapsCircleOptions）：承诺<GoogleMapsCircle>; addPolygon（选项：GoogleMapsPolygonOptions）：承诺<GoogleMapsPolygon>; addPolyline（选项：GoogleMapsPolylineOptions）：承诺<GoogleMapsPolyline>; addTileOverlay（选项：GoogleMapsTileOverlayOptions）：承诺<GoogleMapsTileOverlay>; addGroundOverlay（选项：GoogleMapsGroundOverlayOptions）：承诺<GoogleMapsGroundOverlay>; addKmlOverlay（选项：GoogleMapsKmlOverlayOptions）：承诺<GoogleMapsKmlOverlay>; setDiv(domNode: HTMLElement): void; setVisible(visible: boolean): void; setOptions(options: any): void; setBackgroundColor(backgroundColor: string): void; ？：数字，左？：数字）：void；refreshLayout（）：void；fromLatLngToPoint（latLng：GoogleMapsLatLng，点：任何）：Promise<any> ; fromPointToLatLng(点: 任何, latLng: GoogleMapsLatLng): 承诺<GoogleMapsLatLng>; toDataURL(): 承诺<any>; 删除（）：无效（）：无效；

这些选项的底部有选项定义，所以如果你看看它们，你就能够使用它们！ ！

就是这样！ ！