ionic2 集成地图开发

因为是导入的第三方js库，ts智能感应不了，所以还需要在declarations.d.ts文件中添加声明，

高德地图声明："declare var AMap"

百度地图声明："declare var BMap"（需要用到画弧线功能还需要"declare var BMapLib"）

---

集成高德地图：

在ionic2中使用高德地图需要我们在高德地图的开发者平台申请使用web JavaScript API的key。

第一步：在项目的index.html中引入JavaScript API：

第二步：声明AMap然后进行地图初始化，并根据提供的方法进行地图开发，首先在使用地图的html页面中添加div标签，并设置一个id

最后需要写TS文件；

运行效果：

---

集成百度地图：

同样的道理集成百度首先需要去百度官方申请web JavaScript API的key。

第一步，index文件添加JavaScript API：

第二步，创建div容器放置地图，并设置ID：

第三步，完善ts文件代码

运行效果：

其中发现一个坑：

ionViewLoaded： 页面加载完毕触发。该事件发生在页面被创建成 DOM 的时候，且仅仅执行一次。如果页面被缓存（Ionic默认是缓存的）就不会再次触发该事件。该事件中可以放置初始化页面的一些事件。

这个方法在运行中发现是不调用的 所以改用：ionViewDidLoad 原因没找到，哪位大神知道不妨告知！感谢

另外 百度地图 在浏览器上调试 会遇上跨域问题 我的方法是修改电脑的hosts文件 方法自行百度就好

PS:高德地图并没有跨域问题出现，百度坑货！

---

第一次写分享，写的比较烂，菜鸡ios开发一枚。