百度地图

用于调用百度地图相关的api。
官网地址:http://lbsyun.baidu.com/

使用百度地图插件,需在打包时填写百度地图ApiKey. 具体申请步骤及流程详见官方地址:
http://lbsyun.baidu.com/index.php?title=iossdk/guide/key

ImagBmap

Android, iOS (5.0.4及以上版本)

标签名 描述 说明 子标签
bmap 地图标签 显示地图视图 覆盖物子标签:overlay
属性名 取值 描述
id String id编码
center String 以逗号分隔的经纬度组成的字符串,默认值北京天安门经纬度:“39.915, 116.404”,逗号前面的是纬度,后面的是经度
zoom Float 地图缩放级别 3~19,默认值12
rotate Float 地图旋转角度
overlook Float 地图俯仰角度
traffic Boolean 设置是否打开交通图层:
true:显示实时交通图
false:不显示实时交通图,默认值
satellite Boolean 设置是否显示卫星图:
true:显示卫星图
false:不显示卫星图,默认值
heatmap Boolean 设置是否显示热力图:
true:显示热力图
false:不显示热力图,默认值
zoomable Boolean 设置是否允许缩放手势:
true:允许缩放,默认值
false:不允许缩放
scrollable Boolean 设置是否允许拖拽手势:
true:允许拖拽,默认值
false:不允许拖拽
rotatable Boolean 设置是否允许旋转手势:
true:允许旋转,默认值
false:不允许旋转
overlookable Boolean Boolean 设置是否允许俯视手势:
true:允许俯视,默认值
false:不允许俯视
compassable Boolean 设置是否允许指南针:
true:允许指南针,默认值
false:不允许指南针
onmapclick Function 点击地图时触发的脚本事件
onmappoiclick Function 点击地图上的poi时触发的脚本事件
onmaplongclick Function 长按地图时触发的脚本事件
onmapdoubleclick Function 双击地图时触发的脚本事件
方法 参数 返回值 描述
add(overlay:Object) overlay:Overlay对象 None 添加一个覆盖物Overlay
remove(overlay:Object) overlay:Overlay对象 None 移除一个覆盖物Overlay
clear() None None 清空所有的覆盖物Overlay
contains(overlay:Object) overlay:Overlay对象 Boolean 判断地图中是否包含某一覆盖物Overlay
requestSuggestion(options:Object) options:相关参数选项,包括:
city:检索城市
keyword:搜索关键字
location:检索位置,字符串格式的经纬度信息,如:“39.915,116.404”
onGetSuggestionResult:在线建议查询回调
None 在线建议查询
searchInCity(options:Object) options:相关参数选项,包括:
city:检索城市
keyword:检索关键字
location:检索位置,字符串格式的经纬度信息,如:“39.915,116.404”,逗号前面的是纬度,后面的是经度
pageCapacity:每页容量,默认为每页10条
pageNum:分页编号,默认为0
radius:检索的半径范围
sortType:搜索结果排序规则,可选,comprehensive(默认):安综合排序; distance:按距离排序
onGetPoiResult:poi查询结果回调
onGetPoiDetailResult:poi详情查询结果回调
None 城市内检索
searchNearby(options:Object) options:相关参数选项,包括:
city:检索城市
keyword:搜索关键字
pageCapacity:设置每页容量,默认为每页10条
pageNum:分页编号,默认为0
onGetPoiResult:poi查询结果回调
onGetPoiDetailResult:poi详情查询结果回调
None 周边检索
searchInBound(options:Object) options:相关参数选项,包括:
bound:poi检索范围,包括东北和西南的两个点的经纬度,用分号;分割
pageCapacity:每页容量,默认为每页10条
pageNum:分页编号,默认为0
onGetPoiResult:poi查询结果回调
onGetPoiDetailResult:poi详情查询结果回调
None 范围内检索
searchBusLine(options:Object) options:相关参数选项,包括:
city:检索城市
keyword:检索关键字
pageCapacity:每页容量,默认为每页10条
pageNum:分页编号,默认为0
onGetPoiResult:公交线路查询结果回调
onGetBusLineResult:公交线路详情查询结果回调
None 公交信息检索,用来获取busLineIDs
searchBusLine(city:String, uid:String) city:检索城市
uid:公交线路的uid
None 公交信息检索,用来查询多条公交线路中的一条具体信息,searchBusLine(city:String, uid:String)也会调用searchBusLine(options:Object)的onGetBusLineResult回调方法
searchTransit(options:Object) options:相关参数选项,包括:
city:检索城市
from:起点地址
to:终点地址
toCity:终点城市,当和起点城市不一样时设置
fromLocation:起点经纬度(字符串格式,用逗号分割如:“39.915,116.404”)
toLocation:终点经纬度(字符串格式,用逗号分割如:“39.915,116.404”)
policy:换乘策略,包括:
EBUS_TIME_FIRST:时间优先,默认值
EBUS_NO_SUBWAY:不含地铁
EBUS_TRANSFER_FIRST:最少换乘
EBUS_WALK_FIRST:最少步行距离
onGetTransitRouteResult:换乘路线结果回调
None 公交线路规划
searchDriving(options:Object) options:相关参数选项,包括:
city:检索城市
from:起点地址
to:终点地址
toCity:终点城市,当和起点城市不一样时设置
fromLocation:起点经纬度(字符串格式,用逗号分割如:“39.915,116.404”)
toLocation:终点经纬度(字符串格式,用逗号分割如:“39.915,116.404”)
policy:驾车路线规划策略,包括:
ECAR_TIME_FIRST:时间优先,默认值
ECAR_AVOID_JAM: 躲避拥堵
ECAR_DIS_FIRST:最短距离
ECAR_FEE_FIRST:较少费用
onGetDrivingRouteResult:驾车路线结果回调
None 驾车线路规划
searchWalking(options:Object) options:相关参数选项,包括:
city:检索城市
from:起点地址
to:终点地址
toCity:终点城市,当和起点城市不一样时设置
fromLocation:起点经纬度(字符串格式,用逗号分割如:“39.915,116.404”)
toLocation:终点经纬度(字符串格式,用逗号分割如:“39.915,116.404”)
onGetWalkingRouteResult:步行路线结果回调
None 步行线路规划
geocode(options:Object) options:相关参数选项,包括:
city:检索城市
address:检索地址
onGetReverseGeoCodeResult:反地理编码查询结果回调函数
None 根据地址查询经纬度
reverseGeoCode(options:Object) options:相关参数选项,包括:
location:经纬度,字符串格式,用逗号分割,如:“39.904965,116.327764”
onGetGeoCodeResult:地理编码查询结果回调函数
None 根据经纬度反向查询地址
requestLocationShareUrl(options:Object) options:相关参数选项,包括:
location:共享点位置坐标,字符串格式,纬度和经度用逗号分割,如:“39.915,116.404”
name:共享点名称
snippet:通过短URL调起客户端时作为附加信息显示在名称下面
text:分享的文字内容
None 分享点的位置坐标
requestPoiDetailShareUrl(options:Object) options:相关参数选项,包括:
uid:欲分享的poi的uid
text:分享的文字内容
None 分享poi详情
startLocation(options:Object) options:相关参数选项,包括:
locationMode:定位模式,取值:
NORMAL: 更新定位数据时不对地图做任何操作,默认值
DIRECTION:定位方向模式,保持定位图标在地图中心
COMPASS:罗盘态,显示定位方向圈,保持定位图标在地图中心
FOLLOWING:跟随态,保持定位图标在地图中心
customMarker:用户自定义定位图标,图片放到res资源目录
enableDirection:是否允许显示方向信息
openGps:是否打开GPS,默认值为true
scanSpan:定位时间间隔,单位毫秒,默认值为10000毫秒
onReceiveLocation:定位结果回调
None 开始定位,获取相应的位置信息,并在地图上展示实时位置信息
stopLocation() None None 停止定位
currentLocation() options:相关参数选项,包括:
onReceiveLocation:拖拽定位实时回调
None 拖拽定位,获取相应的位置信息,并在地图上展示实时位置信息。
每拖动一次定位一次并停止,无停止方法
openBaiduMapNavi(options:Object) options:相关参数选项,包括:
startPoint:起点,必须包含经纬度坐标(调起地图客户端时设置起点无效,以“我的位置”为起点)
startName:导航起点名称
endPoint:终点,必须包含经纬度坐标
endName:导航终点名称
None 调用百度地图导航手机客户端驾车导航
openBaiduMapWalkNavi(options:Object) options:相关参数选项,包括:
startPoint:起点,必须包含经纬度坐标(调起地图客户端时设置起点无效,以“我的位置”为起点)
startName:导航起点名称
endPoint:终点,必须包含经纬度坐标
endName:导航终点名称
None 调用百度地图导航手机客户端步行导航
openBaiduMapRideNavi(options:Object) options:相关参数选项,包括:
startPoint:起点,必须包含经纬度坐标(调起地图客户端时设置起点无效,以“我的位置”为起点)
startName:导航起点名称
endPoint:终点,必须包含经纬度坐标
endName:导航终点名称
None 调用百度地图导航手机客户端骑行导航
convert(point:Array) point:GPS原始坐标,数组格式,如:[39.915291,116.403857] Array 将GPS设备采集的原始GPS坐标转换成百度坐标
getDistance(point1:Array, point2:Array) point1:起点的百度经纬度坐标,数组格式,如:[39.915291,116.403857]
point2:终点的百度经纬度坐标,数组格式,如:[40.056858,116.308194]
Double 计算两点地理距离
isCircleContainsPoint(point:Array, center:Array, radius:double) point: 待判断的经纬度坐标点,数组格式,如:[39.915291,116.403857]
center: 目标圆形的中心点经纬度坐标,数组格式,如:[40.056858,116.308194]
radius: 目标圆形的半径,单位m
Bool 判断点是否在圆内
isPolygonContainsPoint(point:Array, polygon:Array) point: 待判断的经纬度点
polygon: 目标多边形的顶点数组
Bool 判断点是否在多边形内
标签名 描述 type取值 说明
overlay 地图覆盖物 marker:标注覆盖物
dot:圆点覆盖物
arc:弧线覆盖物
circle:圆形覆盖物
polyline:折线覆盖物
polygon:多边形覆盖物
ground:地形图覆盖物
显示地图覆盖物

