Ionic学习日记10： 百度地图的使用

前言

练手的使用，边学习边做记录，方便以后的人学习和使用，记录方式按照列表的来
1、百度地图的展示
2、百度地图的定位
3、显示POI点

准备步骤

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

http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5

我使用的是web端JavaScript API V2.0，按照官方提示的步骤，直至获取密钥

获取的密钥

百度地图的展示

引入百度地图API文件

将这段代码添加到src目录下的的index.html当中，切记，尽量放在的前面，貌似和ionic的加载机制有关系。
然后在需要引用的html文件中添加

其中mapscss指定的样式为

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

在ts文件中首先添加

首先需添加的代码

在该ts当中引入了BMap
添加ionViewDidEnter方法，这个方法表示页面进入完成的时候调用

代码部分

展示这么多只是想表达大概长什么样子，之后的代码也是添加在这个地方，但是如果仅仅想要展示的话，只需要以下几行代码

 let map = new BMap.Map('container', { enableMapClick: true });
 let point = new BMap.Point(116.404, 39.915);
 map.centerAndZoom(point, 18);

运行代码

运行后

这样就初步完成了百度地图的展示功能