ionic2 引入第三方地图（百度地图）
index.html
script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=97e1c429289e7df00bcf7a913007695b">
script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=gYgULa1jV7bufpSpfcDjeIxBrEWmhmhy">
// 打开第三方地图
cordova plugin add cordova-plugin-appavailability --save //检测是否存在第三方App
// 打开百度地图需要在config.xml 添加：
allow-intent href="baidumap://*/*" /
allow-intent href="bdapp://*/*" /
import { Component,ViewChild }from '@angular/core';
import {IonicPage, NavController,ViewController, NavParams,ModalController}from 'ionic-angular';
import { Device }from '@ionic-native/device';// 获取设备
// 打开地图
declare let appAvailability:any;
declare var AMap;
declare var device;
@IonicPage()
@Component({
selector:'page-public-open-map',
templateUrl:'public-open-map.html',
})
export class PublicOpenMapPage {
constructor(public viewCtrl: ViewController,public navCtrl: NavController,public navParams: NavParams,public modalCtrl: ModalController, ) {
}
longitude;// 经度
latitude;// 纬度
addressName;// 钓鱼地点
ionViewDidEnter(){
this.longitude =this.navParams.get('longitude');
this.latitude =this.navParams.get('latitude');
this.addressName =this.navParams.get('addressName');
}
mianwidth = {'width':window.innerWidth+'px','height':window.innerHeight+'px'};
commentData ='';
// 关闭
disnum =1;
dismiss(){// 关闭
if(this.disnum ==1){
this.viewCtrl.dismiss();
}else if(this.disnum ==2){
this.disnum =1;
}
}
closeBtn(){
this.disnum =2;
this.viewCtrl.dismiss();
}
// ***** 打开地图 ****
// 高德地图
openGaodeMap(){
this.disnum =2;
this.viewCtrl.dismiss();
this.loadMap();
}
public map:any;
loadMap(){
this.map =new AMap.Map("mapContainer", {
zoom:18,
center:[this.longitude,this.latitude]
});
var marker =new AMap.Marker({
map:this.map,
position:[this.longitude,this.latitude]
});
marker.setLabel({
offset:new AMap.Pixel(20,20),//修改label相对于maker的位置
content:""
});
marker.markOnAMAP({
name:this.addressName,// 钓点位置
position:marker.getPosition()
})
this.map.addControl(new AMap.ToolBar());
if(AMap.UA.mobile){
document.getElementById('button_group').style.display='none';
}
}
scheme:string;
// 百度地图
openBaiduMap() {
appAvailability.check(
'com.baidu.BaiduMap',
function() {// 已下载
device.platform ==='iOS'?
window.location.href ='baidumap://map/direction?origin=latlng:116.291226,39.965221|name:世纪城&destination=latlng:39.9761,116.3282|name:钓点位置':
window.location.href ='bdapp://map/direction?&origin=latlng:116.291226,39.965221|name:世纪城&destination=latlng:39.9761,116.3282|name:钓点位置'
},
function() {// 未下载
// 打开浏览器
window.open(" http://api.map.baidu.com/direction?origin=latlng:34.264642646862,108.95108518068|name:当前位置&destination=latlng:39.9761,116.3282|name:钓点位置&mode=driving®ion=西安&output=html&src=yourCompanyName|yourAppName");
}
);
}
}
