百度地图 Javascript API 笔记

因为最近的一个项目用到，所以自己整理了一下遇到的一些坑

自己写了一个类库来二次封装用于调起常用的功能：https://github.com/iRuxu/iBMap

快速文档链接

• Javascript API v2.0 类参考  | 官方指南 | demo
• Web API
• URI API v2.0

1.1 Javascript API

首先自己调起百度地图的话，需在页面引入对应API文件，如使用2.0：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

{坑一} 在一些浏览器上不能异步加载，会被阻止，所以还是需要将api文件直接在页面中引入。

{坑二}官方demo中有些示例似乎失效的，例如地址解析方法已经不可用，会报错，需通过Web API来异步调取结果。

内部的Point等构造方法，都是先lng经度后lat纬度。

{坑三}接口方法的调用需要在页面文档就绪以后，且对其装载元素指定尺寸，否则会出现地图渲染错误。

1.2 Web API

基于此返回一些给javascript API及sdk使用的数据。

{坑四}如进行正地理编码，值得注意的是，在使用jquery发起ajax请求时，必须指定data-type为jsonp，否则不能正常返回。

由于是跨域/jsonp并不能做同步处理，必须在回调中进行下一步操作。

1.3 URI API 

URI接口可以直接快速调起地图，返回一个html页面，所以可以直接嵌入在iframe中。

如果不需要自选的多个标点和一些进阶功能时，这是一个最快的方法，并且不需要ak。

值得注意的是，URI的地理传值则是先lat纬度后lng经度。

{坑五}此外，如果你的地图调起是通过弹窗打开，即如果地图装载的容器默认并未渲染（比如设置了display:none），则地图无法正常加载。

替代的方案：

a.设置fixed定位，并且设置一个较大的偏移值，例如margin:5000px，当触发时再修正位置

b.设置transform:scale3d(0,0,0)，默认将其放缩至0，触发候再将其恢复正常transform:sacle(1,1,1)，还可以有一个放缩动画效果。（但是仅使用此条，刚打开页面时，会有一个缩小动画，所以仍旧需要先将其偏移至可视区外，可结合第一条）

c.根据具体测试，overflow:hidden也能正常渲染地图，但是此时通常你不得不将尺寸设为0，此时加载地图时，标记的位置可能会错误。

暂时就这么多。