百度地图 Javascript API 笔记

对着背影说爱祢 提交于 2021-01-31 21:33:42

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

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

快速文档链接

 

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,此时加载地图时,标记的位置可能会错误。

 

暂时就这么多。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!