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

     

    暂时就这么多。

  • 相关阅读:
    blob 下载功能和预览功能
    实现大文件上传
    element ui框架之Upload
    常用utils
    vue实现excel表格上传解析与导出
    理解script加载
    js处理10万条数据
    Shadow DOM
    20150625_Andriod_01_ListView1_条目显示
    20150624_Andriod _web_service_匹配
  • 原文地址:https://www.cnblogs.com/iruxu/p/baidumap-javascript.html
Copyright © 2011-2022 走看看