- Install the geolocation plug-in and execute the following command
npm install --save @ionic-native/geolocation
- Declare the geolocation plug-in in app.module.ts
import { Geolocation } from '@ionic-native/geolocation'; @NgModule({ providers: [ { provide: ErrorHandler, useClass: IonicErrorHandler }, Geolocation ] })
- Import the plug-in on the page using the geolocation plug-in and rely on injection
import { Injectable } from '@angular/core'; import { Geolocation } from '@ionic-native/geolocation'; @Injectable() export class GeolocationService { constructor( private geolocation: Geolocation ) {} }
- The use of Google maps and Baidu maps requires the introduction of relevant js in the index.html page. The key value of goldmap can be changed to the key value you applied for
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=99f20bf360cfecd1eb94acfcb6819474"></script> <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
- Using geolocation plug-in to obtain the longitude and latitude information of the current position
/** * Get current geographic location */ getCurrentPosition(): Promise<{ latitude: string, longitude: string }> { return this.geolocation.getCurrentPosition().then(res => { let latitude = res.coords.latitude.toString(); //latitude let longitude = res.coords.longitude.toString(); //longitude let locations = { latitude: latitude , longitude: longitude }; return Promise.resole(locations ); }).catch(e => { console.log(e); return Promise.reject(e); }); }
-
Change geolocation coordinates to Baidu map coordinates
import { Injectable } from '@angular/core'; declare var BMap;//Declaration Baidu map @Injectable() export class GeolocationService { /** * Convert latitude and longitude to Baidu map coordinates * @param latitude latitude * @param longitude longitude */ transferBaiDuMapLocations(longitude,latitude){ let gpsPoint = new BMap.Point(longitude, latitude); return BMap.Convertor.translate(gpsPoint, 0, (point) => { if (point.lat && point.lng) { return Promise.resolve({ latitude: point.lat, longitude: point.lng }); } else { return Promise.reject('Baidu coordinate conversion failed!'); } }); } }
-
Change the geolocation coordinate to the Gaud map coordinate
import { Injectable } from '@angular/core'; declare var AMap;//Statement Gaud map @Injectable() export class GeolocationService { /** * Coordinate transformation of Gaud map * @param latitude latitude * @param longitude longitude */ positionTransfer(latitude, longitude){ let latlon = longitude + ',' + latitude; let url = "https://restapi.amap.com/v3/assistant/coordinate/convert? locations="+latlon+"&coordsys=gps&output=json&key=059b0ae61fe2a851334e9a2395440b23"; let returnMap:ReturnMapEntry; return this.http.get(url).toPromise().then(response => { let res = response.json(); if (res.status == 1) { returnMap = { is_ok: true, result: res.locations }; } else { returnMap = { is_ok: false, msg: 'Failed to get address, please try again!' }; } return Promise.resolve(returnMap); }).catch(error => { console.log(error); return Promise.reject(error); }); } }
-
Get the current position longitude and latitude directly using Gaud map (not converted to Gaud map coordinates)
import { Injectable } from '@angular/core'; declare var AMap; @Injectable() export class GeolocationService { /** * Obtaining the longitude and latitude of the current position from Gaud map */ goLocation() { let that = this; let mapObj = new AMap.Map('iCenter'); mapObj.plugin('AMap.Geolocation', function () { let geolocation = new AMap.Geolocation({ enableHighAccuracy: true,//Use high precision positioning, default: true timeout: 10000, //Stop positioning after more than 10 seconds, default: infinite maximumAge: 0, //Location result cache 0 ms, default: 0 convert: true, //Auto offset coordinate. The offset coordinate is Gaud coordinate. Default: true showButton: true, //Display positioning button, default: true buttonPosition: 'LB', //Positioning button docking position, default: 'LB', lower left corner buttonOffset: new AMap.Pixel(10, 20),//Offset of positioning button from the set docking position, default: Pixel(10, 20) showMarker: true, //After the positioning is successful, the point mark will be displayed at the position to which it is located. Default: true showCircle: true, //Circle indicates the positioning accuracy range after the positioning is successful, default: true panToLocation: true, //After successful positioning, the location to be located will be taken as the map center point, default: true zoomToAccuracy: true //After successful positioning, adjust the scope of the map to make the location and precision range visible. Default: false }); mapObj.addControl(geolocation); geolocation.getCurrentPosition(); AMap.event.addListener(geolocation, 'complete', that.onComplete.bind(that));//Return to location information AMap.event.addListener(geolocation, 'error', (data) => { console.log('seek failed' + data); }); //Return location error message }); } //Analytical positioning results onComplete(data) { console.log(data); console.log(data.position.toString()); console.log(data.formattedAddress); var str = ['Successful positioning']; str.push('Longitude:' + data.position.getLng()); str.push('Latitude:' + data.position.getLat()); if (data.accuracy) { str.push('Accuracy:' + data.accuracy + ' rice'); }//If it is IP precise positioning result, there is no precision information str.push('Offset or not:' + (data.isConverted ? 'yes' : 'no')); // document.getElementById('tip').innerHTML = str.join('<br>'); } }
-
Get Chinese address according to latitude and longitude
/** * Get the address according to latitude and longitude * @param latitude latitude * @param longitude longitude * @param mapType Map type Baidu map Gaode map */ showPosition(latitude, longitude, mapType: string = 'Gould map'): Promise<ReturnMapEntry> { let latlon = latitude + ',' + longitude; let returnMap: ReturnMapEntry; //Baidu map interface var url = "http://api.map.baidu.com/geocoder/v2/?ak=18246a9bf529aba431bacdc2547dc523&location=" + latlon + "&output=json&pois=0"; if (mapType == 'Gould map') { latlon = longitude + ',' + latitude; url = "http://restapi.amap.com/v3/geocode/regeo?location=" + latlon + "&key=059b0ae61fe2a851334e9a2395440b23"; } return this.http.get(url).toPromise().then(response => { let res = response.json(); if (res.status == 1) { returnMap = { is_ok: true, result: res.regeocode.formatted_address }; } else { returnMap = { is_ok: false, msg: 'Failed to get address, please try again!' }; } return Promise.resolve(returnMap); }).catch(error => { console.log(error); return Promise.reject(error); }); }
-
4
-
5
-
ionic2 geolocation, transforming geolocation coordinates into Baidu coordinates and Gaud map coordinates
Posted by TechGuru on Sun, 29 Dec 2019 09:03:16 -0800