ionic使用百度地图实时定位并导入标记

最近遇到前端需要实现地图的功能，其实调用地图的例子网上有好多，这边介绍一下我们如何通过ionic框架在前端调用百度地图。

 

首先我们需要在src目录下的index.html文件中引入百度地图，在这之前请申请百度地图密钥（密钥在百度地图官网申请）

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你所申请的密钥"></script>

 

其次我们需要调用geolocation插件来进行定位，在终端中输入以下命令行进行安装

ionic cordova plugin add cordova-plugin-geolocation
npm install --save @ionic-native/geolocation
（若使用淘宝镜像，请将nmp改为cnmp）
//npm淘宝镜像，之后就可以采用cnpm代替npm命令加快之后plugin下载速度
//npm install -g cnpm --registry=https://registry.npm.taobao.org

 

接着我们在html中加入map，并写好样式，例如

//html文件
<div #map id="map_container"></div>

//scss文件
  #map_container{
    width: 100%;
    height: 100%;
  }

 

最后我们进行ts文件的编写，具体是通过geolocation插件提供的getcurrentlocation来获取当前位置，但是这个方法只会获取一次，因此我们这边用的是watchposition方法来获取实时位置，关于这两个函数的具体用法可以在ionic官方文档上查看。接着我们会从后端获取需要在地图上显示的标记的经纬度（只需要实现实时定位功能的话可以忽略），然后在地图上标记出来。具体代码如下所示

import { Component,ViewChild,ElementRef } from '@angular/core';
import { IonicPage,NavController, NavParams } from 'ionic-angular';
//导入geolocation
import { Geolocation } from '@ionic-native/geolocation';
//这边我们写了一个合httpservice用来get或者post后端数据，进而从后端获取要在地图上显示的标记的经纬度
import { HttpService } from "../../services/HttpService";
import { AppConfig } from "../../app/app.config";
//申明百度地图类库
declare var BMap;


@IonicPage()
@Component({
  selector: 'page-BaiduMap',

  templateUrl: 'BaiduMap.html'
})
export class HomePage {
  @ViewChild('map') map_container: ElementRef; //创建视图
  map: any; //地图对象
  marker: any; //标记
  markIcon:any; //标记图标
  locationIcon:any; //实时位置图标
  url = AppConfig.getUrl(); //获取服务器url，这边要提前在config中写好服务器的url，以便获取标记的经纬度
  markOrder:any; //从后端获取的标记顺序
  subscription: any; //用来控制watchposition，以便在退出页面的时候关闭

  constructor(public navCtrl: NavController,
               private geolocation: Geolocation,
               private settings: SettingProvider,
               private httpService:HttpService) {
    this.markIcon = new BMap.Icon("assets/icon/mark.ico", new BMap.Size(50, 50));
    this.locationIcon = new BMap.Icon("assets/icon/currentlocation.ico", new BMap.Size(30, 30));

  }

//在进入页面的时候触发

  ionViewDidEnter() {

    let map = this.map = new BMap.Map(this.map_container.nativeElement, { enableMapClick: true });  //创建地图实例
    map.addControl(new BMap.MapTypeControl()); //添加地图类型


    this.httpService.get(this.url + "你的action") //调用相关action
      .then(res=>{
        //判断是否认证成功
       for(this.markOrder=0;;this.markOrder++){
          let point = new BMap.Point(res[this.markOrder].ccLongitudeBaidu, res[this.markOrder].ccLatitudeBaidu); //标记位置显示
           let marker = new BMap.Marker(point,{ icon: this.markIcon });  //设置标记图标
          this.map.addOverlay(marker);  //加入地图中
        
      }}).catch((err:any) => {
      console.log(err);
    });


    let sizeMap = new BMap.Size(10, 80); //地图大小
    // map.addControl(new BMap.NavigationControl());//添加平移缩放控件

    //获取当前位置（只调用一次）
    this.geolocation.getCurrentPosition().then((resp) => {
      let point = new BMap.Point(resp.coords.longitude, resp.coords.latitude);
      map.centerAndZoom(point, 18);  //设置中心和地图显示级别
    });


    let previousMarker = null; //记录实时定位时保存先前一个marker点，以便更新时删除前一个marker点
    //采用watchPosition()实时更新定位
    this.subscription = this.geolocation.watchPosition()
      .filter((p) => p.coords !== undefined) //Filter Out Errors
      .subscribe(position => {
        let point = new BMap.Point(position.coords.longitude, position.coords.latitude);

        let convertor = new BMap.Convertor();  //定义转换器
        let pointArr = [];  //定义位置点数组
        pointArr.push(point);  //放入当前位置点
        convertor.translate(pointArr, 1, 5, (data) => {
          if (data.status === 0) {
            //如果已经记录过一次当前位置，则删除上一次的位置图标
            if(previousMarker != null){
              this.map.removeOverlay(previousMarker);
            }
            //设置图标并加入到地图中
            let marker = this.marker = new BMap.Marker(data.points[0], { icon: this.locationIcon });
            this.map.panTo(data.points[0]);
            marker.setPosition(data.points[0]);
            this.map.addOverlay(marker);
            previousMarker = marker;  //记录当前marker以便下次刷新位置时删除
          }
        })
      });


    map.enableScrollWheelZoom(true);  //启动滚轮放大缩小，默认禁用
    map.enableContinuousZoom(true);   //连续缩放效果，默认禁用
  }


  //跳转至城市选择页面
  goCitySelect(){
    this.navCtrl.push('CitySelectPage')
  }


  ionViewDidLeave(){
    //离开页面时关闭实时更新当前位置
    this.subscription.unsubscribe();
  }

}

 

参考资料

https://ionicframework.com/docs/native/geolocation/     ionic官方文档中geolocation的使用

https://www.cnblogs.com/caiyaming/p/9233315.html       ionic调用百度地图

https://blog.csdn.net/u011537073/article/details/62060294     使用ionic接入报读地图