ionic2 geolocation, transforming geolocation coordinates into Baidu coordinates and Gaud map coordinates

Keywords: Amap angular JSON Javascript

  1. Install the geolocation plug-in and execute the following command
    npm install --save @ionic-native/geolocation
  2. Declare the geolocation plug-in in app.module.ts
    import { Geolocation } from '@ionic-native/geolocation';
    @NgModule({
        providers: [
    		{ provide: ErrorHandler, useClass: IonicErrorHandler },
            Geolocation
        ]
    })
  3. 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
         ) {}
    }

     

  4. 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>

     

  5. 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);
            });
     }
  6. 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!');
              }
          });
        }
    }

     

  7. 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);
            });
        }
    }

     

  8. 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>');  
        }
    }

     

  9. 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);
            });
        }

     

  10. 4

  11. 5

  12.  

Posted by TechGuru on Sun, 29 Dec 2019 09:03:16 -0800