基于ionic2实现地理定位示范

前言

本文内容,主要关于如何在ionic2中实现地理定位功能,相信有不少的业务需要用到。
此方法通过获取经纬度,并通过高德地理/逆地理编码API获取详细的位置信息。
所以请先前往高德开发平台注册账号,新建应用后,添加新KEY,并绑定为Web服务API。

tips:百度地图也有开放类似的API,也可采用。

步骤

安装插件

1
ionic plugin add cordova-plugin-geolocation

获取经纬度

1
2
3
4
5
6
7
8
9
10
11
import { Geolocation } from 'ionic-native';
import {locationService} from 'locationService';
Geolocation.getCurrentPosition().then((resp) => {
// resp.coords.latitude 纬度
// resp.coords.longitude 精度
this.locationService.trans(resp.coords.latitude,resp.coords.longitude).subscribe((res) = {
console.log(res.regeocode.addressComponent.province + ' ' + res.regeocode.addressComponent.city + ' ' + res.regeocode.addressComponent.district);
})
}).catch((error) => {
console.log('Error getting location', error);
});

通过API获取地理位置信息

1
2
3
4
5
6
7
8
9
10
11
12
13
import {Http} from '@angular/http';
@Injectable()
export class locationService {
constructor(private http: Http, public nav: NavController, public events: Events) {
this.http = http;
}
trans(longitude, latitude) {
let url = 'http://restapi.amap.com/v3/geocode/regeo?output=json&location=' + longitude + ',' + latitude + '&key=<用户的key>&radius=1000&extensions=base';
return this.http.get(url).map(
res => res.json()
);
}
}

欢迎大家加入Ionic2.0 交流群 513752928

Share Comments