标注覆盖物

标签

标签名 类型 描述 说明
overlay marker 标注覆盖物 显示标注覆盖物

属性

属性名 取值 描述
type marker 标注覆盖物
point String 标注覆盖物地理坐标,经纬度用逗号分割,如:“39.915, 116.404”
zindex Integer 标注覆盖物的堆叠顺序,zindex大的覆盖物在上面,小的在下面
icon String 标注覆盖物的图标,多个图标用逗号分割(用来展示动画效果)
title String 标注覆盖物的标题
flat Boolean 标注覆盖物是否平贴地图
true:平贴地图,默认值
false:不平贴地图
perspective Boolean 标注覆盖物否开启近大远小效果
true:开启,默认值
false:不开启
period Integer 设置多少帧刷新一次图片资源,Marker动画的间隔时间,值越小动画越快
rotate Float 标注覆盖物旋转角度
draggable Boolean 标注覆盖物是否可以拖拽
true:可以拖拽
false:不可以拖拽,默认值
onclick Function 点击标注覆盖物触发的脚本事件
ondrag Function 拖拽标注覆盖物过程中触发的脚本事件
ondragstart Function 开始拖拽标注覆盖物时触发的脚本事件
ondragend Function 标注覆盖物拖拽结束时触发的脚本事件

圆点覆盖物

标签

标签名 类型 描述 说明
overlay dot 圆点覆盖物 显示圆点覆盖物

属性

属性名 取值 描述
type dot 圆点覆盖物
point String 圆点覆盖物地理坐标,经纬度用逗号分割,如:“39.915, 116.404”
zindex Integer 圆点覆盖物的堆叠顺序,zindex大的覆盖物在上面,小的在下面
color String 圆点覆盖物的颜色
radius Integer 圆点覆盖物的半径

弧线覆盖物

标签

标签名 类型 描述 说明
overlay arc 弧线覆盖物 显示弧线覆盖物

属性

属性名 取值 描述
type arc 弧线覆盖物
point String 弧线覆盖物地理坐标,经纬度用逗号分割,如:“39.97923,116.357428; 39.94923,116.397428; 39.97923,116.437428”
zindex Integer 弧线覆盖物的堆叠顺序,zindex大的覆盖物在上面,小的在下面
color String 弧线颜色
width Integer 弧线线宽

圆形覆盖物

标签

标签名 类型 描述 说明
overlay circle 圆形覆盖物 显示圆形覆盖物

属性

属性名 取值 描述
type circle 圆形覆盖物
point String 圆形覆盖物地理坐标,经纬度用逗号分割,如:“39.915, 116.404”
zindex Integer 圆形覆盖物的堆叠顺序,zindex大的覆盖物在上面,小的在下面
fillColor String 圆形的填充颜色
strokeWidth Integer 圆形边框的宽度
color String 圆形边框的颜色
radius Integer 圆形半径

折线覆盖物

标签

标签名 类型 描述 说明
overlay polyline 折线覆盖物 显示折线覆盖物

属性

属性名 取值 描述
type polyline 折线覆盖物
point String 折线覆盖物地理坐标,多个坐标用分号分割,经纬度用逗号分割,如:“39.97923,116.357428; 39.94923,116.397428; 39.97923, 116.437428”
zindex Integer 折线覆盖物的堆叠顺序,zindex大的覆盖物在上面,小的在下面
color String 折线颜色
width Integer 折线线宽
dotLine Boolean 折线是否虚线
true:是虚线
false:不是虚线,默认值

多边形覆盖物

标签

标签名 类型 描述 说明
overlay polygon 多边形覆盖物 显示多边形覆盖物

属性

属性名 取值 描述
type polygon 多边形覆盖物
point String 多边形覆盖物地理坐标,多个坐标用分号分割,经纬度用逗号分割,如:“39.93923,116.357428; 39.91923,116.327428; 39.89923,116.347428; 39.89923,116.367428; 39.91923,116.387428”
zindex Integer 多边形覆盖物的堆叠顺序,zindex大的覆盖物在上面,小的在下面
fillColor String 多边形的填充颜色
strokeWidth Integer 多边形边框的宽度
color String 圆点覆盖物的颜色

地形图覆盖物

标签

标签名 类型 描述 说明
overlay ground 地形图覆盖物 显示地形图覆盖物

属性

属性名 取值 描述
type ground 地形图覆盖物
point String 地形图覆盖物地理坐标,经纬度用逗号分割,如:“39.915, 116.404”
zindex Integer 地形图覆盖物的堆叠顺序,zindex大的覆盖物在上面,小的在下面
icon String 地形图覆盖物的图标(图片放到res资源目录)
transparency Float 地形图覆盖物透明度

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>普通地图</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content draggable="false">
            <bmap plugin="ImagBmap" center="39.98923,116.397428" zoom="12">
            </bmap>
        </content>
    </page>
</imag>


可以设置center,zoom,rotate,overlook等属性

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>卫星图</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content draggable="false">
            <bmap center="39.915, 116.404" plugin="ImagBmap" zoom="12" satellite="true">
            </bmap>
        </content>
    </page>
</imag>



设置satellite=“true”

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>实时交通图</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content draggable="false">
            <bmap center="39.915,116.404" plugin="ImagBmap" zoom="12" traffic="true">
            </bmap>
        </content>
    </page>
</imag>


设置traffic=“true”

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>城市热力图</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content draggable="false">
            <bmap center="39.915,116.404" plugin="ImagBmap" zoom="12" heatmap="true">
            </bmap>
        </content>
    </page>
</imag>



