360SDN.COM

首页/Ionic/列表

教你如何在IONIC2中引入地图服务

来源:  2017-06-25 11:06:28    评论:0点击:

教你如何在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/


 


 

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权