美文网首页我爱编程
ionic2 引入第三方地图(百度地图)

ionic2 引入第三方地图(百度地图)

作者: 丶温瞳 | 来源:发表于2018-01-16 14:44 被阅读45次

    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");

    }

    );

    }

    }

    相关文章

      网友评论

        本文标题:ionic2 引入第三方地图(百度地图)

        本文链接:https://www.haomeiwen.com/subject/flfwnxtx.html