设置heatmap=“true”

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
        <![CDATA[
            $page.onload = function() {
                var bmap = $('test_bmap');
                bmap.center = '39.915,116.404';
            };
            function toNormal() {
                var bmap = $('test_bmap');
                bmap.traffic = false;
                bmap.satellite = false;
                bmap.heatmap = false;
            }
            
            function toTraffic() {
            	$('test_bmap').zoom = 5;
            	$('test_bmap').traffic = true;
            }
            
            function toHeatmap() {
            	$('test_bmap').heatmap = true;
            }
            
            function toSatellite() {
            	$('test_bmap').satellite = true;
            }
        ]]>
    </script>
    <page>
        <title>
            <center>
                <label>地图类型切换</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content draggable="false">
            <row>
                <button onclick="toNormal();" style="align:center">普通地图</button>
                <button onclick="toSatellite();" style="align:center">卫星图</button>
                <button onclick="toTraffic();" style="align:center">交通图</button>
                <button onclick="toHeatmap();" style="align:center">热力图</button>
            </row>
            <bmap plugin="ImagBmap" id="test_bmap">
            </bmap>
        </content>
    </page>
</imag>


动态设置traffic,heatmap,satellite属性

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
        <![CDATA[
            function zoomBmap() {
                $("test_bmap").zoom = $('zoom_input').value;
            }
            
            function rotateBmap() {
                $("test_bmap").rotate = $('rotate_input').value;
            }
            
            function overlookBmap() {
                $("test_bmap").overlook = $('overlook_input').value;
            }
        ]]>
    </script>
	<page>
		<title>
		    <center>
		        <label>地图操作功能</label>
		    </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
		</title>
        <content draggable="false">
            <list type="group">
                <item>
                    <row>
                        <input id="zoom_input">10</input>
                        <button onclick="zoomBmap()">缩放</button>
                        <input id="rotate_input">90</input>
                        <button onclick="rotateBmap()">旋转</button>
                        <input id="overlook_input">-30</input>
                        <button onclick="overlookBmap()">俯视</button>
                    </row>
                </item>
            </list>
            <bmap id="test_bmap" plugin="ImagBmap" center="39.915,116.404" zoom="12">
            </bmap>
        </content>
	</page> 
 </imag>


动态设置zoom,rotate,overlook属性

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
        <![CDATA[
            $page.onload = function() {
                var bmap = $("test_bmap");
            	bmap.onmapclick = function(point) {
            		hint('onmapclick:' + JSON.stringify(point));
            	};
            	bmap.onmappoiclick = function(poi) {
            		hint('onmappoiclick:' + JSON.stringify(poi));
            	};
            	bmap.onmaplongclick = function(point) {
            		hint('onmaplongclick:' + JSON.stringify(point));
            	};
            	bmap.onmapdoubleclick = function(point) {
            		hint('onmapdoubleclick:' + JSON.stringify(point));
            	};
            }
        ]]>
    </script>
    <page>
        <title>
            <center>
                <label>地图事件</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content draggable="false">
            <bmap id="test_bmap" plugin="ImagBmap" center="39.915, 116.404" zoom="12">
            </bmap>
        </content>
    </page>
</imag>


地图的点击、双击、长按的事件脚本

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    </script>
    <page>
        <title>
            <center>
                <label>标注覆盖物</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content draggable="false">
            <bmap center="39.963175,116.400244" plugin="ImagBmap" zoom="14">
                <overlay type="marker" point="39.952313,116.392390" icon="A" onclick="hint('click A')"/>
                <overlay type="marker" point="39.953109,116.418371" icon="B" onclick="hint('click B')"/>
                <overlay type="marker" point="39.963175,116.400244" icon="head_normal.png,head_pressed.png" onclick="hint('click head')" ondrag="hint('ondrag')" draggable="true"/>
            </bmap>
        </content>
    </page>
</imag>

示例图:


将icon设置为字母A,B,C,D,E,F,G,H,I,J来标注覆盖物,此时将使用系统默认图标。也可以自定义图标,此时将使用资源目录res下的图片。 在icon里设置多个图片,覆盖物将以动画的方式播放,period属性是动画播放时间间隔。 设置draggable=“true”,用手指长按覆盖物后可进行拖拽,ondrag用来响应拖拽事件。

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
        <![CDATA[
            var bmap;
            $page.onload = function() {
                bmap = $("bmap");
            	bmap.onmapclick = function(point) {
            		hint('onmapclick:' + JSON.stringify(point));
            	};
            	bmap.onmappoiclick = function(poi) {
            		hint('onmappoiclick:' + JSON.stringify(poi));
            	};
            	bmap.onmaplongclick = function(point) {
            		hint('onmaplongclick:' + JSON.stringify(point));
            	};
            	bmap.onmapdoubleclick = function(point) {
            		hint('onmapdoubleclick:' + JSON.stringify(point));
            	};	
            
            }
        ]]>
    </script>
    <page>
        <title>
            <center>
                <label>几何图形覆盖物</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content draggable="false">
            <bmap id="bmap" plugin="ImagBmap" center="39.98923,116.397428" zoom="12">
            	<overlay type="dot" point="39.98923,116.397428" color="#0000FF" radius="5"/>                    
                <overlay type="arc" point="39.97923,116.357428; 39.94923,116.397428; 39.97923,116.437428" color="#00FF00" width="2"/>                       
                <overlay type="circle" point="39.90923,116.447428" color="#AA000000" strokeWidth="10" fillColor="#000000FF" radius="2400" lineDash="true"/>                      
                <overlay type="polyline" width="10" color="#AAFF0000" point="39.97923,116.357428; 39.94923,116.397428; 39.97923, 116.437428"/>
                <overlay type="polygon" strokeWidth="2" color="#AA00FF00" fillColor="#AAFFFF00" point="39.93923,116.357428; 39.91923,116.327428; 39.89923,116.347428; 39.89923,116.367428; 39.91923,116.387428"/>
                <overlay type="circle" point="39.93923,116.357428" color="#AAFFFF00" strokeWidth="10" fillColor="#AA00FF00" radius="2400" lineDash="false"/> 
            </bmap>
        </content>
    </page>
</imag>


支持dot(点),arc(弧线),circle(圆),polyline(折线),polygon(多边形)五种几何图形覆盖物

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title>
            <center>
                <label>地形图图层</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content draggable="false">
            <bmap center="39.933375,116.400244" zoom="14" plugin="ImagBmap" rotatable="true" overlookable="true">
                <overlay type="ground" point="39.92235,116.380338;39.947246,116.414977" icon="ground_overlay.png" transparency="0.8"/>
            </bmap>
        </content>
    </page>
</imag>


icon属性的图片来自res资源目录,地形图图层会贴着地形显示

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        $page.onload = function() {
            var xml = '<bmap center="39.98923,116.397428" plugin="ImagBmap" zoom="12">' + '</bmap>'; 
        	var bmap = $C(xml);
        	$('test_content').add(bmap);
        }
    ]]>
    </script>
    <page>
        <title>
            <center>
                <label>动态创建地图</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content id="test_content">
        </content>
    </page>
</imag>
示例图:


通过$C(xml)方法动态创建整个地图

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        function addOverlays() {
            var bmap = $('test_bmap');
             if (!bmap.contains($('dot_overlay'))) {
                var dotOverlay = $C('<bmap-overlay plugin="ImagBmap"><overlay type="dot" id="dot_overlay" point="39.98923,116.397428" color="#0000FF" radius="400"/></bmap-overlay>');
                bmap.add(dotOverlay);
             }
             if (!bmap.contains($('arc_overlay'))) {
                var arcOverlay = $C('<bmap-overlay plugin="ImagBmap"><overlay type="arc" id="arc_overlay" point="39.97923,116.357428; 39.94923,116.397428; 39.97923,116.437428" color="#00FF00" width="2"/></bmap-overlay>');
                bmap.add(arcOverlay);
              }
             if (!bmap.contains($('circle_overlay'))) {
                var circleOverlay = $C('<bmap-overlay plugin="ImagBmap"><overlay type="circle" id="circle_overlay" point="39.90923,116.447428" color="#AA000000" strokeWidth="2" fillColor="#000000FF" radius="1400"/></bmap-overlay>');
                bmap.add(circleOverlay);
              }
        }
        
        function removeOverlay() {
        	$('test_bmap').remove($('arc_overlay'));
        }
        
        function clearOverlays() {
        	$('test_bmap').clear();
        }
    ]]>
    </script>
    <page>
        <title>
            <center>
                <label>动态添加覆盖物</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content id="test_content">
            <list type="group">
                <item>
                    <row>
                        <button onclick="addOverlays();" style="width:60">添加</button>
                        <button onclick="removeOverlay();" style="width:60">删除</button>
                        <button onclick="clearOverlays();" style="width:60">清空</button>
                    </row>
                </item>
            </list>
            <bmap id="test_bmap" plugin="ImagBmap" center="39.98923,116.397428" zoom="12">
            </bmap>
        </content>
    </page>
