ionic android绝对定位,ionic 调用百度地图API,并定位当前位置示例

import { Component, ViewChild, ElementRef } from ‘@angular/core‘;

import { IonicPage, NavController, AlertController, NavParams, MenuController } from ‘ionic-angular‘;

import { Geolocation } from ‘@ionic-native/geolocation‘;

declare var BMap;

declare var BMapLib;

@IonicPage()

@Component({

selector: ‘page-map‘,

templateUrl: ‘map.html‘,

})

export class MapPage {

map: any;

myGeo: any;

myIcon: any;

@ViewChild(‘map‘) map_container: ElementRef;

constructor(public navCtrl: NavController, public navParams: NavParams,

private geolocation: Geolocation) {

//此处请自行放置一个icon文件到 ssets/icon目录中

this.myIcon = new BMap.Icon("assets/icon/position.png", new BMap.Size(32, 32));

}

ionViewDidLoad() {

//Amin: !Important:map_container shoud be called here, it can‘t be inited in constructor, if called in constructor

this.map = new BMap.Map("map_container");

this.map.centerAndZoom(‘上海‘, 13);

this.map.enableScrollWheelZoom(true);

this.myGeo = new BMap.Geocoder();

var geolocationControl = new BMap.GeolocationControl();

this.map.addControl(geolocationControl);

this.getLocation();

}

getLocation() {

this.geolocation.getCurrentPosition().then((resp) => {

if (resp && resp.coords) {

let locationPoint = new BMap.Point(resp.coords.longitude, resp.coords.latitude);

let convertor = new BMap.Convertor();

let pointArr = [];

pointArr.push(locationPoint);

convertor.translate(pointArr, 1, 5, (data) => {

if (data.status === 0) {

let marker = new BMap.Marker(data.points[0], { icon: this.myIcon });

this.map.panTo(data.points[0]);

marker.setPosition(data.points[0]);

this.map.addOverlay(marker);

}

})

this.map.centerAndZoom(locationPoint, 13);

console.log(‘GPS定位:您的位置是 ‘ + resp.coords.longitude + ‘,‘ + resp.coords.latitude);

}

}).catch(e => {

console.log(‘Error happened when get current position.‘);

});

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值