ionic5/angular11集成百度地图JSAPI及ionic官方定位插件Geolocation实现定位

一、添加Geolocation定位插件。

ionic cordova plugin add cordova-plugin-geolocation

npm install @ionic-native/geolocation

二、在ionic项目下src/app/index.html里导入百度地图JSAPI。

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的百度地图密钥"></script>

百度地图密钥申请

三、在app.module.ts里导入定位模块Geolocation，并在服务里导入。

//全局引入Geolocation定位插件
import { Geolocation } from '@ionic-native/geolocation/ngx';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: 
  [BrowserModule,
     IonicModule.forRoot(),
        ......
      AppRoutingModule,
      
    ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    ......
    //导入定位服务
    Geolocation
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

四、在需要用到定位服务的页面引入Geolocation。

我这里在map.page.ts里引入

百度地图JSAPI

 

import { Component, OnInit } from '@angular/core';
//导入定位插件
import { Geolocation } from '@ionic-native/geolocation/ngx';


import { Router} from '@angular/router';

//声明百度地图对象
declare var BMap;

@Component({
  selector: 'app-map',
  templateUrl: './map.page.html',
  styleUrls: ['./map.page.scss'],
})
export class MapPage implements OnInit {
  data :any;
  map: any;
  localaddress: any = null;
  constructor(private geolocation:Geolocation,private router : Router) { 
    
  }
  goBack(){
    
     alert(this.localaddress.district);
     
   
   }

  ngOnInit() {
    console.log("ngOnInit()调用");
  // 百度地图API功能
	this.map = new BMap.Map("allmap");  // 创建Map实例
	this.map.centerAndZoom("北京市");      // 初始化地图,用城市名设置地图中心点
  this.map.enableScrollWheelZoom(true);
  this.getLocation();
 
}
ngAfterViewInit(){
  console.log("ngAfterViewInit()调用");
  
}
  ionViewDidEnter(){
    console.log("ionViewDidEnter()调用");
  }
  
    getLocation() {
      let marker =null;
      let circle =null;
      //getCurrentPosition()方法为geolocation定位插件的定位获取坐标信息
          this.geolocation.getCurrentPosition().then((resp) => {
            if (resp && resp.coords) {
              //创建地图中心点
              let locationPoint = new BMap.Point(resp.coords.longitude, resp.coords.latitude);
              //通过geolocation定位插件获取到的经纬度坐标需要转换为百度坐标，否则在百度地图显示会出现偏差
              let convertor = new BMap.Convertor();//坐标转换对象
              let pointArr = [];//创建坐标数组
              pointArr.push(locationPoint);
              //坐标转换
              // 第一个属性为坐标数组，
              // 第二个属性为坐标原始类型，
              // 第三个属性为坐标目的类型，5为百度坐标
              convertor.translate(pointArr, 1, 5, (data) => {
                if (data.status === 0) {
                  //创建覆盖物标注
                  marker = new BMap.Marker(data.points[0]);
                  //创建圆形覆盖物
                  circle = new  BMap.Circle(data.points[0],100,{
                    fillColor:"blue",//圆形填充颜色。当参数为空时，圆形将没有填充效果
                    fillOpacity:0.1,//圆形填充的透明度，取值范围0 - 1
                    strokeOpacity:0.3,//圆形边线透明度，取值范围0 - 1
                    strokeWeight:1//圆形边线的宽度，以像素为单位
                  })
                  marker.setPosition(data.points[0]);
                  //将地图中心点更改为指定坐标点
                  this.map.panTo(data.points[0]);
                  //设置地图缩放级别
                  this.map.setZoom(17);
                  //添加地图标注
                  this.map.addOverlay(marker);
                  this.map.addOverlay(circle);
                  //设置标注动画，在移动端未生效，暂时未知原因
                  marker.setAnimation(2); //跳动的动画
                  //创建地址解析对象Geocoder，可将地理位置与坐标点正反转换
                  var geoc = new BMap.Geocoder();
                  //将坐标点解析为地理位置
                  geoc.getLocation(data.points[0],(res)=>{
                    this.localaddress = res.addressComponents;
                    alert(this.localaddress.province+"-"+this.localaddress.city+"-"+this.localaddress.district+"-"+this.localaddress.street+"-"+this.localaddress.streetNumber);
                  });
                }
              })
              console.log('GPS定位：您的位置是 ' + resp.coords.longitude + ',' + resp.coords.latitude);
            }
          }).catch(e => {
        alert("定位失败");
            console.log('Error happened when get current position.');
          });
    }
   
}

五、编写map.page.html和map.page.scss。

<ion-header>
  <ion-toolbar class="toolbar_box">
    <ion-back-button slot="start"></ion-back-button>
    <ion-title>地图</ion-title>
    <ion-button (click)="goBack()" class="submit" type="button">确定</ion-button>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div id="allmap"></div>
 
</ion-content>

#allmap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin:0;
    font-family:"微软雅黑";
}
.toolbar_box{
    position: relative;
}
.submit{
    position: absolute;
    float: right;
    top: 0;
    right: 0;
}

六、打包项目Android安装包查看效果。

ionic5/angular11项目添加Android环境并打包成Android安装包APK