</imag>
通过$C(xml)方法动态创建整个地图,动态创建overlay需指定插件代码:plugin=“ImagBmap”。

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
        <![CDATA[
            function search() {
                var bmap = $("bmap");
                bmap.requestSuggestion({
                    city: $('city').value,
                    keyword: $('keyword').value,
                    onGetSuggestionResult: function(result) {
                       alert(JSON.stringify(result));
                    }
                });
            }
        ]]>
    </script>
	<page>
		<title>
		    <center>
		        <label>在线建议查询</label>
		    </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
		</title>
        <content draggable="false">
            <list type="group">
                <item>
                    <row>
                        <label>城市:</label>
                        <input type="text" id="city" value="北京"/>
                        <label>关键字:</label>
                        <input type="text" id="keyword" value="餐厅"/> 
                    </row>
                </item>
                <item>
                    <button onclick="search();" style="width:100">搜索</button>
                </item>
            </list>
            <bmap id="bmap" plugin="ImagBmap" center="39.915,116.404" zoom="12">
            </bmap>
        </content>
	</page> 
 </imag>



查询数据参数
city:检索城市
keyword:搜索关键字
location:检索位置,字符串格式的经纬度信息,如:“39.915,116.404”,逗号前面的是纬度,后面的是经度
onGetSuggestionResult:在线建议查询回调

返回对象数据格式:
{

"suggestions": [
  {
    "key": "餐厅",
    "city": "",
    "district": ""
  },
  {
    "key": "港丽餐厅(中关村店)",
    "city": "北京市",
    "district": "海淀区"
  },
  {
    "key": "莫斯科餐厅",
    "city": "北京市",
    "district": "西城区"
  },
  ...
]

}
city:联想词所在城市
district:联想结果所在行政区
key:联想词关键字

查询城市内POI信息。

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
        <![CDATA[
            function search() {
                var bmap = $("bmap");
                bmap.searchInCity({
                    city: $('city').value,
                    keyword: $('keyword').value,
                    pageCapacity:8,
                    onGetPoiResult: function(result) {
                        alert(JSON.stringify(result));
                	},
                    onGetPoiDetailResult: function(result) {
                        alert(JSON.stringify(result));
                	}
                });
            }
        ]]>
    </script>
	<page>
		<title>
		    <center>
		        <label>城市内检索</label>
		    </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
		</title>
        <content draggable="false">
            <list type="group">
                <item>
                    <row>
                        <label>城市:</label>
                        <input type="text" id="city" value="北京"/>
                        <label>关键字:</label>
                        <input type="text" id="keyword" value="餐厅"/> 
                    </row>
                </item>
                <item>
                    <button onclick="search();" style="width:100">搜索</button>
                </item>
            </list>
            <bmap id="bmap" plugin="ImagBmap" center="39.915,116.404" zoom="12">
            </bmap>
        </content>
	</page> 
 </imag>



:!: 注意:城市内检索仅用来查询粗略关键字,精确地址信息可能会查询不到结果,查询精确地址请使用下面的“地理编码检索”。

查询数据参数
city:检索城市
keyword:搜索关键字
pageCapacity:设置每页容量,默认为每页10条
pageNum:分页编号,默认为0
onGetPoiResult:poi查询结果回调
onGetPoiDetailResult:poi详情查询结果回调

onGetPoiResult返回对象数据格式:

{

"error": "NO_ERROR",
"currentPageCapacity": 10,
"currentPageNum": 0,
"totalPageNum": 2007,
"totalPoiNum": 20070

}


参数详解
error:错误代码,其中:

NO_ERROR:正常返回
RESULT_NOT_FOUND:无检索结果
AMBIGUOUS_ROURE_ADDR:检索地址有岐义

currentPageCapacity:单页容量,单页容量可以通过检索参数指定
currentPageNum:当前分页编号
totalPageNum:总分页数
totalPoiNum:POI总数

onGetPoiDetailResult返回对象数据格式:

{

"error": "NO_ERROR",
"address": "朝阳区安苑路与惠新北街交叉口西北角惠新北里3号楼(罗马花园东)",
"checkinNum": 0,
"commentNum": 102,
"detailUrl": "http://api.map.baidu.com/place/detail?uid=28e700f17c143618095cb3c9&output=html&source=placeapi_v2",
"environmentRating": 3.3,
"facilityRating": 0,
"favoriteNum": 0,
"grouponNum": 8,
"hygieneRating": 0,
"latitude": 39.989761,
"longitude": 116.426919,
"name": "正院大宅门(亚运村店)",
"overallRating": 4,
"price": 149,
"serviceRating": 3,
"shopHours": "10:00-22:00",
"tag": "美食;中餐厅",
"tasteRating": 3,
"technologyRating": 0,
"telephone": "010-64952166",
"type": "cater",
"uid": "28e700f17c143618095cb3c9"

}

参数详解:
error:错误代码
address: poi地址
checkinNum:poi签到数量
commentNum:poi评论数量
detailUrl: poi详情 url
facilityRating: poi设施评价
favoriteNum:poi喜欢数量
grouponNum: poi团购数量
hygieneRating: poi卫生评价
imageNum:poi图片数量
latitude:poi纬度
longitude:poi经度
name: poi名称
overallRating:poi综合评价
price:poi价格
serviceRating:poi服务评价
shopHours:poi营业时间
tag:poi标签
tasteRating: poi口味评价
technologyRating: poi技术评价
telephone: poi电话
type:poi类型, “hotel”, “cater”, “life”
uid:poi的 uid

查询周边POI信息。

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
        <![CDATA[
            function search() {
                var bmap = $("bmap");
                bmap.searchNearby({
                    location: $('location').value,
                    keyword: $('keyword').value,
                    radius: $('radius').value,
                    pageCapacity:15,
                    onGetPoiResult: function(result) {
                        alert(JSON.stringify(result));
                	},
                    onGetPoiDetailResult: function(result) {
                        alert(JSON.stringify(result));
                	}
                });
            }
        ]]>
    </script>
	<page>
		<title>
		    <center>
		        <label>周边检索</label>
		    </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
		</title>
        <content draggable="false">
            <list type="group">
                <item>
                    <row>
                        <label>定点:</label>
                        <input id="location">39.915, 116.404</input>
                    </row>
                </item>
                <item>
                    <col>
                        <row>
                            <label>关键字:</label>
                            <input id="keyword">KFC</input>
                            <label>范围(米):</label>
                            <input id="radius">5000</input>
                        </row>
                    </col>
                </item>
                <item>
                    <button onclick="search();" style="width:100">搜索</button>
                </item>
            </list>
            <bmap id="bmap" plugin="ImagBmap" center="39.915,116.404" zoom="12">
            </bmap>
        </content>
	</page> 
 </imag>



:!:注意:周边检索仅用来查询粗略关键字,精确地址信息可能会查询不到结果,查询精确地址请使用下面的“地理编码检索”。

查询数据参数
keyword:检索关键字
location:检索位置,字符串格式的经纬度信息,如:“39.915,116.404”,逗号前面的是纬度,后面的是经度
pageCapacity:每页容量,默认为每页10条
pageNum:分页编号,默认为0
radius:检索的半径范围
sortType:搜索结果排序规则,可选,comprehensive(默认):安综合排序; distance:按距离排序
onGetPoiResult:poi查询结果回调
onGetPoiDetailResult:poi详情查询结果回调

