zoukankan      html  css  js  c++  java
  • 百度地图 Javascript API 笔记

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

    自己写了一个类库来二次封装用于调起常用的功能: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,此时加载地图时,标记的位置可能会错误。

     

    暂时就这么多。

  • 相关阅读:
    程序员是怎样阅读简历的转
    在res/values下创建attrs.xml
    java clone技术 浅谈 转
    map list...
    Tab与TabHost转
    Silverlight以及Mvc最佳文件下载解决方案(附源码)
    如何将List<T>转换相应的Html(xsl动态转换)(二)
    UML 类图
    xxxxxx
    Xml日志记录文件最优方案(附源代码)
  • 原文地址:https://www.cnblogs.com/iruxu/p/baidumap-javascript.html
Copyright © 2011-2022 走看看