前言
和上一篇的日记相同，练手的使用，边学习边做记录，方便以后的人学习和使用，记录方式按照列表的来
1、高德地图的展示
2、高德地图的定位
3、显示POI点
准备步骤
注册高德开发者的账号，用来申请密钥，从而使用高德的相关功能
这次我使用的是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); //返回定位出错信息
});