周边检索返回的数据格式和城市内检索相同。

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
        <![CDATA[
            function search() {
                var bmap = $("bmap");
                bmap.searchInBound({
                    keyword: $('keyword').value,
                    bound: $('northeast').value + ';' + $('southwest').value,
                    onGetPoiResult: function(result) {
                        alert(JSON.stringify(result));
                	},
                    onGetPoiDetailResult: function(result) {
                        alert(JSON.stringify(result));
                	}
                });
            }
        ]]>
    </script>
	<page>
		<title>
		    <center>
		        <label>范围内检索</label>
		    </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
		</title>
        <content draggable="false">
            <list type="group">
                <item>
                    <row>
                        <label>范围:</label>
                        <input id="northeast">39.913961,116.401663</input>
                        <input id="southwest">40.917396,117.406529</input>
                    </row>
                </item>
                <item>
                    <col>
                        <row>
                            <label>关键字:</label>
                            <input id="keyword">KFC</input>
                        </row>
                    </col>
                </item>
                <item>
                    <button onclick="search();" style="width:100">搜索</button>
                </item>
            </list>
            <bmap id="bmap" plugin="ImagBmap" center="39.915,116.404" zoom="12">
            </bmap>
        </content>
	</page> 
 </imag>



:!:注意:范围内检索仅用来查询粗略关键字,精确地址信息可能会查询不到结果,查询精确地址请使用下面的“地理编码检索”。

查询数据参数
keyword:检索关键字
bound:poi检索范围,包括东北和西南的两个点的经纬度,用分号;分割
pageCapacity:每页容量,默认为每页10条
pageNum:分页编号,默认为0
onGetPoiResult:poi查询结果回调
onGetPoiDetailResult:poi详情查询结果回调

范围内检索返回的数据格式和城市内检索相同。

查询公交线路的详情信息。

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
        <![CDATA[
            var nextIndex = 1;
            var busLineIDs;
            
            function search() {
                var bmap = $("test_bmap");
                bmap.searchBusLine({
                    city: $('city').value,
                    keyword: $('keyword').value,
                    onGetPoiResult: function(result) {
            			busLineIDs = result.busLineIDs;
                        alert(JSON.stringify(result));
                	},
                    onGetBusLineResult: function(result) {
                        alert(JSON.stringify(result));
                	}
                });
            }
            
            function searchNext() {
            if (busLineIDs != null && busLineIDs.length > 1) {
            		var bmap = $("test_bmap");
                	bmap.searchBusLine($('city').value, busLineIDs[nextIndex]);
           			nextIndex++;
           			if (nextIndex >= busLineIDs.length) {
           				nextIndex = 0;
           			}
           }
            }
        ]]>
    </script>
	<page>
		<title>
		    <center>
		        <label>公交信息检索</label>
		    </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
		</title>
        <content draggable="false">
            <list type="group">
                <item>
                    <row>
                        <label>城市:</label>
                        <input type="text" id="city" value="北京"/>
                        <label>公交:</label>
                        <input type="text" id="keyword" value="119"/> 
                    </row>
                </item>
                <item>
                    <row>
                        <button onclick="search();" style="width:100">搜索</button>
                    	<button onclick="searchNext();" style="width:100">下一条</button>
                    </row>
                </item>
            </list>
            <bmap id="test_bmap" plugin="ImagBmap" center="39.915,116.404" zoom="12">
            </bmap>
        </content>
	</page> 
 </imag>



searchBusLine(options:Object)方法用来获取busLineIDs,searchBusLine(city:String, uid:String)方法用来查询具体的公交线路,都会调到回调函数onGetBusLineResultsearchBusLine(city:String, uid:String)方法通常用来查询多条公交线路中的一条具体信息,searchBusLine(city:String, uid:String)也会调用searchBusLine(options:Object)的onGetBusLineResult回调方法。

searchBusLine(options:Object)查询数据参数:
city:检索城市
keyword:检索关键字
pageCapacity:每页容量,默认为每页10条
pageNum:分页编号,默认为0
onGetPoiResult:公交线路查询结果回调
onGetBusLineResult:公交线路详情查询结果回调

onGetPoiResult返回对象数据格式:

{

"error": "NO_ERROR",
"busLineIDs": [
  "b3a5d3ee29ebc3955ebe867c",
  "1ee462a315f7134fc3f1cf7c"
]

}

参数详解:
error:错误代码,其中:

NO_ERROR:正常返回 
RESULT_NOT_FOUND:无检索结果 
AMBIGUOUS_ROURE_ADDR:检索地址有岐义 

busLineIDs:busLine uid的数组,通过uid来查询公交线路详情

onGetBusLineResult返回对象数据格式:
{

"error": "NO_ERROR",
"busCompany": null,
"busLineName": "119路(地铁芍药居站-安定门)",
"startTime": "05:00:00",
"endTime": "11:00:00",
"stations": [
  {
    "title": "地铁芍药居站",
    "latitude": 39.983921,
    "longitude": 116.442186
  },
  {
    "title": "育慧南路南口",
    "latitude": 39.983292,
    "longitude": 116.438458
  },
  ...
],
"steps": [
  {
    "distance": 0,
    "duration": 0,
    "wayPoints": [
      {
        "latitude": 39.983921,
        "longitude": 116.442186
      },
      {
        "latitude": 39.983644,
        "longitude": 116.441962
      },
      ...
    ]
  }
],
"uid": "b3a5d3ee29ebc3955ebe867c"

}

参数详解
error:错误代码,其中:

NO_ERROR:正常返回
RESULT_NOT_FOUND:无检索结果
AMBIGUOUS_ROURE_ADDR:检索地址有岐义

busCompany:公交公司名称
busLineName:公交线路名称
startTime:公交路线首班车时间
endTime:公交路线末班车时间
monthTicket:公交路线是否有月票
stations:公交车站信息数组
steps:公交路线分段信息
uid:公交线路uid

查询公交线路规划信息。

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        function search() {
            var bmap = $("bmap");
            bmap.searchTransit({
                city: $('city').value,
                toCity: $('tocity').value,
                from: $('from').value,
                to: $('to').value,
                onGetTransitRouteResult: function(result) {
                    alert(JSON.stringify(result));
                }
            });
        }
    ]]>
    </script>
    <page>
        <title>
            <center>
                <label>公交线路规划</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content draggable="false">
            <list type="group">
                <item>
                    <row>
                        <label>起始城市:</label>
                        <input id="city">北京</input>
                        <label>终止城市:</label>
                        <input id="tocity">北京</input>
                    </row>
                </item>
                <item>
                    <row>
                        <label>出发地:</label>
                        <input id="from" width="10" value="上地"/>
                        <label>目的地:</label>
                        <input id="to" value="五道口"></input>
                    </row>
                </item>
                <item>
                    <button onclick="search();" style="width:100">搜索</button>
                </item>
            </list>
            <bmap id="bmap" plugin="ImagBmap" center="39.915,116.404" zoom="12">
            </bmap>
        </content>
    </page>
</imag>



查询数据参数
city:检索城市
from:起点地址
to:终点地址
toCity:终点城市,当和起点城市不一样时设置
fromLocation:起点经纬度(字符串格式,用逗号分割如:“39.915,116.404”)
toLocation:终点经纬度(字符串格式,用逗号分割如:“39.915,116.404”)
policy:换乘策略,包括:

EBUS_TIME_FIRST:时间优先,默认值
EBUS_NO_SUBWAY:不含地铁
EBUS_TRANSFER_FIRST:最少换乘
EBUS_WALK_FIRST:最少步行距离 

onGetTransitRouteResult:换乘路线结果回调

onGetTransitRouteResult返回对象数据格式:

