Ionic学习日记11： 高德地图的使用

前言

和上一篇的日记相同，练手的使用，边学习边做记录，方便以后的人学习和使用，记录方式按照列表的来
1、高德地图的展示
2、高德地图的定位
3、显示POI点

准备步骤

注册高德开发者的账号，用来申请密钥，从而使用高德的相关功能

http://lbs.amap.com

这次我使用的是web端的地图js API完成在ionic3当中的地图显示，和上一篇一样，需要注册获取密钥，详细的方式根据官方的提示操作即可

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=您申请的key值"></script>

将这段代码添加至index.html当中

高德地图的展示

在需要引用地图的页面中添加

<div id="container" class="mapscss"></div>

和上一篇一样需要添加scss样式，让其充满父容器

  .mapscss{
        width: 100%;
        height: 100%;
    }

同样的在ts中需要添加

需要添加的代码

题外话：一个BMap一个AMap，真的像是名字事先约定好的一样233
然后需要添加ionViewDidEnter，在页面加载完成的时候自动加载一个方法 LoadGaodeMap()的方法。

 ionViewDidEnter() {
    //显示高德地图
    this.LoadGaodeMap();
  }

然后添加

 let map = new AMap.Map('container', {
      resizeEnable: true,
      zoom: 11,
      center: [116.397428, 39.90923]
    });

到LoadGaodeMap方法中，其实这个也可以直接放在ionViewDidEnter方法中，这样做加载地图的时候貌似会快一些，写外面是方便之后修改或者是添加其他功能和操作

高德地图的定位

定位的话相对比较简单，官网给的很多，也更详细，我这边截取了一部分，只是为了完成定位的功能：

map.plugin('AMap.Geolocation', function () {

      let geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,//是否使用高精度定位，默认:true
        timeout: 10000,          //超过10秒后停止定位，默认：无穷大
        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        buttonPosition: 'LB'
      });
      map.addControl(geolocation);
      geolocation.getCurrentPosition();
      //AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
      // AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });