前言
练手的使用,边学习边做记录,方便以后的人学习和使用,记录方式按照列表的来
1、百度地图的展示
2、百度地图的定位
3、显示POI点
准备步骤
注册百度开发者的账号,用来申请密钥,从而使用百度的相关功能
我使用的是web端JavaScript API V2.0,按照官方提示的步骤,直至获取密钥
百度地图的展示
引入百度地图API文件
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
将这段代码添加到src目录下的的index.html当中,切记,尽量放在<script src="cordova.js"></script>的前面,貌似和ionic的加载机制有关系。
然后在需要引用的html文件中添加
<div id="container" class="mapscss"></div>
其中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);
运行代码
这样就初步完成了百度地图的展示功能