{

"error": "NO_ERROR",
"routeLines": [
  {
    "distance": 4869,
    "duration": 595,
    "title": null,
    "startingTitle": "上地",
    "startingLatitude": 40.038693,
    "startingLongitude": 116.326835,
    "terminalTitle": "五道口",
    "terminalLatitude": 39.998563,
    "terminalLongitude": 116.344433,
    "steps": [
      {
        "stepType": "SUBWAY",
        "distance": 4869,
        "duration": 445,
        "instructions": "乘坐地铁13号线(西直门方向),经过1站,到达五道口站",
        "entraceTitle": "上地站",
        "entraceLatitude": 40.038693,
        "entraceLongitude": 116.326835,
        "exitTitle": "五道口站",
        "exitLatitude": 39.998563,
        "exitLongitude": 116.344433,
        "wayPoints": [
          {
            "latitude": 40.038693,
            "longitude": 116.326835
          },
          {
            "latitude": 40.035364,
            "longitude": 116.328102
          },
          ....
        ],
        "vehicleInfo": {
          "passStationNum": 1,
          "title": "地铁13号线",
          "totalPrice": 0,
          "uid": "7ad85451ff003ccb5d17c3b7",
          "zonePrice": 0
        }
      }
    ]
  }
]

}


参数详解
error:错误代码,其中:

NO_ERROR:正常返回
RESULT_NOT_FOUND:无检索结果
AMBIGUOUS_ROURE_ADDR:检索地址有岐义

routeLines:换乘路线方案数组
routeLines.distance:路线长度
routeLines.duration:路线耗时
routeLines.title:路线名称
routeLines.startingTitle:路线起点信息
routeLines.startingLatitude:路线起点纬度
routeLines.startingLongitude:路线起点经度
routeLines.terminalTitle:路线终点信息
routeLines.terminalLatitude:路线终点经度
routeLines.terminalLongitude:路线终点纬度
routeLines.steps:路线中的所有路段数组
routeLines.steps.stepType:路段类型
routeLines.steps.distance:路段长度
routeLines.steps.duration:路段耗时
routeLines.steps.instructions:路段换乘说明
routeLines.steps.entraceTitle:路段入口标题
routeLines.steps.entraceLatitude:路段入口纬度
routeLines.steps.entraceLongitude:路段入口经度
routeLines.steps.exitTitle:路段出口标题
routeLines.steps.exitLatitude:路段出口纬度
routeLines.steps.exitLongitude:路段出口经度
routeLines.steps.wayPoints:路段所经过的地理坐标数组
routeLines.steps.vehicleInfo:当路段为公交路段或地铁路段时,可以获取交通工具信息
routeLines.steps.vehicleInfo.passStationNum:交通路线的所乘站数
routeLines.steps.vehicleInfo.title:交通路线的名称
routeLines.steps.vehicleInfo.totalPrice:交通路线的全程价格
routeLines.steps.vehicleInfo.uid:交通路线的标识
routeLines.steps.vehicleInfo.zonePrice:交通路线的所乘区间的区间价格

查询驾车线路规划信息。

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        function search() {
            var bmap = $("bmap");
            bmap.searchDriving({
                city: $('city').value,
                toCity:$('tocity').value,
                from: $('from').value,
                to: $('to').value,
                onGetDrivingRouteResult: function(result) {
                    alert(JSON.stringify(result));
                }
            });
        }
    ]]>
    </script>
    <page>
        <title>
            <center>
                <label>驾车线路规划</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content draggable="false">
            <list type="group">
                <item>
                    <row>
                        <label>起始城市:</label>
                        <input id="city">北京</input>
                        <label>终止城市:</label>
                        <input id="tocity">北京</input>
                    </row>
                </item>
                <item>
                    <row>
                        <label>出发地:</label>
                        <input id="from" width="10" value="上地"/>
                        <label>目的地:</label>
                        <input id="to" value="五道口"></input>
                    </row>
                </item>
                <item>
                    <button onclick="search();" style="width:100">搜索</button>
                </item>
            </list>
            <bmap id="bmap" plugin="ImagBmap" center="39.915,116.404" zoom="12">
            </bmap>
        </content>
    </page>
</imag>



查询数据参数
city:检索城市
from:起点地址
to:终点地址
toCity:终点城市,当和起点城市不一样时设置
fromLocation:起点经纬度(字符串格式,用逗号分割如:“39.915,116.404”)
toLocation:终点经纬度(字符串格式,用逗号分割如:“39.915,116.404”)
policy:驾车路线规划策略,包括:

ECAR_TIME_FIRST:时间优先,默认值 
ECAR_AVOID_JAM: 躲避拥堵
ECAR_DIS_FIRST:最短距离
ECAR_FEE_FIRST:较少费用

onGetDrivingRouteResult:驾车路线结果回调

onGetDrivingRouteResult返回对象数据格式:
{

"error": "NO_ERROR",
"routeLines": [
  {
    "supportTraffic": true,
    "distance": 6545,
    "duration": 1004,
    "title": null,
    "startingTitle": "上地",
    "startingLatitude": 40.041379,
    "startingLongitude": 116.322308,
    "terminalTitle": "五道口",
    "terminalLatitude": 39.998404,
    "terminalLongitude": 116.34402,
    "steps": [
      {
        "direction": 150,
        "distance": 646,
        "duration": 91,
        "instructions": "从起点向正南方向出发,沿上地东路行驶650米,右转进入上地南路",
        "entraceTitle": null,
        "entraceLatitude": 40.041379,
        "entraceLongitude": 116.322308,
        "entraceInstructions": "从起点向正南方向出发 - 400米",
        "exitTitle": null,
        "exitLatitude": 40.035689,
        "exitLongitude": 116.32405,
        "exitInstructions": "右转进入上地南路 - 400米",
        "numTurns": 3,
        "wayPoints": [
          {
            "latitude": 40.041379,
            "longitude": 116.322308
          },
          {
            "latitude": 40.041275,
            "longitude": 116.322344
          },
          ...
        ]
      }
    ],
    "wayPoints": []
  }
]

}

参数详解
error:错误代码,其中:

NO_ERROR:正常返回
RESULT_NOT_FOUND:无检索结果
AMBIGUOUS_ROURE_ADDR:检索地址有岐义

routeLines:规划路线方案数组
routeLines.supportTraffic:路线所在区域是否含有交通流量信息
routeLines.distance:路线长度
routeLines.duration:路线耗时
routeLines.title:路线名称
routeLines.startingTitle:路线起点信息
routeLines.startingLatitude:路线起点纬度
routeLines.startingLongitude:路线起点经度
routeLines.terminalTitle:路线终点信息
routeLines.terminalLatitude:路线终点经度
routeLines.terminalLongitude:路线终点纬度
routeLines.steps:路线中的所有路段数组
routeLines.steps.direction:路段起点方向值
routeLines.steps.distance:路段长度
routeLines.steps.duration:路段耗时
routeLines.steps.instructions:路段总体指示信息
routeLines.steps.numTurns:路段需要转弯数
routeLines.steps.entraceTitle:路段入口标题
routeLines.steps.entraceLatitude:路段入口纬度
routeLines.steps.entraceLongitude:路段入口经度
routeLines.steps.exitTitle:路段出口标题
routeLines.steps.exitLatitude:路段出口纬度
routeLines.steps.exitLongitude:路段出口经度
routeLines.steps.wayPoints:路段所经过的地理坐标数组

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        function search() {
            var bmap = $("bmap");
            bmap.searchWalking({
                city: $('city').value,
                toCity: $('tocity').value,
                from: $('from').value,
                to: $('to').value,
                onGetWalkingRouteResult: function(result) {
                    alert(JSON.stringify(result));
                }
            });
        }
    ]]>
    </script>
    <page>
        <title>
            <center>
                <label>步行线路规划</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content draggable="false">
            <list type="group">
                <item>
                    <row>
                        <label>起始城市:</label>
                        <input id="city">北京</input>
                        <label>终止城市:</label>
                        <input id="tocity">北京</input>
                    </row>
                </item>
                <item>
                    <row>
                        <label>出发地:</label>
                        <input id="from" width="10" value="上地地铁站"/>
                        <label>目的地:</label>
                        <input id="to" value="五道口地铁站"></input>
                    </row>
                </item>
                <item>
                    <button onclick="search();" style="width:100">搜索</button>
                </item>
            </list>
            <bmap id="bmap" plugin="ImagBmap" center="39.915,116.404" zoom="12">
            </bmap>
        </content>
    </page>
