教你如何在IONIC2中引入地图服务
前言
在ionic1中引入地图很好,直接引入地图js库,然后按照官方文档来就行了,但是ionic2使用的是TypeScript,可就没那么顺利了,今天教大家如何在ionic2中使用地图服务,这里选用的是高德。
1.新建高德应用
先进入高德开放平台创建一个应用,先要注册账号,地址是:http://lbs.amap.com
2.新建ionic2应用
ionic start ionic2-amap --v2 //...等待完成
3.引入地图
找到index.html,在底部引用地图脚本。
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
4.使用地图
1、声明地图
在home.html中加入地图的dom元素。
<ion-content> <div #container id="container" cancelable="false" style="width:100%;height:100%"></div> </ion-content>
在home.ts中声明地图组件
declare var AMap;
,并导入ViewChild, ElementRef
,用来操作视图dom。import { Component, ViewChild, ElementRef } from '@angular/core'; import { NavController, Platform } from 'ionic-angular'; declare var AMap; //声明地图组建 @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { //... }
2、创建地图
在ionViewLoaded中创建地图
// 页面加载完成 ionViewDidLoad() { this.platform.ready().then(() => { this.createMap(); }); }
createMap()的实现如下
// 创建地图 createMap() { console.log("准备创建地图。。。。。") var map = this.map; // create map map = new AMap.Map(this.mapElement.nativeElement, { zoom: 11, center: [116.4135540000, 39.9110130000] }); // create toolBar map.plugin(["AMap.ToolBar"], function () { map.addControl(new AMap.ToolBar()); }); // create marker new AMap.Marker({ position: [116.4135540000, 39.9110130000], map: map }); }
运行效果 ionic serve
真机运行
添加android平台:ionic platform add android
打包android应用:ionic build android
部署到android手机:ionic run android
部署到真机需要正确配置android开发包,如果没有这个环境的,可在【Tonge移动开发交流群】群共享资源中获取。本项目示例代码:
https://git.oschina.net/tonge/ionic2-amap
高德地图JavaScript API具体参考文档:
http://lbs.amap.com/api/javascript-api/guide/