ionic在任意html上引入js,Ionic使用地图功能

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

思路：

1.1.新建一个显示地图的页面

2.引入js并初始化地图

3.判断设备是否有相应的地图APP

4.有APP则跳转，没有则去下载页面

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

ionic g page map

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

//网页

//手机端

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

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

image

image

5.判断是否存在app

cordova plugin add cordova-plugin-appavailability --save

npm install --save @ionic-native/app-availability

6.看一下导入的包

7.看一下constructor

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

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

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)

})