</imag>



查询数据参数
city:检索城市
from:起点地址
to:终点地址
toCity:终点城市,当和起点城市不一样时设置
fromLocation:起点经纬度(字符串格式,用逗号分割如:“39.915,116.404”)
toLocation:终点经纬度(字符串格式,用逗号分割如:“39.915,116.404”)
onGetWalkingRouteResult:步行路线结果回调

onGetWalkingRouteResult返回对象数据格式:

{

"error": "NO_ERROR",
"routeLines": [
  {
    "distance": 6249,
    "duration": 6242,
    "title": null,
    "startingTitle": "上地地铁站",
    "startingLatitude": 40.038306,
    "startingLongitude": 116.326449,
    "terminalTitle": "五道口地铁站",
    "terminalLatitude": 39.998528,
    "terminalLongitude": 116.344433,
    "steps": [
      {
        "direction": 0,
        "distance": 162,
        "duration": 129,
        "instructions": "从起点向正北方向出发,走160米,向右前方转",
        "entraceTitle": null,
        "entraceLatitude": 40.038306,
        "entraceLongitude": 116.326449,
        "entraceInstructions": "从起点向正北方向出发 - 160米",
        "exitTitle": null,
        "exitLatitude": 40.036953,
        "exitLongitude": 116.327096,
        "exitInstructions": "向右前方转 - 10米",
        "wayPoints": [
          {
            "latitude": 40.038306,
            "longitude": 116.326449
          },
          {
            "latitude": 40.038306,
            "longitude": 116.326449
          },
          ...
        ]
      },
      ...
    ]
  }
]

}

参数详解
error:错误代码,其中:

NO_ERROR:正常返回
RESULT_NOT_FOUND:无检索结果
AMBIGUOUS_ROURE_ADDR:检索地址有岐义

routeLines:步行规划路线数组
routeLines.distance:路线长度
routeLines.duration:路线耗时
routeLines.title:路线名称
routeLines.startingTitle:路线起点信息
routeLines.startingLatitude:路线起点纬度
routeLines.startingLongitude:路线起点经度
routeLines.terminalTitle:路线终点信息
routeLines.terminalLatitude:路线终点经度
routeLines.terminalLongitude:路线终点纬度
routeLines.steps:路线中的所有路段数组
routeLines.steps.direction:路段起点方向值
routeLines.steps.distance:路段长度
routeLines.steps.duration:路段耗时
routeLines.steps.instructions:路段总体指示信息
routeLines.steps.entraceTitle:路段入口标题
routeLines.steps.entraceLatitude:路段入口纬度
routeLines.steps.entraceLongitude:路段入口经度
routeLines.steps.entraceInstructions:路段入口提示信息
routeLines.steps.exitTitle:路段出口标题
routeLines.steps.exitLatitude:路段出口纬度
routeLines.steps.exitLongitude:路段出口经度
routeLines.steps.exitInstructions:路段出口指示信息
routeLines.steps.wayPoints:路段所经过的地理坐标数组

查询地理编码信息,geocode()是根据地址查询经纬度,reverseGeoCode()是根据经纬度反向查询地址。

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
        <![CDATA[
            function searchGeocode() {
                var bmap = $("bmap");
                bmap.geocode({
                    city: $('city').value,
                    address: $('address').value,
                    onGetGeoCodeResult: function(result) {
                    	alert(JSON.stringify(result));
                	}
                });
            }
            
            function searchReverseGeoCode() {
                var bmap = $("bmap");
                bmap.reverseGeoCode({
                    location: $('lat').value + ',' + $('lon').value,
                    onGetReverseGeoCodeResult: function(result) {
                    	alert(JSON.stringify(result));
                	}
                });
            }
        ]]>
    </script>
	<page>
		<title>
		    <center>
		        <label>地理编码检索</label>
		    </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
		</title>
        <content draggable="false">
            <list type="group">
                <item>
                    <row>
                        <label>城市:</label>
                        <input type="text" id="city" value="北京"/>
                        <label>地址:</label>
                        <input type="text" id="address" value="复兴门内大街101号"/> 
                        <button onclick="searchGeocode();" style="width:60">搜索</button>
                    </row>
                </item>
                <item>
                    <row>
                        <label>经纬度:</label>
                        <input type="text" id="lat" value="39.904965"/> 
                        <input type="text" id="lon" value="116.327764"/> 
                        <button onclick="searchReverseGeoCode();" style="width:60">搜索</button>
                    </row>
                </item>
            </list>
            <bmap id="bmap" plugin="ImagBmap" center="39.915,116.404" zoom="12">
            </bmap>
        </content>
	</page> 
 </imag>

geocode示例图:



geocode()查询数据参数
location:经纬度,字符串格式,用逗号分割,如:“39.904965,116.327764”
onGetGeoCodeResult:地理编码查询结果回调函数

onGetGeoCodeResult返回对象数据格式:

{

"error": "NO_ERROR",
"address": "复兴门内大街101号",
"latitude": 39.913645,
"longitude": 116.364465

}

参数详解
error:错误代码,其中:

NO_ERROR:正常返回
RESULT_NOT_FOUND:无检索结果

address:地址信息
latitude:位置纬度
longitude:位置经度

reverseGeoCode示例图:



reverseGeoCode()查询数据参数:
city:检索城市
address:检索地址
onGetReverseGeoCodeResult:反地理编码查询结果回调函数

onGetReverseGeoCodeResult返回对象数据格式:

{

"error": "NO_ERROR",
"address": "北京市海淀区羊坊店路17-3号",
"addressDetail": {
  "city": "北京市",
  "district": "海淀区",
  "province": "北京市",
  "street": "羊坊店路",
  "streetNumber": "17-3号"
},
"businessCircle": "西客站,公主坟,万寿路",
"latitude": 39.904963,
"longitude": 116.32776,
"poiInfos": [
  {
    "address": "北京市丰台区莲花池东路",
    "city": null,
    "hasCaterDetails": false,
    "isPano": false,
    "latitude": 39.901711,
    "longitude": 116.327868,
    "name": "北京西站",
    "phoneNum": "",
    "postCode": "",
    "uid": "e1bfdd9c943c3796f32d8389",
    "type": 0
  },
  ...
]

}

参数详解
error:错误代码,其中:

NO_ERROR:正常返回
RESULT_NOT_FOUND:无检索结果

addres:简要地址信息
addressDetail:层次化地址信息
addressDetail.city:城市名称
addressDetail.district:区县名称
addressDetail.province:省份名称
addressDetail.street:街道名称
addressDetail.streetNumber:门牌号码
businessCircle:位置所属商圈名称
latitude:位置坐标纬度
longitude:位置坐标经度
poiInfos:位置附近的POI信息数组
poiInfos.address:poi地址信息
poiInfos.city:poi所在城市
poiInfos.hasCaterDetails:poi点是否有美食类详情页面
poiInfos.isPano:poi点附近是否有街景,可使用uid检索全景组件的全景数据
poiInfos.latitude:poi坐标纬度, 当ePoiType为2或4时,pt为空
poiInfos.longitude:poi坐标经度, 当ePoiType为2或4时,pt为空
poiInfos.name:poi名称
poiInfos.phoneNum:poi电话信息
poiInfos.postCode:poi邮编
poiInfos.type:poi类型,0:普通点,1:公交站,2:公交线路,3:地铁站,4:地铁线路,
poiInfos.uid:poi id

