百度地图api使用总结

1.首先进入百度地图开放平台

2.找到 开发 选项,选择合适的平台,我选的Web开发——JavaScript API

3.根据说明,需要先申请秘钥才可以使用

开发流程:

1.首先获取服务,获取秘钥后,在HTML中引入,如下:

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

将秘钥yourAppKey替换成你自己的即可

2.定义一个容器,地图会在定义的容器中显示,这个容器要有确定的宽高,如果是移动端还需要加上meta标签<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />



3.命名空间

API 使用 BMap 作为命名空间,所有类都在命名空间之下,也就是说无论是创建地图,还是创建一个覆盖物或者控件,都需要使用 BMap.[类],下边是一个简易的地图实例(在上边代码的<script></script>标签中实现)



常用API介绍

1.Map 地图类

Map 是地图 API 的核心类,用来实例化一个地图

通过new BMap.Map(container);来创建,之后需要调用centerAndZoom(point,zoom)方法对地图进行初始化,否则进行不了任何操作

map.getCenter()、map.setCenter(center:Point|String)

获取当前中心点坐标 map.getCenter()得到的是一个 point 对象、设置当前中心点坐标

map.getDistance(start:Point,end:point)

返回两点间距离,需要两个点的point

map.getZoom() 、 map.setZoom(zoom)

返回当前地图的缩放比 、设定地图的缩放比

map.centerAndZoom(point,zoom)

用于初始化地图,设置初始化时的中心点及缩放级别

map.panTo(point)

修改地图的中心点,并且移动过去

reset()

重置地图,恢复地图初始化时的中心点和级别

addControl(control:Control)、removeControl(control:Control)

向地图中添加控件、从地图中移除控件

getContainer()

获取地图的容器元素

addOverlay(overlay:Overlay)、removeOverlay(overlay:Overlay)

向地图中添加覆盖物、从地图中移除覆盖物

clearOverlays()

清除地图上所有覆盖物

getOverlays()

获取地图上所有的覆盖物

2.Point 坐标点类

表示地图上的一个坐标点var point = new BMap.Point(lng,lat) lng:经度 lat:纬度


defaultOffset

控件默认位置的偏移值

this.defaultOffset =newBMap.Size(rem *0.16, rem *0.2);

5.Overlay 覆盖物类

show()、hide()、isVisible()

显示覆盖物、隐藏覆盖物、判断覆盖物是否可见

百度地图提供的覆盖物比较好用,很少情况会自定义覆盖物

6.Marker 图像标注

通过:new BMap.Marker(point, opts);创建,Marker 是我使用比较多的 API,它的配置和使用方法都比较多,如果在这里找不到想要的功能可以到官方文档上找找

setIcon(icon:Icon)、getIcon()

设置标注所用的图标对象、返回标注所有的标注对象

setPosition(position:Point)、getPosition()

设置标注的地理坐标、返回标注的地理坐标

setOffset(offset:Size)、getOffset()

设置标注的偏移值、返回标注的偏移值

setLabel(label:Label)、getLabel()

为标注添加文 标注、返回标注的文本标注

setTitle(title:String)、getTitle()

设置标注的标题,当鼠标移至标注上时显示此标题、返回标注的标题

enableDragging()、disableDragging()

开启标注拖拽功能、关闭标注拖拽功能

enableMassClear()、disableMassClear()

允许覆盖物在 map.clearOverlays方法中被清除、禁止覆盖物在 map.clearOverlays 方法中被清除

openInfoWindow(infoWnd:InfoWindow)、closeInfoWindow()

打开信息窗、关闭信息窗

7.Icon 图标

多用于给覆盖物,定义的显示图标Icon(url:String, size:Size[opts:IconOptions])

9.DrivingRoute 驾车路线规划方案

由于需要用到路线规划,所以使用了这个类,通过DrivingRoute(location:Map|Point|String[, opts:DrivingRouteOptions])可以创造一个驾车导航实例

search(start:String|Point, end:String|Point[,options:object])

发起检索功能,需要两个参数:起始位置、结束位置

getResults()

返回最近一次检索结果

clearResults()

清除最近一次检索结果

enableAutoViewport()、disableAutoViewport()

搜索结构显示时,自动调整地图层级、禁用自动调整

setPolylinesSetCallback(callback:Function)


10.Geolocation 获取本地位置信息

创造实例后,通过getCurrentPosition方法获得,如下:


React 中使用百度地图

由于应用使用 react 构建,所以还需要将两者结合,摸索了一下,最终得到一下解决方案

在 render 中定义地图的容器,设定好宽高

在 componentDidMount 中初始化地图,并且把地图挂在到组件上this.map = new BMap.Map("container"); var map = this.map;

如果其他生命周期需要操作map(一般是componentDidUpdate),直接使用this.map

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容