1. 程式人生 > >ionic2 geolocation定位,將geolocation座標轉換為百度座標,高德地圖座標

ionic2 geolocation定位,將geolocation座標轉換為百度座標,高德地圖座標

  1. 安裝 geolocation 外掛 執行以下命令
    npm install --save @ionic-native/geolocation
  2. 將geolocation外掛在app.module.ts內宣告
    import { Geolocation } from '@ionic-native/geolocation';
    @NgModule({
        providers: [
    		{ provide: ErrorHandler, useClass: IonicErrorHandler },
            Geolocation
        ]
    })
  3. 在使用geolocation外掛的頁面匯入該外掛並且依賴注入
    import { Injectable } from '@angular/core';
    import { Geolocation } from '@ionic-native/geolocation';
    @Injectable()
    export class GeolocationService {
         constructor(
            private geolocation: Geolocation
         ) {}
    }

     

  4. 使用高德地圖與百度地圖需在index.html頁引入相關js。高德地圖的key值可更改為您所申請的key值
    
     <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. 使用geolocation外掛的方法獲取當前位置經緯度資訊
    
     /**
      * 獲取當前地理位置
      */
    getCurrentPosition(): Promise<{ latitude: string, longitude: string }> {
            return this.geolocation.getCurrentPosition().then(res => {
                let latitude = res.coords.latitude.toString();  //緯度
                let longitude = res.coords.longitude.toString(); //經度
                let locations = { latitude: latitude , longitude: longitude };
                return Promise.resole(locations );
            }).catch(e => {
                console.log(e);
                return Promise.reject(e);
            });
     }
  6. 將geolocation座標轉為百度地圖座標

    import { Injectable } from '@angular/core';
    declare var BMap;//宣告百度地圖
    @Injectable()
    export class GeolocationService {
        /**
         * 將經緯度轉換為百度地圖座標
         * @param latitude  緯度  
         * @param 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('轉換百度座標失敗!');
              }
          });
        }
    }

     

  7. 將geolocation座標轉為高德地圖座標

    import { Injectable } from '@angular/core';
    declare var AMap;//宣告高德地圖
    @Injectable()
    export class GeolocationService {
        /**
         * 高德地圖座標轉換
         * @param latitude  緯度  
         * @param 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: '獲取地址失敗,請您重試!' };
                }
                return Promise.resolve(returnMap);
            }).catch(error => {
                console.log(error);
                return Promise.reject(error);
            });
        }
    }

     

  8. 直接使用高德地圖獲取當前位置經緯度(未轉換為高德地圖座標)

    import { Injectable } from '@angular/core';
    declare var AMap;
    @Injectable()
    export class GeolocationService {
         /**
         * 高德地圖獲取當前位置經緯度
         */
        goLocation() {
            let that = this; let mapObj = new AMap.Map('iCenter');
            mapObj.plugin('AMap.Geolocation', function () {
                let geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,//是否使用高精度定位,預設:true         
                    timeout: 10000,          //超過10秒後停止定位,預設:無窮大         
                    maximumAge: 0,           //定位結果快取0毫秒,預設:0        
                    convert: true,           //自動偏移座標,偏移後的座標為高德座標,預設:true         
                    showButton: true,        //顯示定位按鈕,預設:true         
                    buttonPosition: 'LB',    //定位按鈕停靠位置,預設:'LB',左下角         
                    buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設定的停靠位置的偏移量,預設:Pixel(10, 20) 
                    showMarker: true,        //定位成功後在定位到的位置顯示點標記,預設:true   
                    showCircle: true,        //定位成功後用圓圈表示定位精度範圍,預設:true   
                    panToLocation: true,     //定位成功後將定位到的位置作為地圖中心點,預設:true 
                    zoomToAccuracy: true      //定位成功後調整地圖視野範圍使定位位置及精度範圍視野內可見,預設:false   
                });
                mapObj.addControl(geolocation);
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', that.onComplete.bind(that));//返回定位資訊      
                AMap.event.addListener(geolocation, 'error', (data) => {
                    console.log('定位失敗' + data);
                });   //返回定位出錯資訊    
            });
        }
        //解析定位結果  
        onComplete(data) {
            console.log(data);
            console.log(data.position.toString());
            console.log(data.formattedAddress);
            var str = ['定位成功'];
            str.push('經度:' + data.position.getLng());
            str.push('緯度:' + data.position.getLat());
            if (data.accuracy) {
                str.push('精度:' + data.accuracy + ' 米');
            }//如為IP精確定位結果則沒有精度資訊     
            str.push('是否經過偏移:' + (data.isConverted ? '是' : '否'));
            // document.getElementById('tip').innerHTML = str.join('<br>');  
        }
    }

     

  9. 根據經緯度獲取中文地址

    /**
         * 根據經緯度獲取地址
         * @param latitude  緯度  
         * @param longitude  經度
         * @param mapType 地圖型別 百度地圖 高德地圖
         */
        showPosition(latitude, longitude, mapType: string = '高德地圖'): Promise<ReturnMapEntry> {
            let latlon = latitude + ',' + longitude;
            let returnMap: ReturnMapEntry;
            //百度地圖介面  
            var url = "http://api.map.baidu.com/geocoder/v2/?ak=18246a9bf529aba431bacdc2547dc523&location=" + latlon + "&output=json&pois=0";
            if (mapType == '高德地圖') {
                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: '獲取地址失敗,請您重試!' };
                }
                return Promise.resolve(returnMap);
            }).catch(error => {
                console.log(error);
                return Promise.reject(error);
            });
        }

     

  10. 4

  11. 5

  12.