短串分享是指,用户搜索查询后得到的每一个地理位置结果将会对应一条短串(短链接),用户可以通过短信、邮件或第三方分享组件(如微博、微信等)把短串分享给其他用户从而实现地理位置信息的分享。当其他用户收到分享的短串后,点击短串即可打开手机上的百度地图客户端或者手机浏览器进行查看。 例如,用户搜索“百度大厦”后通过短信使用短串分享功能把该地点分享给好友,好友点击短信中的短串“http://j.map.baidu.com/BkmBk” 后可以调起百度地图客户端或者手机浏览器查看“百度大厦”的地理位置信息。

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
        <![CDATA[
            function searchLocationShare() {
                var bmap = $("bmap");
                bmap.searchInCity({
                    city: $('city').value,
                    keyword: $('keyword').value,
                    onGetPoiResult: function(result) {
                	},
                    onGetPoiDetailResult: function(result) {
                        bmap.requestLocationShareUrl({
                            name: result.name,
                            snippet: '测试分享点',
                            location: result.latitude + ',' + result.longitude,
                           	text: '您的朋友通过百度地图SDK与您分享一个位置:' + result.address
                        });
                	}
                });
            }
            
            function searchPoiDetailShare() {
                var bmap = $("bmap");
                bmap.searchInCity({
                    city: $('city').value,
                    keyword: $('keyword').value,
                    onGetPoiResult: function(result) {
                	},
                    onGetPoiDetailResult: function(result) {
                        bmap.requestPoiDetailShareUrl({
                            uid: result.uid,
                            text: '您的朋友通过百度地图SDK与您分享一个位置:' + result.address
                        });
                	}
                });
            }
        ]]>
    </script>
	<page>
		<title>
		    <center>
		        <label>短串分享</label>
		    </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
		</title>
        <content draggable="false">
            <list type="group">
                <item>
                    <row>
                        <label>城市:</label>
                        <input type="text" id="city" value="北京"/>
                        <label>关键字:</label>
                        <input type="text" id="keyword" value="餐厅"/> 
                    </row>
                </item>
                <item>
                    <row>
                        <button onclick="searchLocationShare();" style="width:100">位置信息分享</button>
                        <button onclick="searchPoiDetailShare();" style="width:100">poi详情分享</button>
                    </row>
                </item>
            </list>
            <bmap id="bmap" plugin="ImagBmap" center="39.915,116.404" zoom="12">
            </bmap>
        </content>
	</page> 
 </imag>

短串分享示例图:






requestLocationShareUrl()查询数据参数:
location:共享点位置坐标,字符串格式,纬度和经度用逗号分割,如:“39.915,116.404”
name:共享点名称
snippet:通过短URL调起客户端时作为附加信息显示在名称下面
text:分享的文字内容

requestPoiDetailShareUrl()查询数据参数:
uid:欲分享的poi的uid
text:分享的文字内容

获取相应的位置信息,并在地图上展示实时位置信息。startLocation()开始定位,stopLocation()停止定位。

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
        <![CDATA[
            var bmap;
            $page.onload = function() {
                bmap = $("bmap");
                bmap.startLocation({
           		    locationMode:'DIRECTION',
            		onReceiveLocation: function(location) {                    	
            			alert(JSON.stringify(location));
            		}
            	});
            }
            function stopLocation() {
            	$("bmap").stopLocation();
            }
        ]]>
    </script>
	<page>
		<title>
		    <center>
		        <label>使用定位</label>
		    </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
		</title>
        <content draggable="false">
            <list type="group">
                <item accessory="indicator" onclick="stopLocation()">
                    <label>停止定位</label>
                </item>     
            </list>
            <bmap id="bmap" plugin="ImagBmap" center="39.915,116.404" zoom="14">
            </bmap>
        </content>
	</page> 
 </imag>
示例图:

查询数据参数:
locationMode:定位模式,取值:

NORMAL: 更新定位数据时不对地图做任何操作,默认值
DIRECTION:定位方向模式,保持定位图标在地图中心
COMPASS:罗盘态,显示定位方向圈,保持定位图标在地图中心
FOLLOWING:跟随态,保持定位图标在地图中心

customMarker:用户自定义定位图标,图片放到res资源目录
enableDirection:是否允许显示方向信息
openGps:是否打开GPS,默认值为true
scanSpan:定位时间间隔,单位毫秒,默认值为10000毫秒
onReceiveLocation:定位结果回调

拖拽定位,获取相应的位置信息,并在地图上展示实时位置信息。 每拖动一次定位一次并停止,无停止方法

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
        <![CDATA[
            var bmap;
            $page.onload = function() {
                bmap = $("bmap");
                bmap.currentLocation({
                    onReceiveLocation: function(location) {
            		alert(JSON.stringify(location));
                    }
                });
            }
        ]]>
    </script>
    <page>
        <title>
            <center>
                <label>拖拽定位</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content draggable="false">
            <bmap id="bmap" plugin="ImagBmap" center="39.915,116.404" zoom="14">
            </bmap>
        </content>
    </page>
 </imag>

查询数据参数:
onReceiveLocation:拖拽定位实时回调

onReceiveLocation返回对象数据格式同普通定位

示例图:



<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
        <![CDATA[
            function startNavi() {
                var bmap = $('bmap');
                bmap.openBaiduMapNavi({
                    startPoint: '39.915291,116.403857',
                    startName: '天安门',
                    endPoint: '40.056858,116.308194',
                    endName: '百度大厦'
                });
            }
            
            function startWalkNavi() {
                var bmap = $('bmap');
                bmap.openBaiduMapWalkNavi({
                    startPoint: '39.915291,116.403857',
                    startName: '天安门',
                    endPoint: '40.056858,116.308194',
                    endName: '百度大厦'
                });
            }
            
            function startRideNavi() {
                var bmap = $('bmap');
                bmap.openBaiduMapRideNavi({
                    startPoint: '39.915291,116.403857',
                    startName: '天安门',
                    endPoint: '40.056858,116.308194',
                    endName: '百度大厦'
                });
            }
        ]]>
    </script>
    <page>
        <title>
            <center>
                <label>调启百度导航</label>
            </center>
            <right>
                <button style="width:60" onclick="$page.source()">源码</button>
            </right>
        </title>
        <content draggable="false">
            <list type="group">
                <item accessory="indicator" onclick="startNavi();">
                    <label>调启百度驾车导航</label>
                </item>
            </list>
            <list type="group">
                <item accessory="indicator" onclick="startWalkNavi();">
                    <label>调启百度步行导航</label>
                </item>
            </list>
            <list type="group">
                <item accessory="indicator" onclick="startRideNavi();">
                    <label>调启百度骑行导航</label>
                </item>
            </list>
            <bmap id="bmap" plugin="ImagBmap">
            </bmap>
        </content>
    </page>
</imag>

- 调启百度驾车导航

示例图

- 调启百度步行导航

示例图

- 调启百度骑行导航

示例图

● 坐标转换

convert(point:Array)方法, 将GPS设备采集的原始GPS坐标转换成百度坐标

代码示例:

       function convert() {
             var bmap = $('bmap');
             var result = bmap.convert([39.915291,116.403857]);
             alert('Convert: ' + JSON.stringify(result));
       }

● 计算两点地理距离

getDistance(point1:Array, point2:Array)方法,计算两点地理距离

代码示例:

function getDistance() {
                var bmap = $('bmap');
            	var distance = bmap.getDistance([39.915,116.404], [39.910,116.400]);
           		alert('Distance: ' + distance);
            }

● 判断点是否在圆形内

isCircleContainsPoint(point:Array, center:Array, radius:double), 判断点是否在圆内

代码示例:

function isCircleContainsPoint() {
                var bmap = $('bmap');
            	var result = bmap.isCircleContainsPoint([39.915, 116.404], [39.915, 116.404], 500);
           		alert('isCircleContainsPoint: ' + result);
            }

● 判断点是否在多边形内

isPolygonContainsPoint(point:Array, polygon:Array), 判断点是否在多边形内

代码示例:

function isPolygonContainsPoint() {
                var bmap = $('bmap');
                var result = bmap.isPolygonContainsPoint([39.914, 116.400], [[39.910, 116.395], [39.914, 116.394], [39.914, 116.402], [39.913, 116.410], [39.910, 116.395]]);
           		alert('isPolygonContainsPoint: ' + result);
            }

  • plugin/imagbmap.txt
  • 最后更改: 2018/12/06 15:56
  • 由 menghao