Ionic使用地图功能

个人博客：http://pmx-xiguazi.com

思路：
    1.1.新建一个显示地图的页面
    2.引入js并初始化地图
    3.判断设备是否有相应的地图APP
    4.有APP则跳转，没有则去下载页面

1.首先新建一个页面存放map

ionic g page map

2.在index.html中引入百度地图js

//网页
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=LAGclRpCcbrWvlQdY84uzkV7fAUlkiMH"></script>
//手机端
<script type="text/javascript" 
src="http://api.map.baidu.com/getscript?v=2.0&ak=LAGclRpCcbrWvlQdY84uzkV7fAUlkiMH&services=&t=20170411141812"></script>

3.在pages/map/map.html页面创建map容器

<div #map id=”container” class=”map_container” style=” height:100%;width:100%;">

4.在pages/map/map.ts中初始化map

image
image

5.判断是否存在app

参考链接：https://ionicframework.com/docs/native/app-availability/
在cmd中切换到项目根路径下，输入：

cordova plugin add cordova-plugin-appavailability --save
npm install --save @ionic-native/app-availability

image

6.看一下导入的包

image

7.看一下constructor

image

8.要做一个导航的功能，所有有一个app跳转

<div align=center>

image </div>

9.以跳转到腾讯地图为例

参考资料：https://lbs.qq.com/uri_v1/guide-mobile.html

9.1检测是否安装了腾讯地图APP

  let that = this;
  //检测百度地图APP是否存在
  if(that.platform.is('ios')){
    that.tencentapp = 'qqmap:// ';
  }else if (that.platform.is('android')) {
    that.tencentapp = 'com.tencent.map';
  }
  this.appAvailability.check(that.tencentapp).then(
    (yes: boolean) => {//有安装app}
    (no: boolean) => {//没有安装app
      alert(that.tencentapp + ' 未安装')
      //前往下载页面下载
      //https://pr.map.qq.com/j/tmap/download?key=YourKey
  });

9.2 安装了APP的话就要跳转到该APP并且传递参数

10.安装打开第三方APP的插件

cordova plugin add com.lampa.startapp

11.将yes中补全

//打开高德APP
    let tencentApp = startApp.set({
        "action":"ACTION_VIEW", 
        "category":"CATEGORY_DEFAULT", 
        "type":"text/css", 
        "package":that.tencentapp, 
        "uri":"qqmap://map/routeplan?to="+ that.address+"tocoord="+that.lat+","+that.lng+"&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", 
        "flags":["FLAG_ACTIVITY_CLEAR_TOP","FLAG_ACTIVITY_CLEAR_TASK"], 
        "intentstart":"startActivity", 
    }, { /* extras */ 
        "EXTRA_STREAM":"extraValue1", 
        "extraKey2":"extraValue2" 
    });
    tencentApp.start(function(){
        // alert('gaode ok')
        console.log("成功打开");
    },function(error){
        alert(error)
})