maps常见问题我要提意见
Maps模块管理地图控件,用于在web页面中显示地图控件,提供各种接口操作地图控件,如添加标点、路线等。通过plus.maps可获取地图管理对象。
方法:
- openSysMap: 调用系统第三方程序进行导航
- create: 创建Map对象
- getMapById: 查找已经创建的Map对象
对象:
- Map: 地图控件对象
- MapStyles: 地图控件对象的参数
- GeocodeOptions: 地理编码转换的参数
- CoordinateConvertOptions: 地图坐标转换的参数
- Point: Point对象用于表示地图元素的坐标
- Bounds: 地理区域
- MapType: 地图视图类型
- Overlay: 地图覆盖物基类对象
- Marker: 地图上显示的标点对象
- Bubble: 地图上显示的气泡对象
- Circle: 地图上显示的圆圈对象
- Polyline: 地图上显示的折线对象
- Polygon: 地图上显示的多边形对象
- Search: 地图检索对象
- SearchPolicy: 检索策略类型
- SearchPoiResult: 保存位置检索、周边检索和范围检索返回的结果
- SearchRouteResult: 保存位置检索、周边检索和范围检索返回的结果
- Position: 检索结果的位置点
- Route: 地图中的路线对象
回调方法:
- GeocodeCallback: 地理编码转换成功的回调函数
- CoordinateConvertCallback: 坐标转换成功的回调函数
- DistanceCalculateCallback: 距离计算成功的回调函数
- AreaCalculateCallback: 地理区域面积计算成功的回调函数
- UserLocationCallback: 获取用户当前位置信息成功回调
- ClickEventHandler: 用户点击地图回调事件
- StatusChangedEventHandler: 地图状态变化回调事件
- OverlayClickEventHandler: 用户点击地图覆盖物回调事件
- OverlayDragEventHandler: 用户拖拽覆盖物回调事件
- PoiSearchCallback: 兴趣点检索完成事件
- RouteSearchCallback: 线路检索完成事件
- SuccessCallback: 地图操作成功回调函数
- ErrorCallback: 地图操作失败的回调函数
权限:
permissions
{
// ...
"permissions":{
// ...
"Maps": {
"description": "地图"
}
}
}
openSysMap
调用系统第三方程序进行导航
plus.maps.openSysMap( dst, des, src );
参数:
- dst: ( Point ) 必选 导航目的地坐标 要求使用WGS-84坐标系值,即GPS获取的值。
- des: ( String ) 必选 导航目的地描述 要求使用WGS-84坐标系,即GPS获取的值。
- src: ( Point ) 必选 导航起始地描述
返回值:
void : 无
示例:
// 设置目标位置坐标点和其实位置坐标点
var dst = new plus.maps.Point(116.39131928,39.90793074); // 天安门
var src = new plus.maps.Point(116.335,39.966); // 大钟寺
// 调用系统地图显示
plus.maps.openSysMap( dst, "天安门", src );
create
创建Map对象
Map plus.maps.create(id, styles);
说明:
调用此方法创建后并不会显示,需要调用Webview窗口的append方法将其添加到Webview窗口后才能显示。 注意:此时需要通过styles参数的top/left/width/height属性设置控件的位置及大小。
参数:
- id: ( String ) 必选 地图控件对象的全局标识 可用于通过plus.maps.getMapById()方法查找已经创建的地图控件对象。
- styles: ( MapStyles ) 可选 地图控件的显示参数 设置Map控件的位置及大小等。
返回值:
Map : Map地图控件对象
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var map = null;
// 创建地图控件
function createMap() {
if(!map){
map = plus.maps.create('map', {
top:'100px',
left:'0px',
width: '100%',
height: '200px',
position: 'static'
});
plus.webview.currentWebview().append(map);
}
}
</script>
<style type="text/css">
*{
-webkit-user-select: none;
}
html,body{
margin: 0px;
padding: 0px;
height: 100%;
}
</style>
</head>
<body>
<button onclick="createMap()">创建地图控件</button>
</body>
</html>
getMapById
查找已经创建的Map对象
Map plus.maps.getMapById(id);
说明:
调用此方法查找指定id的Map对象,如果不存在则返回null。
参数:
- id: ( String ) 必选 Map对象的全局标识 如果存在多个相同标识的Map对象,则返回第一个查找到的Map对象。 如果不存在指定标识的Map对象,则返回null。
返回值:
Map : Map地图控件对象
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var map = null;
// 创建地图控件
function createMap() {
if(!map){
map = plus.maps.create('map', {
top:'100px',
left:'0px',
width: '100%',
height: '200px',
position: 'static'
});
plus.webview.currentWebview().append(map);
}
}
// 查找地图控件
function findMap() {
var b = plus.maps.getMapById('map');
if(b){
console.log('find success!');
alert('success');
} else {
console.log('find failed!');
alert('failed');
}
}
</script>
<style type="text/css">
*{
-webkit-user-select: none;
}
html,body{
margin: 0px;
padding: 0px;
height: 100%;
}
</style>
</head>
<body>
<button onclick="createMap()">创建地图控件</button>
<br/>
<button onclick="findMap()">查找地图控件</button>
</body>
</html>
Map
地图控件对象
构造:
- Map(domId, styles): 创建Map对象
方法:
- calculateArea: 静态方法,计算面积
- calculateDistance: 静态方法,计算距离
- convertCoordinates: 静态方法,坐标转换
- geocode: 静态方法,地理编码
- reverseGeocode: 静态方法,反向地理编码
- addOverlay: 向地图中添加覆盖物
- centerAndZoom: 设置地图初始中心点和缩放级别
- clearOverlays: 清除地图中所有覆盖物对象
- close: 关闭地图控件
- getBounds: 获取当前地图可视范围的地理区域
- getCenter: 获取地图中心点位置
- getCurrentCenter: 获取当前地图显示的地图中心点位置
- getMapType: 获取地图的显示类型
- getUserLocation: 获取用户的当前位置信息
- getZoom: 获取地图的缩放级别
- hide: 隐藏地图控件
- isShowUserLocation: 获取是否显示用户位置
- isShowZoomControls: 获取是否显示地图内置缩放控件
- isTraffic: 获取是否打开地图交通信息图层
- removeOverlay: 从地图中删除覆盖物对象
- reset: 重置地图
- resize: 重设地图控件大小
- setCenter: 设置地图的中心点
- setMapType: 设置地图的视图类型
- setStyles: 设置地图控件的配置参数
- setTraffic: 是否打开地图交通信息图层
- setZoom: 设置地图的缩放级别
- show: 显示地图控件
- showUserLocation: 显示用户位置
- showZoomControls: 设置是否显示地图内置缩放控件
事件:
- onclick: 用户点击地图事件
- onstatuschanged: 地图状态改变事件
Map(domId, styles)
创建Map对象
var ptObj = new plus.maps.Map(id, styles);
说明:
创建Map地图控件对象,并指定其在Webview窗口中关联div或object标签的id号。 此时styles参数中的left/top/width/height属性值被忽略,通过DOM标签来确定Map对象的位置及大小。
参数:
- domId: ( String ) 必选 关联到Webview中DOM节点的标识 系统将查找到此id的DOM节点,并将Map地图控件对象的位置和大小与其保持一致。
- styles: ( MapStyles ) 可选 地图控件的显示参数
返回值:
Map : Map地图控件对象
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready", plusReady, false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded", function(){
em=document.getElementById("map");
plusReady();
},false);
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 0px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
<div id="map">地图加载中...</div>
</body>
</html>
calculateArea
静态方法,计算面积
void plus.maps.Map.calculateArea( bounds, successCallback, errorCallback );
说明:
计算指定地理区域的面积,单位为平方米。 注:此功能仅百度地图支持,高德地图暂不支持此功能。
参数:
- bounds: ( Bounds ) 必选 要计算的地理区域
- successCallback: ( AreaCalculateCallback ) 可选 计算地理区域面积成功回调 地理区域面积计算成功时触发,并返回计算的面积值。
- errorCallback: ( ErrorCallback ) 可选 计算面积失败回调 地理区域面积计算失败时触发,并返回错误信息。
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 获取当前地图显示的地理区域面积
function calculateArea(){
var bounds = map.getBounds();
plus.maps.Map.calculateArea( bounds, function(event){
var area = event.area; // 计算后的面积值
alert("Area:"+area);
}, function(e){
alert("Failed:"+JSON.stringify(e));
} );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
计算面积<br/>
<button onclick="calculateArea()">获取地理区域面积</button>
<div id="map">地图加载中...</div>
</body>
</html>
calculateDistance
静态方法,计算距离
void plus.maps.Map.calculateDistance( pointStart, pointEnd, successCallback, errorCallback );
说明:
计算从pointStart坐标点到pointEnd坐标的实际直线距离,单位为米(m)。
参数:
- pointStart: ( Point ) 必选 起点的坐标
- pointEnd: ( Point ) 可选 终点的坐标
- successCallback: ( DistanceCalculateCallback ) 可选 计算距离成功回调 距离计算成功时触发,并返回计算的距离值。
- errorCallback: ( ErrorCallback ) 可选 计算距离失败回调 距离计算失败时触发,并返回错误信息。
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
var point1 = new plus.maps.Point(116.351442,39.972614);
var point2 = new plus.maps.Point(116.340788,39.973319)
plus.maps.Map.calculateDistance(point1,point2,function(event){
var distance = event.distance; // 转换后的距离值
alert("Distance:"+distance);
},function(e){
alert("Failed:"+JSON.stringify(e));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
计算距离<br/>
</body>
</html>
convertCoordinates
静态方法,坐标转换
void plus.maps.Map.convertCoordinates( point, options, successCallback, errorCallback );
说明:
将第三方坐标系坐标转换成当前地图的坐标系坐标。 转换成功通过successCallback返回,转换失败则通过errorCallback返回。
参数:
- point: ( Point ) 必选 要转换的坐标
- options: ( CoordinateConvertOptions ) 可选 坐标转换的参数
- successCallback: ( CoordinateConvertCallback ) 可选 坐标转换成功回调 坐标转换成功时触发,并返回转后的坐标值。
- errorCallback: ( ErrorCallback ) 可选 坐标转换失败回调 坐标转换失败时触发,并返回错误信息。
返回值:
void : 无
平台支持:
- Android – 2.3+ (支持) : 仅百度地图支持此功能。
- iOS – 5.1+ (支持) : 仅百度地图支持此功能。
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
var point = new plus.maps.Point(116.3447905236,39.9663258208);
plus.maps.Map.convertCoordinates(point,{},function(event){
var point = event.coord; // 转换后的坐标值
var coordType = event.coordType; // 转换后的坐标系类型
alert("Success:"+JSON.stringify(event));
},function(e){
alert("Failed:"+JSON.stringify(e));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
坐标转换<br/>
</body>
</html>
geocode
静态方法,地理编码
void plus.maps.Map.geocode( address, options, successCallback, errorCallback );
说明:
将地理位置信息转换为坐标点。 转换成功通过successCallback返回,转换失败则通过errorCallback返回。
参数:
- address: ( String ) 必选 要转换的地理位置信息 越详细的地址信息越容易转换,如XX路XX号XX大厦。
- options: ( GeocodeOptions ) 可选 地理编码的参数
- successCallback: ( GeocodeCallback ) 可选 地理编码转换成功回调 地理编码转换成功时触发,并返回转换后的坐标信息。
- errorCallback: ( ErrorCallback ) 可选 地理编码转换失败回调 地理编码转换失败时触发,并返回错误信息。
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
plus.maps.Map.geocode("海淀区大钟寺地铁站",{city:"北京"},function(event){
var address = event.address; // 转换后的地理位置
var point = event.coord; // 转换后的坐标信息
var coordType = event.coordType; // 转换后的坐标系类型
alert("Coord:"+JSON.stringify(point));
},function(e){
alert("Failed:"+JSON.stringify(e));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
地理编码<br/>
</body>
</html>
reverseGeocode
静态方法,反向地理编码
void plus.maps.Map.reverseGeocode( point, options, successCallback, errorCallback );
说明:
将坐标点转换为地理位置信息。 转换成功通过successCallback返回,转换失败则通过errorCallback返回。
参数:
- point: ( Point ) 必选 要转换的坐标
- options: ( GeocodeOptions ) 可选 地理编码的参数
- successCallback: ( GeocodeCallback ) 可选 反向地理编码转换成功回调 反向地理编码转换成功时触发,并返回转换后的地址位置信息。
- errorCallback: ( ErrorCallback ) 可选 反向地理编码转换失败回调 反向地理编码转换失败时触发,并返回错误信息。
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
var point = new plus.maps.Point(116.347496,39.970191);
plus.maps.Map.reverseGeocode(point,{},function(event){
var address = event.address; // 转换后的地理位置
var point = event.coord; // 转换后的坐标信息
var coordType = event.coordType; // 转换后的坐标系类型
alert("Address:"+address);
},function(e){
alert("Failed:"+JSON.stringify(e));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
反向地理编码<br/>
</body>
</html>
addOverlay
向地图中添加覆盖物
Boolean mapObj.addOverlay( overlay );
说明:
此方法用于向地图中添加覆盖物。 支持各种从maps.Overlay对象继承的各种覆盖物对象; 如果添加不支持的对象则直接返回false; 同一覆盖物对象只能添加到地图中一次,已在地图中的覆盖物再次添加时则返回false。
参数:
- overlay: ( Overlay ) 必选 在地图中要添加覆盖物
返回值:
Boolean : 添加成功返回true,失败返回false。
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 添加标点
var marker=null;
function addMarker(){
if(marker){return;}
marker=new plus.maps.Marker(new plus.maps.Point(116.347496,39.970191));
marker.setIcon("/logo.png");
marker.setLabel("HBuilder");
var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
marker.setBubble(bubble);
map.addOverlay(marker);
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
向地图中添加覆盖物<br/>
<button onclick="addMarker()">添加标点</button>
<div id="map">地图加载中...</div>
</body>
</html>
centerAndZoom
设置地图初始中心点和缩放级别
void mapObj.centerAndZoom( center, zoom );
说明:
用于设置地图的初始中心点和缩放级别,通常在创建地图后立即调用。 默认中心点为天安门,默认缩放级别为12; 该方法设置的中心点和缩放级别可通过reset()方法恢复; 如果在地图显示后调用将改变地图的中心点和缩放级别并立即更新,并将初始值更新。
参数:
- center: ( Point ) 必选 地图初始化的中心点坐标
- zoom: ( Number ) 必选 地图初始化的缩放级别
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 0px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
<div id="map">地图加载中...</div>
</body>
</html>
clearOverlays
清除地图中所有覆盖物对象
void mapObj.clearOverlays();
说明:
此方法用于清除地图中所有覆盖物对象。 清除地图中的覆盖物对象后会自动更新地图视图。
参数:
无
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.347496,39.970191), 18 );
addMarker();
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 添加标点
var markers=[],i=0;
function addMarker(){
var marker=new plus.maps.Marker(new plus.maps.Point(116.347496+0.001*i,39.970191+0.001*i));
marker.setIcon("/logo.png");
marker.setLabel("HBuilder");
var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
marker.setBubble(bubble);
map.addOverlay(marker);
markers.push(marker);
i++;
}
// 清除所有标点
function clearMarker(){
map.clearOverlays();
markers=[];
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
清除地图中所有覆盖物对象<br/>
<button onclick="addMarker()">添加标点</button>
<button onclick="clearMarker()">清除标点</button><br/>
<div id="map">地图加载中...</div>
</body>
</html>
close
关闭地图控件
void mapObj.close();
说明:
关闭地图控件将会销毁地图使用的资源,不可再使用。
参数:
无
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
var map=null;
// 显示地图
function showMap(){
map||(map=new plus.maps.Map('map'),
map.centerAndZoom(new plus.maps.Point(116.3977,39.906016), 12));
map.show();
}
// 关闭地图
function closeMap(){
map&&(map.close(),map=null);
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
关闭地图控件<br/>
<button onclick="showMap()">显示地图</button>
<button onclick="closeMap()">关闭地图</button>
<div id="map">地图加载中...</div>
</body>
</html>
getBounds
获取当前地图可视范围的地理区域
Bounds mapObj.getBounds();
说明:
当旋转或俯视时,是当前地图可视范围的最大外接矩形地理区域。
参数:
无
返回值:
Bounds : 获取到
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 获取当前地图显示的地理区域
function getCurrentBounds(){
alert( JSON.stringify(map.getBounds()) );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
获取当前地图显示的地理区域<br/>
<button onclick="getCurrentBounds()">获取地理区域</button>
<div id="map">地图加载中...</div>
</body>
</html>
getCenter
获取地图中心点位置
Point mapObj.getCenter();
说明:
此方法用于获取设置的地图中心点位置(centerAndZoom/setCenter)。
参数:
无
返回值:
Point : 地图中心点坐标
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 获取地图的中心点
function getCenter(){
var center = map.getCenter();
alert( JSON.stringify(center) );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
获取地图中心点<br/>
<button onclick="getCenter()">GetCenter</button>
<div id="map">地图加载中...</div>
</body>
</html>
getCurrentCenter
获取当前地图显示的地图中心点位置
Boolean mapObj.getCurrentCenter( callback );
说明:
此方法用于获取当前地图显示的地图中心点位置,获取成功后通过callback回调返回。
参数:
- callback: ( UserLocationCallback ) 必选 获取当前地图显示的地图中心点位置完成后执行的通知操作结果方法,在回调函数中返回的point信息为当前地图中心点坐标
返回值:
Boolean : 执行获取操作成功则返回true,一定会执行通知结果方法;否则返回false。
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 获取当前地图显示的地图中心点位置
function getCurrentCenter(){
map.getCurrentCenter( function ( state, point ){
if( 0 == state ){
alert( JSON.stringify(point) );
}else{
alert( "Failed!" );
}
} );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
获取当前地图显示的地图中心点位置<br/>
<button onclick="getCurrentCenter()">获取中心位置</button>
<div id="map">地图加载中...</div>
</body>
</html>
getMapType
获取地图的显示类型
void mapObj.getMapType();
参数:
无
返回值:
MapType : 地图视图的显示类型
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 获取地图的显示类型
function getMapType(){
alert(map.getMapType()==plus.maps.MapType.MAPTYPE_SATELLITE?"卫星视图":"街道视图" );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
设置地图类型<br/>
<button onclick="getMapType()">视图类型</button>
<div id="map">地图加载中...</div>
</body>
</html>
getUserLocation
获取用户的当前位置信息
Boolean mapObj.getUserLocation( callback );
说明:
此方法用于获取用户的当前位置信息,获取成功后通过callback回调返回。 获取用户当前位置信息将打开定位设备。
参数:
- callback: ( UserLocationCallback ) 必选 获取用户当前位置信息完成后执行的通知操作结果方法,回调函数中返回的point信息为当前用户位置的坐标
返回值:
Boolean : 执行获取操作成功则返回true,一定会执行通知结果方法;否则返回false。
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 获取用户的当前位置信息
function getUserLocation(){
map.getUserLocation( function ( state, point ){
if( 0 == state ){
alert( JSON.stringify(point) );
}else{
alert( "Failed!" );
}
} );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
获取用户的当前位置信息<br/>
<button onclick="getUserLocation()">获取位置</button>
<div id="map">地图加载中...</div>
</body>
</html>
getZoom
获取地图的缩放级别
Number mapObj.getZoom();
说明:
当前地图显示的真实缩放级别。
参数:
无
返回值:
Number : 地图视图的缩放级别
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 获取地图的缩放级别
function getZoom(){
plus.nativeUI.alert( map.getZoom() );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
获取地图的缩放级别<br/>
<button onclick="getZoom()">GetZoom</button>
<div id="map">地图加载中...</div>
</body>
</html>
hide
隐藏地图控件
void mapObj.hide();
说明:
此方法用于隐藏地图控件,通常在显示后调用此方法来隐藏。 如果地图已经隐藏再调用此方法将无效果。
参数:
无
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 显示地图
function showMap(){
map.show();
}
// 隐藏地图
function hideMap(){
map.hide();
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
隐藏地图控件<br/>
<button onclick="showMap()">显示地图</button>
<button onclick="hideMap()">隐藏地图</button>
<div id="map">地图加载中...</div>
</body>
</html>
isShowUserLocation
获取是否显示用户位置
Boolean mapObj.isShowUserLocation();
参数:
无
返回值:
Boolean : 地图中显示用户位置则返回true,否则返回false。
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 打开用户位置
function showUserLocation(){
map.showUserLocation( true );
}
// 关闭用户位置
function hideUserLocation(){
map.showUserLocation( false );
}
// 获取是否打开用户位置
function isUserLocation(){
alert( map.isShowUserLocation() );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
获取是否显示用户位置<br/>
<button onclick="showUserLocation()">显示用户位置</button>
<button onclick="hideUserLocation()">关闭用户位置</button><br/>
<button onclick="isUserLocation()">是否显示用户位置</button>
<div id="map">地图加载中...</div>
</body>
</html>
isShowZoomControls
获取是否显示地图内置缩放控件
Boolean mapObj.isShowZoomControls();
参数:
无
返回值:
Boolean : 地图中已显示内置缩放控件则返回true,否则返回false
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 打开用户位置
function showZoomControls(){
map.showZoomControls( true );
}
// 关闭用户位置
function hideZoomControls(){
map.showZoomControls( false );
}
// 获取是否打开用户位置
function isZoomControls(){
alert( map.isShowZoomControls() );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
获取是否显示地图内置缩放控件<br/>
<button onclick="showZoomControls()">显示缩放控件</button>
<button onclick="hideZoomControls()">关闭缩放控件</button><br/>
<button onclick="isZoomControls()">是否显示缩放控件</button>
<div id="map">地图加载中...</div>
</body>
</html>
isTraffic
获取是否打开地图交通信息图层
Boolean mapObj.isTraffic();
参数:
无
返回值:
Boolean : 地图中显示交通信息图层则返回true,否则返回false。
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 打开地图交通信息图层
function showTraffic(){
map.setTraffic( true );
}
// 关闭地图交通信息图层
function hideTraffic(){
map.setTraffic( false );
}
// 获取是否打开地图交通信息图层
function isTraffic(){
alert( map.isTraffic() );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
获取是否打开地图交通信息图层<br/>
<button onclick="showTraffic()">显示交通信息</button>
<button onclick="hideTraffic()">关闭交通信息</button><br/>
<button onclick="isTraffic()">是否显示交通信息</button>
<div id="map">地图加载中...</div>
</body>
</html>
removeOverlay
从地图中删除覆盖物对象
void mapObj.removeOverlay( overlay );
说明:
此方法用于从地图中删除覆盖物对象。 支持各种从maps.Overlay对象继承的各种覆盖物对象。
参数:
- overlay: ( Overlay ) 必选 需要从地图中删除的覆盖物对象
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 添加标点
var marker=null;
function addMarker(){
if(marker){return;}
marker=new plus.maps.Marker(new plus.maps.Point(116.347496,39.970191));
marker.setIcon("/logo.png");
marker.setLabel("HBuilder");
var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
marker.setBubble(bubble);
map.addOverlay(marker);
}
// 删除标点
function removeMarker(){
map.removeOverlay(marker);
delete marker;
marker=null;
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
向地图中添加覆盖物<br/>
<button onclick="addMarker()">添加标点</button>
<button onclick="removeMarker()">删除标点</button><br/>
<div id="map">地图加载中...</div>
</body>
</html>
reset
重置地图
void mapObj.reset();
说明:
此方法用于重新设置地图,恢复地图的初始化时的中心点和缩放级别。 该方法将导致显示内容将立即更新。
参数:
无
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 重置地图
function resetMap(){
map.reset();
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
重置地图 - 用户操作移动、缩放地图后重置上次设置的中心点和缩放级别<br/>
<button onclick="resetMap()">Reset</button>
<div id="map">地图加载中...</div>
</body>
</html>
resize
重设地图控件大小
void mapObj.resize();
说明:
此方法用于重新计算地图控件大小,保持与构造时传入DOM元素的大小及位置一致。
参数:
无
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 改变地图大小
function resizeMap(){
em.style.width = "50%";
map.resize();
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
重设地图控件大小<br/>
<button onclick="resizeMap()">Resize</button>
<div id="map">地图加载中...</div>
</body>
</html>
setCenter
设置地图的中心点
void mapObj.setCenter( center );
说明:
此方法用于设置地图的中心点,用于切换当前显示地图位置。 该方法改变中心点后地图显示内容将立即更新; 该方法不会改变地图显示的缩放级别。
参数:
- center: ( Point ) 必选 要切换到的中心点坐标
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 设置地图的中心点
function setCenter(){
var center = new plus.maps.Point( 118.123, 35.456 );
map.setCenter( center );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
设置地图的中心点<br/>
<button onclick="setCenter()">SetCenter</button>
<div id="map">地图加载中...</div>
</body>
</html>
setMapType
设置地图的视图类型
void mapObj.setMapType( type );
说明:
此方法用于设置地图类型,默认为普通街道视图。
参数:
- type: ( MapType ) 必选 要设置的地图的显示模式,参考maps.MapType的常量说明
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 街道视图
function normalMap(){
map.setMapType( plus.maps.MapType.MAPTYPE_NORMAL );
}
// 卫星视图
function stelliteMap(){
map.setMapType( plus.maps.MapType.MAPTYPE_SATELLITE );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
设置地图类型<br/>
<button onclick="normalMap()">街道视图</button>
<button onclick="stelliteMap()">卫星视图</button>
<div id="map">地图加载中...</div>
</body>
</html>
setStyles
设置地图控件的配置参数
void mapObj.setStyles(styles);
说明:
用于动态更新地图控件的参数。
参数:
- styles: ( MapStyles ) 必选 要更新的配置参数
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var map = null;
// 创建地图控件
function createMap() {
if(!map){
map = plus.maps.create('map', {
top:'100px',
left:'0px',
width: '100%',
height: '200px',
position: 'static'
});
plus.webview.currentWebview().append(map);
}
}
// 更新地图控件
function updateMap() {
map.setStyles({
top:'200px' // 调整地图的位置
});
}
</script>
<style type="text/css">
*{
-webkit-user-select: none;
}
html,body{
margin: 0px;
padding: 0px;
height: 100%;
}
</style>
</head>
<body>
<button onclick="createMap()">创建地图控件</button>
<button onclick="updateMap()">更新地图控件</button>
</body>
</html>
setTraffic
是否打开地图交通信息图层
void mapObj.setTraffic( traffic );
说明:
此方法用于设置是否打开地图交通信息图层,默认不显示。 该方法改变是否显示交通图层后地图显示内容将立即更新。
参数:
- traffic: ( Boolean ) 必选 设置是否显示交通信息图层
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 打开地图交通信息图层
function showTraffic(){
map.setTraffic( true );
}
// 关闭地图交通信息图层
function hideTraffic(){
map.setTraffic( false );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
设置是否打开地图交通信息图层<br/>
<button onclick="showTraffic()">显示交通信息</button>
<button onclick="hideTraffic()">关闭交通信息</button>
<div id="map">地图加载中...</div>
</body>
</html>
setZoom
设置地图的缩放级别
void mapObj.setZoom( zoom );
说明:
此方法用于设置地图的缩放级别,用于切换当前显示地图缩放级别。 该方法改变缩放级别后地图显示内容将立即更新; 该方法不会改变地图显示区域,以当前地图显示的中心点位置来缩放地图。
参数:
- zoom: ( Number ) 必选 要设置的新的缩放级别,有效范围为3-21(高德地图为3-20,百度地图为4-21)
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 设置地图的缩放级别
function setZoom(){
map.setZoom( 22 );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
设置地图的缩放级别<br/>
<button onclick="setZoom()">SetZoom</button>
<div id="map">地图加载中...</div>
</body>
</html>
show
显示地图控件
void mapObj.show();
说明:
此方法用于显示地图控件,通常在隐藏后调用此方法来显示。 如果地图已经显示再调用此方法将无效果。
参数:
无
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 显示地图
function showMap(){
map.show();
}
// 隐藏地图
function hideMap(){
map.hide();
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
显示地图控件<br/>
<button onclick="showMap()">显示地图</button>
<button onclick="hideMap()">隐藏地图</button>
<div id="map">地图加载中...</div>
</body>
</html>
showUserLocation
显示用户位置
void mapObj.showUserLocation( display );
说明:
此方法将在地图上显示用户位置信息。 显示用户位置将打开定位设备。
参数:
- display: ( Boolean ) 必选 是否显示用户位置
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 打开用户位置
function showUserLocation(){
map.showUserLocation( true );
}
// 关闭用户位置
function hideUserLocation(){
map.showUserLocation( false );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
显示用户位置<br/>
<button onclick="showUserLocation()">显示用户位置</button>
<button onclick="hideUserLocation()">关闭用户位置</button>
<div id="map">地图加载中...</div>
</body>
</html>
showZoomControls
设置是否显示地图内置缩放控件
void mapObj.showZoomControls( display );
说明:
此方法将在地图上显示内置缩放控件。
参数:
- display: ( Boolean ) 必选 是否显示地图内置缩放控件
返回值:
void : 无
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 打开用户位置
function showZoomControls(){
map.showZoomControls( true );
}
// 关闭用户位置
function hideZoomControls(){
map.showZoomControls( false );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
设置是否显示地图内置缩放控件<br/>
<button onclick="showZoomControls()">显示缩放控件</button>
<button onclick="hideZoomControls()">关闭缩放控件</button><br/>
<div id="map">地图加载中...</div>
</body>
</html>
onclick
用户点击地图事件
mapObj.onclick = function ( point ) {
// JS code.
}
说明:
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
map.onclick = function( point ){
alert( JSON.stringify(point) );
}
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
用户点击地图事件<br/>
<div id="map">地图加载中...</div>
</body>
</html>
onstatuschanged
地图状态改变事件
mapObj.onstatuschanged = function( event ){
// JS code.
}
说明:
用户拖动、缩放地图等操作完成后触发。
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
map.onstatuschanged = function( e ){
alert( "StatusChanged: "+JSON.stringify(e) );
}
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
地图状态改变事件<br/>用户拖动或缩放时触发。
<div id="map">地图加载中...</div>
</body>
</html>
MapStyles
地图控件对象的参数
interface plus.maps.MapStyles {
attribute Point center;
attribute Number zoom;
attribute MapType type;
attribute Boolean traffic;
attribute Boolean zoomControls;
attribute String top;
attribute String left;
attribute String width;
attribute String height;
attribute String position;
}
说明:
设置地图对象显示时使用的参数,如地图的中心位置、缩放级别等。
属性:
- center: (Point 类型 )地图的中心位置 未设置则使用地图的默认中心点(由地图供应商确定)。
- zoom: (Number 类型 )地图的缩放级别 有效范围为有效范围为3-21(高德地图为3-20,百度地图为4-21),默认值为12,设置无效的值则使用默认值。
- type: (MapType 类型 )地图的视图类型 可设置普通街道视图、卫星视图,默认值为普通街道视图。
- traffic: (Boolean 类型 )地图的是否显示交通信息 true表示显示地图的交通信息图层,false则不显示,默认值为false。
- zoomControls: (Boolean 类型 )是否显示地图的内置缩放控件 true表示显示地图的内置缩放控件,false则不显示,默认值为false。
- top: (String 类型 )地图控件左上角的垂直偏移量 可取值: 像素值,如”100px”; 百分比,如”10%”,相对于父Webview窗口的高度; 自动计算,如”auto”,根据height值自动计算,相对于父Webview窗口垂直居中。
- left: (String 类型 )地图控件左上角的水平偏移量 可取值: 像素值,如”100px”; 百分比,如”10%”,相对于父Webview窗口的宽度; 自动计算,如”auto”,根据width值自动计算,相对于父Webview窗口水平居中。 默认值为”0px”。
- width: (String 类型 )地图控件的宽度 可取值: 像素值,如”100px”; 百分比,如”10%”,相对于父Webview窗口的宽度。 默认值为”100%”。
- height: (String 类型 )地图控件的高度 可取值: 像素值,如”100px”; 百分比,如”10%”,相对于父Webview窗口的高度。 默认值为”100%”。
- position: (String 类型 )地图控件在Webview窗口的布局模式 可取值: “static” – 静态布局模式,如果页面存在滚动条则随窗口内容滚动; “absolute” – 绝对布局模式,如果页面存在滚动条不随窗口内容滚动; 默认值为”static”。
GeocodeOptions
地理编码转换的参数
属性:
- coordType: (String 类型 )源数据的坐标系类型 仅在反向地理编码转换时生效。 “wgs84”:表示WGS-84坐标系; “gcj02”:表示国测局经纬度坐标系; “bd09”:表示百度墨卡托坐标系; “bd09ll”:表示百度经纬度坐标系; 默认使用wgs84坐标系。
- city: (String 类型 )源地址所属的城市 仅在地理编码转换时生效,如果不指定则在全国范围内区配转换。
CoordinateConvertOptions
地图坐标转换的参数
属性:
- coordType: (String 类型 )源数据的坐标系类型 “wgs84”:表示WGS-84坐标系; “gcj02”:表示国测局经纬度坐标系; “bd09”:表示百度墨卡托坐标系; “bd09ll”:表示百度经纬度坐标系; 默认使用wgs84坐标系。
Point
Point对象用于表示地图元素的坐标
说明:
常用语对地图上元素进行定位时使用。
构造:
- Point(lng,lat): 创建Point对象
方法:
Point(lng,lat)
创建Point对象
var ptObj = new plus.maps.Point( lng, lat );
参数:
- lng: ( Number ) 必选 坐标的经度
- lat: ( Number ) 必选 坐标的纬度
返回值:
Point : 创建的坐标对象
示例:
// 创建地图坐标对象
var pt1 = new plus.maps.Point( 116.123, 36.456 );
setLng
设置坐标点的经度
void ptObj.setLng( lng );
参数:
- lng: ( Number ) 必选 要设置坐标的经度
返回值:
void : 无
getLng
获取坐标的经度
Number ptObj.getLng();
参数:
无
返回值:
Number : 坐标的经度
setLat
设置坐标的纬度
void ptObj.setLat( lat );
参数:
无
返回值:
void : 无
getLat
获取坐标的纬度
Number ptObj.getLat();
参数:
无
返回值:
Number : 坐标的纬度
equals
判断两个坐标点是否相等
Boolean ptObj.equals( Point pt );
参数:
- pt: ( Point ) 必选 要比较的坐标对象
返回值:
Boolean : 坐标对象是否相等,相等则返回true,否则返回false。
示例:
var pt1 = new plus.maps.Point( 116.123, 36.456 );
var pt2 = new plus.maps.Point( 117.234, 37.567 );
var pt3 = new plus.maps.Point( 117.789, 36.456 );
alert( pt1.equals(pt2) ); // 提示false
alert( pt1.equals(pt3) ); // 提示false
Bounds
地理区域
说明:
有西南及东北坐标点数据组成的矩形区域。
构造:
- Bounds(northeast,southwest): 创建Bounds对象
- Bounds(nelng,nelat,swlng,swlat): 创建Bounds对象
方法:
- setNorthEast: 设置地理区域的东北坐标点
- getNorthEast: 地理区域的东北坐标点
- setSouthWest: 设置地理区域的西南坐标点
- getSouthWest: 地理区域的西南坐标点
- contains: 判断制定的坐标是否在地理区域中
- equals: 判断两个地理区域是否相等
- getCenter: 获取地理区域的中心点坐标
Bounds(northeast,southwest)
创建Bounds对象
var bounds = new plus.maps.Bounds(northeast, southwest);
参数:
返回值:
Bounds : 创建的Bounds对象
示例:
// 创建地理区域对象
var bounds = new plus.maps.Bounds( new plus.maps.Point(116.123,36.456), new plus.maps.Point(116.111,36.401) );
Bounds(nelng,nelat,swlng,swlat)
创建Bounds对象
var bounds = new plus.maps.Bounds( nelng, nelat, swlng, swlat );
参数:
- nelng: ( Number ) 必选 东北坐标点的经度值
- nelat: ( Number ) 必选 东北坐标点的纬度值
- swlng: ( Number ) 必选 西南坐标点的经度值
- swlat: ( Number ) 必选 西南坐标点的纬度值
返回值:
Bounds : 创建的Bounds对象
示例:
// 创建地理区域对象
var bounds = new plus.maps.Bounds( 116.123, 36.456, 116.111, 36.401 );
setNorthEast
设置地理区域的东北坐标点
void bounds.setNorthEast( point );
说明:
原方法名为setNorthEase,HBuilderX2.5.5+版本后已修正,原方法仍兼容支持。
参数:
- point: ( Point ) 必选 要设置的坐标点
返回值:
void : 无
getNorthEast
地理区域的东北坐标点
Point bounds.getNorthEast();
说明:
原方法名为getNorthEase,HBuilderX2.5.5+版本后已修正,原方法仍兼容支持。
参数:
无
返回值:
Point : 东北坐标点
setSouthWest
设置地理区域的西南坐标点
void bounds.setSouthWest( point );
参数:
- point: ( Point ) 必选 要设置的坐标点
返回值:
void : 无
getSouthWest
地理区域的西南坐标点
Point bounds.getSouthWest();
参数:
无
返回值:
Point : 西南坐标点
contains
判断制定的坐标是否在地理区域中
Boolean bounds.contains( point );
参数:
- point: ( Point ) 必选 要判断的坐标点对象
返回值:
Boolean : 地理区域包含指定的坐标点,相等则返回true,否则返回false。
示例:
var bd1 = new plus.maps.Bounds( 116.123, 36.456, 116.111, 36.401 );
var pt1 = new plus.maps.Point( 116.120, 36.450 );
var pt1 = new plus.maps.Point( 117.234, 37.567 );
alert( bd1.contains(pt1) ); // 提示true
alert( bd1.contains(pt2) ); // 提示false
equals
判断两个地理区域是否相等
Boolean bounds.equals( Bounds bounds );
参数:
- bounds: ( Bounds ) 必选 要比较的地理区域对象
返回值:
Boolean : 地理区域对象是否相等,相等则返回true,否则返回false。
示例:
var bd1 = new plus.maps.Bounds( 116.123, 36.456, 116.111, 36.401 );
var bd2 = new plus.maps.Bounds( 117.234, 37.567, 116.224, 36.557 );
var bd3 = new plus.maps.Bounds( 116.123, 36.456, 116.111, 36.401 );
alert( bd1.equals(bd2) ); // 提示false
alert( bd1.equals(bd3) ); // 提示false
getCenter
获取地理区域的中心点坐标
Point bounds.getCenter();
参数:
无
返回值:
Point : 地理区域的中心坐标点,如果地理区域无效则返回null。
示例:
var bd1 = new plus.maps.Bounds( 116.123, 36.456, 116.111, 36.401 );
var center = bd1.getCenter();// (116.117,36.4285)
MapType
地图视图类型
常量:
- MAPTYPE_NORMAL: (Number 类型 )普通街道视图类型地图视图类型常量,普通街道视图。
- MAPTYPE_SATELLITE: (Number 类型 )卫星视图地图视图类型常量,卫星视图。
Overlay
地图覆盖物基类对象
interface Overlay {
function Boolean isVisible();
function void show();
function void hide();
}
说明:
Overlay是地图上显示元素的基类,用于抽象地图元素,不用于实例化。
方法:
isVisible
判断地图覆盖物是否可见
Boolean overlayObj.isVisible();
说明:
地图覆盖物对象默认为可见;地图覆盖物对象是否可见由其自身状态决定,不管其是否被添加到地图层中。
参数:
无
返回值:
Boolean : 覆盖物在地图上可见则返回true,否则返回false。
show
显示地图上的覆盖物
void overlayObj.show();
说明:
常用于地图覆盖物在隐藏后调用此方法来显示。 只有添加到地图上的覆盖物才能看到效果; 如果覆盖物对象已经在地图上显示再调用此方法将无效果。
参数:
无
返回值:
void : 无
hide
隐藏地图上的覆盖物
void overlayObj.show();
说明:
常用于地图覆盖物在显示后调用此方法来隐藏。 只有添加到地图上的覆盖物才能看到效果; 如果覆盖物对象已经在地图上隐藏再调用此方法将无效果。
参数:
无
返回值:
void : 无
Marker
地图上显示的标点对象
说明:
从Overlay对象继承而来,可通过Map对象的addOverlay()方法将对象添加地图中。
构造:
- Marker( point ): 创建地图标点Marker对象
方法:
- bringToTop: 覆盖物显示到最上层
- setPoint: 设置标点对象的坐标
- getPoint: 获取标点的坐标
- setIcon: 设置标点上显示的图标
- setIcons: 设置标点上显示的图标数组
- setLabel: 设置标点上显示的文本标注
- getLabel: 获取标点上显示的文本标注
- setBubble: 设置标点的气泡内容
- getBubble: 获取标点上显示的文本标注
- hideBubble: 隐藏标点上显示的气泡
- setDraggable: 设置标点的是否允许拖拽
- isDraggable: 获取标点是否允许拖拽
事件:
Marker( point )
创建地图标点Marker对象
var markObj = new plus.maps.Marker( point );
参数:
- point: ( Point ) 必选 地图标点的坐标信息
返回值:
Marker : 创建好的地图标点对象
示例:
var marker=new plus.maps.Marker(new plus.maps.Point(116.347496,39.970191));
marker.setIcon("/logo.png");
marker.setLabel("HBuilder");
var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
marker.setBubble(bubble);
map.addOverlay(marker);
bringToTop
覆盖物显示到最上层
void overlayObj.bringToTop();
说明:
常用于覆盖物相互覆盖时调整覆盖物的显示顺序。 只有添加到地图上的覆盖物才能看到效果; 如果覆盖物对象已经在地图上隐藏再调用此方法将无效果。
参数:
无
返回值:
void : 无
平台支持:
- Android – 2.3+ (支持)
- iOS – 5.1+ (不支持) : 调用此API无任何效果。
setPoint
设置标点对象的坐标
void markObj.setPoint( point );
说明:
标点在设置新坐标后将在地图上立即更新标点位置。
参数:
- point: ( Point ) 必选 要设置标点的坐标
返回值:
void : 无
getPoint
获取标点的坐标
Point markObj.getPoint();
参数:
无
返回值:
Point : 标点的坐标对象
setIcon
设置标点上显示的图标
void markObj.setIcon( icon );
说明:
若未设置则显示默认标点图标,已添加的标点在设置新值后将在地图上立即更新标点内容。
参数:
- icon: ( String ) 必选 要设置标点图标的URL地址仅支持本地图标URL地址,支持png、jpg/jpeg、bmp格式。
返回值:
void : 无
setIcons
设置标点上显示的图标数组
void markObj.setIcons( icons, period );
说明:
设置图标数组后则按照指定的间隔时间轮播数组中图标。 设置图标数组后将忽略setIcon方法设置的图标,未设置则显示setIcon设置的图标。
参数:
- icons: ( Array[String] ) 必选 要设置标点图标数组 图标数组中仅支持本地图标URL地址,支持png、jpg/jpeg、bmp格式。 注:所有图片应该使用统一的分辨率,否则可能会显示不正常。
返回值:
void : 无
setLabel
设置标点上显示的文本标注
void markObj.setLabel( label );
说明:
若未设置则不显示标注(默认为空字符串),已添加的标点在设置新值后将在地图上立即更新标点内容。
参数:
- label: ( String ) 必选 要设置标点的标注文字
返回值:
void : 无
getLabel
获取标点上显示的文本标注
String markObj.getLabel();
参数:
无
返回值:
String : 标点的标注文本内容
setBubble
设置标点的气泡内容
void markObj.setBubble( buuble, pop );
说明:
设置气泡内容后,用户点击标点时弹出则弹出气泡。 注意:用户点击标点时先弹出标点关联的气泡,再响应标点的onclick事件。
参数:
- buuble: ( Bubble ) 必选 要设置标点关联的气泡对象
- pop: ( Boolean ) 可选 是否默认弹出气泡 true表示弹出显示气泡,false表示不弹出显示气泡(当用户点击时才弹出),默认值为false。 当添加标点时自动弹出显示气泡,如果已经添加标点则调用setBubble时弹出显示气泡。
返回值:
void : 无
getBubble
获取标点上显示的文本标注
Bubble markObj.getBubble();
说明:
如果没有设置关联的气泡对象则返回null。
参数:
无
返回值:
Bubble : 标点关联的气泡对象
hideBubble
隐藏标点上显示的气泡
void markObj.hideBubble();
说明:
如果没有设置关联的气泡对象或者气泡对象没有弹出显示,则不做任何操作。
参数:
无
返回值:
void : 无
setDraggable
设置标点的是否允许拖拽
void markObj.setDraggable( draggable );
说明:
设置标点可拖拽后,用户按住标点后拖动,标点会跟随手的拖拽而移动。 拖拽后会更新标点的坐标信息。 注:拖动前需要先在标点上长按。
参数:
- draggable: ( Boolean ) 必选 要设置标点是否可拖拽 true表示标点可拖拽,false表示标点不可拖拽,默认值为false。
返回值:
void : 无
isDraggable
获取标点是否允许拖拽
Boolean markObj.isDraggable();
参数:
无
返回值:
Boolean : true表示标点可拖拽,false表示标点不可拖拽
onclick
用户点击地图标点事件
markObj.onclick = function ( marker ) {
// Click code.
}
说明:
示例:
// 用户点击标点将弹出标点上的文本
markObj.onclick = function ( marker ) {
alert( "Clicked:" + markObj.getLabel() );
}
onDrag
用户拖拽标点事件
markObj.onDrag = function ( marker ) {
// Click code.
}
说明:
可调用标点对象的markObj.setDraggable(true)方法设置标点允许拖拽,当用户拖拽标点对象时触发此事件。
平台支持:
- Android – 2.3+ (支持)
- iOS – 5.1+ (不支持) : 不触发此事件。
示例:
// 用户点击标点将弹出标点上的文本
markObj.onDrag = function ( target ) {
alert( "Drag:" + JSON.stringify(target.getPoint()) );
}
Bubble
地图上显示的气泡对象
说明:
此对象不能直接添加到地图上显示,只可关联到地图标点覆盖物上,用户点击标点时弹出显示。
构造:
- Bubble( label ): 创建气泡对象
方法:
- setIcon: 设置气泡上显示的图标
- setLabel: 设置气泡上显示的文字内容
- getLabel: 获取气泡上显示的文字内容
- belongMarker: 获取气泡所属的标点对象
- loadImage: 从图片加载气泡显示的内容
- loadImageDataURL: 从图片数据加载气泡显示的内容
事件:
- onclick: 用户点击气泡事件
Bubble( label )
创建气泡对象
var bubObj = new plus.maps.Bubble( label );
参数:
- label: ( String ) 必选 气泡上显示的文字
返回值:
Bubble : 气泡对象
示例:
var marker=new plus.maps.Marker(new plus.maps.Point(116.347496,39.970191));
marker.setIcon("/logo.png");
marker.setLabel("HBuilder");
var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
marker.setBubble(bubble);
map.addOverlay(marker);
setIcon
设置气泡上显示的图标
void bubObj.setIcon( icon );
说明:
若为设置则无默认图标,已添加的显示的气泡在设置新值后将在地图上立即更新内容。
参数:
- icon: ( String ) 必选 设置气泡图标的URL地址仅支持本地资源,支持png、jpg/jpeg、bmp格式图片资源。
返回值:
void : 无
setLabel
设置气泡上显示的文字内容
void bubObj.setLabel( label );
说明:
若未设置则不显示文字(默认为空字符串),已添加的显示的气泡在设置新值后将在地图上立即更新内容。
参数:
- label: ( String ) 必选 要设置气泡上显示的文字
返回值:
void : 无
getLabel
获取气泡上显示的文字内容
String bubObj.getLabel();
参数:
无
返回值:
String : 气泡上显示的文字内容
belongMarker
获取气泡所属的标点对象
Marker bubObj.belongMarker();
参数:
无
返回值:
Marker : 气泡所属的标点对象。
loadImage
从图片加载气泡显示的内容
void bubObj.loadImage( path );
说明:
通过加载图片来自定义气泡显示的内容,加载图片后将清空气泡使用的图标及文字内容。
参数:
- path: ( String ) 必选 要加载的图片路径 支持以下图片路径: 相对路径 – 相对于当前页面的host位置,如”a.jpg”,注意当前页面为网络地址则不支持; 绝对路径 – 系统绝对路径,如Android平台”/storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/www/a.jpg”,iOS平台”/var/mobile/Containers/Data/Application/757966CF-345C-4348-B07F-EEF83CF9A369/Library/Pandora/apps/HBuilder/www/a.png”; 相对路径URL(RelativeURL) – 以”_”开头的相对路径,如”_www/a.jpg”、”_doc/b.jpg”、”_documents/c.jpg”、”_downloads/d.jpg”; 本地路径URL – 以“file://”开头,后面跟随系统绝对路径。
返回值:
void : 无
loadImageDataURL
从图片数据加载气泡显示的内容
void bubObj.loadImageDataURL( data );
说明:
通过加载图片数据来自定义气泡显示的内容,加载图片后将清空气泡使用的图标及文字内容。 图片数据可通过Canvas自定义绘制后调用toDataURL来获取。
参数:
- data: ( String ) 必选 要加载的图片数据 图片数据为经过Base64URL编码转换后的字符串,如果图片数据无效则使用之前的内容显示。
返回值:
void : 无
onclick
用户点击气泡事件
bubObj.onclick = function ( bubble ) {
// JS code.
}
说明:
示例:
// 用户点击气泡将弹出气泡上的标题信息
bubObj.onclick = function ( bubble ) {
alert( "Clicked:" + bubble.getLabel() );
}
Circle
地图上显示的圆圈对象
说明:
从Overlay对象继承而来,可通过Map对象的addOverlay()方法将对象添加地图中。
构造:
- Circle( center, radius ): 创建Circle对象
方法:
- setCenter: 设置圆圈中心点的经纬度坐标
- getCenter: 获取圆圈中心点的坐标
- setRadius: 设置圆圈的半径,单位为米
- getRadius: 获取圆圈的半径
- setStrokeColor: 设置圆圈的边框颜色
- getStrokeColor: 获取圆圈的边框颜色
- setStrokeOpacity: 设置圆圈的边框透明度
- getStrokeOpacity: 获取圆圈边框的透明度
- setFillColor: 设置圆圈的填充颜色
- getFillColor: 获取圆圈的填充颜色
- setFillOpacity: 设置圆圈填充颜色的透明度
- getFillOpacity: 获取圆圈填充色的透明度
- setLineWidth: 设置圆圈边框的线条宽度
- getLineWidth: 获取圆圈边框的线条宽度
Circle( center, radius )
创建Circle对象
var circleObj = new plus.maps.Circle( center, radius );
参数:
- center: ( Point ) 必选 圆圈中心点的经纬度坐标
- radius: ( Number ) 必选 圆圈的半径,单位为米
返回值:
Circle : 地图上圆圈对象
示例:
var circleObj=new plus.maps.Circle(new plus.maps.Point(116.347496,39.970191),500);
map.addOverlay(circleObj);
setCenter
设置圆圈中心点的经纬度坐标
void circleObj.setCenter( point );
说明:
该方法设置将导致地图中的圆圈立即更新。
参数:
- point: ( Point ) 必选 圆圈的中心点坐标
返回值:
void : 无
示例:
// 设置新的圆圈中心点
circleObj.setCenter( new plus.maps.Point(116.0,39.0) );
getCenter
获取圆圈中心点的坐标
Point circleObj.getCenter();
参数:
无
返回值:
Point : 圆圈中心点的坐标对象
setRadius
设置圆圈的半径,单位为米
void circleObj.setRadius( radius );
说明:
该方法设置将导致地图中的圆圈立即更新。
参数:
- radius: ( Number ) 必选 圆圈的半径,单位为米
返回值:
void : 无
示例:
// 设置新的圆圈半径
circleObj.setRadius( 1000 );
getRadius
获取圆圈的半径
Number circleObj.getRadius();
参数:
无
返回值:
Number : 圆圈的半径,单位为米。
setStrokeColor
设置圆圈的边框颜色
void circleObj.setStrokeColor( color );
说明:
圆圈默认的圆圈边框颜色为黑色”#000000″,该方法设置将导致地图中的圆圈立即更新。
参数:
- color: ( String ) 必选 圆圈边框的线条颜色值格式为”#RRGGBB”,如红色为”#ff0000″。
返回值:
void : 无
示例:
// 设置圆圈的边框颜色为红色
circleObj.setStorkeColor( "#ff0000" );
getStrokeColor
获取圆圈的边框颜色
String circleObj.getStrokeColor();
参数:
无
返回值:
String : 圆圈边框的线条颜色,格式为”#RRGGBB”,如黑色为”#000000″。
setStrokeOpacity
设置圆圈的边框透明度
void circleObj.setStrokeOpacity( opacity );
说明:
圆圈默认值为不透明。 如果设置的值不合法则保持原有的透明度;该方法设置将导致地图中的圆圈立即更新。
参数:
- opacity: ( Number ) 必选 圆圈边框的透明度取值范围为0-1,0表示全透明,1表示不透明。
返回值:
void : 无
示例:
// 设置圆圈边框为半透明
circleObj.setStrokeOpacity( 0.5 );
getStrokeOpacity
获取圆圈边框的透明度
Number circleObj.getStrokeOpacity();
参数:
无
返回值:
Number : 圆圈的透明度,取值范围为0-1,0表示全透明,1表示不透明。
setFillColor
设置圆圈的填充颜色
void circleObj.setFillColor( color );
说明:
圆圈默认的圆圈填充颜色为无色,该方法设置将导致地图中的圆圈立即更新。
参数:
- color: ( String ) 必选 圆圈填充的颜色值格式为”#RRGGBB”,如红色为”#ff0000″。
返回值:
void : 无
示例:
// 设置圆圈的填充颜色为红色
circleObj.setFillColor( "#ff0000" );
getFillColor
获取圆圈的填充颜色
String circleObj.getFillColor();
说明:
如果填充颜色为无色,则返回空字符串。
参数:
无
返回值:
String : 圆圈的填充颜色,格式为”#RRGGBB”,如黑色为”#000000″。
setFillOpacity
设置圆圈填充颜色的透明度
void circleObj.setFillOpacity( opacity );
说明:
圆圈默认值为不透明。 如果设置的值不合法则保持原有的透明度;该方法设置将导致地图中的圆圈立即更新。
参数:
- opacity: ( Number ) 必选 圆圈填充颜色的透明度取值范围为0-1,0表示全透明,1表示不透明。
返回值:
void : 无
示例:
// 设置圆圈填充颜色为半透明
circleObj.setFillOpacity( 0.5 );
getFillOpacity
获取圆圈填充色的透明度
Number circleObj.getFillOpacity();
参数:
无
返回值:
Number : 圆圈填充色的透明度,取值范围为0-1,0表示全透明,1表示不透明。
setLineWidth
设置圆圈边框的线条宽度
void circleObj.setLineWidth( width );
说明:
圆圈边框的默认值为5。 如果设置的值不合法则保持原有的宽度;该方法设置将导致地图中的圆圈立即更新。
参数:
- width: ( Number ) 必选 圆圈边框的线条宽度取值范围为正整数。
返回值:
void : 无
示例:
// 设置圆圈边框线条为宽度为10
circleObj.setLineWidth( 10 );
getLineWidth
获取圆圈边框的线条宽度
Number circleObj.getLineWidth();
参数:
无
返回值:
Number : 圆圈边框的线条宽度,正整数。
Polyline
地图上显示的折线对象
说明:
从Overlay对象继承而来,可通过Map对象的addOverlay()方法将对象添加地图中。
构造:
- Polyline( points ): 创建Polyline对象
方法:
- setPath: 设置折线的顶点坐标
- getPath: 获取折线的顶点坐标
- setStrokeColor: 设置折线的颜色
- getStrokeColor: 获取折线的颜色
- setStrokeOpacity: 设置折线的透明度
- getStrokeOpacity: 获取折线的透明度
- setLineWidth: 设置折线的线条宽度
- getLineWidth: 获取折线的线条宽度
Polyline( points )
创建Polyline对象
var polylineObj = new plus.maps.Polyline( points );
参数:
- points: ( Array ) 必选 折线的顶点坐标,Point数组
返回值:
Polyline : 地图上折线对象
示例:
// 创建一个折线对象
var points = new Array( new plus.maps.Point(116.0,39.0), new plus.maps.Point(115.0,38.0), new plus.maps.Point(117.0,38.0) );
var polylineObj = new plus.maps.Polyline( points );
setPath
设置折线的顶点坐标
void polylineObj.setPath( points );
说明:
该方法设置将导致地图中的折线立即更新。
参数:
- points: ( Array ) 必选 折线的顶点坐标Point数组
返回值:
void : 无
示例:
// 设置新的折线顶点
var points = new Array( new plus.maps.Point(116.0,39.0), new plus.maps.Point(115.0,38.0), new plus.maps.Point(117.0,38.0) );
polylineObj.setPath( points );
getPath
获取折线的顶点坐标
Array<Point> polylineObj.getPath();
参数:
无
返回值:
Array[
Point] : 折线的顶点坐标数组。
setStrokeColor
设置折线的颜色
void polylineObj.setStrokeColor( color );
说明:
折线默认的颜色为黑色”#000000″,该方法设置将导致地图中的折线立即更新。
参数:
- color: ( String ) 必选 折线的颜色值格式为”#RRGGBB”,如红色为”#ff0000″。
返回值:
void : 无
示例:
// 设置折线为红色
polylineObj.setStorkeColor( "#ff0000" );
getStrokeColor
获取折线的颜色
String polylineObj.getStrokeColor();
参数:
无
返回值:
String : 折线的颜色,格式为”#RRGGBB”,如黑色为”#000000″。
setStrokeOpacity
设置折线的透明度
void polylineObj.setStrokeOpacity( opacity );
说明:
折线默认值为不透明。 如果设置的值不合法则保持原有的透明度;该方法设置将导致地图中的折线立即更新。
参数:
- opacity: ( Number ) 必选 折线的透明度取值范围为0-1,0表示全透明,1表示不透明。
返回值:
void : 无
示例:
// 设置折线为半透明
polylineObj.setStrokeOpacity( 0.5 );
getStrokeOpacity
获取折线的透明度
Number polylineObj.getStrokeOpacity();
参数:
无
返回值:
Number : 折线的透明度,取值范围为0-1,0表示全透明,1表示不透明。
setLineWidth
设置折线的线条宽度
void polylineObj.setLineWidth( width );
说明:
折线线条的宽度默认值为5。 如果设置的值不合法则保持原有的宽度;该方法设置将导致地图中的折线立即更新。
参数:
- width: ( Number ) 必选 折线的线条宽度取值范围为正整数。
返回值:
void : 无
示例:
// 设置折线为宽度为10
polylineObj.setLineWidth( 10 );
getLineWidth
获取折线的线条宽度
Number polylineObj.getLineWidth();
参数:
无
返回值:
Number : 折线的线条宽度,正整数。
Polygon
地图上显示的多边形对象
说明:
从Overlay对象继承而来,可通过Map对象的addOverlay()方法将对象添加地图中。
构造:
- Polygon( points ): 创建Polygon对象
方法:
- setPath: 设置多边形的顶点坐标
- getPath: 获取多边形的顶点坐标
- setStrokeColor: 设置多边形的颜色
- getStrokeColor: 获取多边形边框的颜色
- setStrokeOpacity: 设置多边形的透明度
- getStrokeOpacity: 获取多边形边框的透明度
- setFillColor: 设置多边形的填充颜色
- getFillColor: 获取多边形的填充色
- setFillOpacity: 设置多边形填充色的透明度
- getFillOpacity: 获取多边形填充色的透明度
- setLineWidth: 设置多边形的边框宽度
- getLineWidth: 获取多边形边框的宽度
Polygon( points )
创建Polygon对象
var polygonObj = new plus.maps.Polygon( points );
参数:
- points: ( Array ) 必选 多边形的顶点坐标,Point数组
返回值:
Polygon : 地图上多边形对象
示例:
// 创建一个多边形对象
var points = new Array( new plus.maps.Point(116.0,39.0), new plus.maps.Point(115.0,38.0), new plus.maps.Point(117.0,38.0) );
var polygonObj = new plus.maps.Polygon( points );
setPath
设置多边形的顶点坐标
void polygonObj.setPath( points );
说明:
该方法设置将导致地图中的多边形立即更新。
参数:
- points: ( Array ) 必选 多边形的顶点坐标Point数组
返回值:
void : 无
示例:
// 设置新的多边形顶点
var points = new Array( new plus.maps.Point(116.0,39.0), new plus.maps.Point(115.0,38.0), new plus.maps.Point(117.0,38.0) );
polygonObj.setPath( points );
getPath
获取多边形的顶点坐标
Array<Point> polygonObj.getPath();
参数:
无
返回值:
Array[
Point] : 多边形的顶点坐标数组。
setStrokeColor
设置多边形的颜色
void polygonObj.setStrokeColor( color );
说明:
多边形边框默认的颜色为黑色”#000000″,该方法设置将导致地图中的多边形立即更新。
参数:
- color: ( String ) 必选 多边形边框的颜色值格式为”#RRGGBB”,如红色为”#ff0000″。
返回值:
void : 无
示例:
// 设置多边形边框为红色
polygonObj.setStorkeColor( "#ff0000" );
getStrokeColor
获取多边形边框的颜色
String polygonObj.getStrokeColor();
参数:
无
返回值:
String : 多边形边框的颜色,格式为”#RRGGBB”,如黑色为”#000000″。
setStrokeOpacity
设置多边形的透明度
void polygonObj.setStrokeOpacity( opacity );
说明:
多边形边框默认值为不透明。 如果设置的值不合法则保持原有的透明度;该方法设置将导致地图中的多边形立即更新。
参数:
- opacity: ( Number ) 必选 多边形边框的透明度取值范围为0-1,0表示全透明,1表示不透明。
返回值:
void : 无
示例:
// 设置多边形边框为半透明
polygonObj.setStrokeOpacity( 0.5 );
getStrokeOpacity
获取多边形边框的透明度
Number polygonObj.getStrokeOpacity();
参数:
无
返回值:
Number : 多边形边框的透明度,取值范围为0-1,0表示全透明,1表示不透明。
setFillColor
设置多边形的填充颜色
void polygonObj.setStrokeColor( color );
说明:
多边形默认填充颜色为无色,该方法设置将导致地图中的多边形立即更新。
参数:
- color: ( String ) 必选 多边形填充的颜色值格式为”#RRGGBB”,如红色为”#ff0000″。
返回值:
void : 无
示例:
// 设置多边形的填充颜色为红色
polygonObj.setStorkeColor( "#ff0000" );
getFillColor
获取多边形的填充色
String polygonObj.getFillColor();
说明:
如果填充色为无色,则返回空字符串。
参数:
无
返回值:
String : 多边形的填充色,格式为”#RRGGBB”,如黑色为”#000000″。
setFillOpacity
设置多边形填充色的透明度
void polygonObj.setFillOpacity( opacity );
说明:
多边形填充色默认值为不透明。 如果设置的值不合法则保持原有的透明度;该方法设置将导致地图中的多边形立即更新。
参数:
- opacity: ( Number ) 必选 多边形填充色的透明度取值范围为0-1,0表示全透明,1表示不透明。
返回值:
void : 无
示例:
// 设置多边形填充色为半透明
polygonObj.setFillOpacity( 0.5 );
getFillOpacity
获取多边形填充色的透明度
Number polygonObj.getFillOpacity();
参数:
无
返回值:
Number : 多边形填充色的透明度,取值范围为0-1,0表示全透明,1表示不透明。
setLineWidth
设置多边形的边框宽度
void polygonObj.setLineWidth( width );
说明:
多边形边框的宽度默认值为5。 如果设置的值不合法则保持原有的宽度;该方法设置将导致地图中的多边形立即更新。
参数:
- width: ( Number ) 必选 多边形的边框宽度取值范围为正整数。
返回值:
void : 无
示例:
// 设置多边形为宽度为10
polygonObj.setLineWidth( 10 );
getLineWidth
获取多边形边框的宽度
Number polygonObj.getLineWidth();
参数:
无
返回值:
Number : 多边形的边框宽度,正整数。
Search
地图检索对象
说明:
Search对象用于管理地图上的检索功能,包括位置检索、周边检索和范围检索。
构造:
- Search( map ): 创建Search对象
方法:
- setPageCapacity: 设置检索返回结果每页的信息数目
- getPageCapacity: 获取检索返回结果每页的信息数目
- poiSearchInCity: 城市兴趣点检索
- poiSearchNearBy: 周边检索
- poiSearchInbounds: 指定范围检索
- setTransitPolicy: 设置公交路线检索策略
- transitSearch: 公交路线检索
- setDrivingPolicy: 设置驾车路线检索策略
- drivingSearch: 驾车路线检索
- walkingSearch: 步行路线检索
事件:
- onPoiSearchComplete: 兴趣点检索完成事件
- onRouteSearchComplete: 线路检索完成事件
Search( map )
创建Search对象
var searchObj = new plus.maps.Search( map );
参数:
- map: ( Map ) 必选 检索关联的地图对象
返回值:
Search : 地图检索对象
示例:
// 将检索到的第一条信息作为标点添加到地图中
var searchObj = new plus.maps.Search( map );
searchObj.onPoiSearchComplete = function( state, result ){
console.log("onPoiSearchComplete: "+state+" , "+result.currentNumber);
if ( state == 0 ) {
if ( result.currentNumber <= 0 ) {
alert( "没有检索到结果" );
}
for(var i=0; i<result.currentNumber; i++){
var pos = result.getPosition( i );
var marker = new plus.maps.Marker( pos.point );
marker.setLabel( pos.name );
map.addOverlay( marker );
}
} else {
alert( "检索失败" );
}
}
var pt = new plus.maps.Point( 116.404, 39.915 ); // 天安门坐标
searchObj.poiSearchNearBy( "肯德基", pt, 1000 );
setPageCapacity
设置检索返回结果每页的信息数目
void searchObj.setPageCapacity( capacity );
说明:
地图检索结果是按页返回的,默认检索每页返回10条信息。
参数:
- capacity: ( Number ) 必选 要指定检索返回结果每页的信息数目
返回值:
void : 无
getPageCapacity
获取检索返回结果每页的信息数目
Number searchObj.getPageCapacity();
参数:
无
返回值:
Number : 检索返回结果每页的信息数目
poiSearchInCity
城市兴趣点检索
Boolean searchObj.poiSearchInCity( city, key, index );
说明:
检索结果将通过onPoiSearchComplete事件返回。 如果调用此方法时已经处于POI检索操作中,则终止上次检索操作,重新开始新的检索。
参数:
- city: ( String ) 必选 检索的城市名称如果设置为空字符串则在地图定位出当前所在城市内进行检索。
- key: ( String ) 必选 检索的关键字
- index: ( Number ) 可选 要获取检索结果的页号索引页号索引值从0开始,即0表示第一页,默认值为0。
返回值:
Boolean : 检索成功返回true,否则返回false。
示例:
// 在北京对关键字“肯德基”进行检索
var searchObj = new plus.maps.Search( map );
searchObj. poiSearchInCity( "北京", "肯德基" );
poiSearchNearBy
周边检索
Boolean searchObj.poiSearchNearBy( key, pt, radius, index );
说明:
周边检索根据中心点、半径与检索词进行检索,检索完成后触发onPoiSearchComplete()事件。 若调用此方法时对象处于POI检索操作中,则终止上次检索操作,重新开始新的检索。
参数:
- key: ( String ) 必选 检索的关键字
- pt: ( Point ) 必选 检索的中心点坐标
- radius: ( Number ) 必选 检索的半径,单位为米
- index: ( Number ) 必选 要获取检索结果的页号索引页号索引值从0开始,即0表示第一页,默认值为0。
返回值:
Boolean : 检索成功返回true,否则返回false。
示例:
// 在天安门周围1千米内对关键字“肯德基”进行检索
var searchObj = new plus.maps.Search( map );
var pt = new plus.maps.Point( 116.404, 39.915 ); // 天安门坐标
searchObj. poiSearchNearBy( "肯德基", pt, 1000 );
poiSearchInbounds
指定范围检索
Boolean searchObj.poiSearchInbounds( key, ptLB, ptRT, index );
说明:
根据范围和检索词进行检索,检索完成后触发onPoiSearchComplete()事件。 若调用此方法时对象处于POI检索操作中,则终止上次检索操作,重新开始新的检索。
参数:
- key: ( String ) 必选 检索的关键字
- ptLB: ( Point ) 必选 检索范围的左下角坐标点
- ptRT: ( Point ) 必选 检索范围的右上角坐标点
- index: ( Number ) 必选 要获取检索结果的页号索引页号索引值从0开始,即0表示第一页,默认值为0。
返回值:
Boolean : 检索成功返回true,否则返回false。
setTransitPolicy
设置公交路线检索策略
Boolean searchObj.poiSearchInbounds(policy);
说明:
默认采用maps.SearchPolicy.TRANSIT_TIME_FIRST策略。 需在调用transitSearch()方法前设置的策略才生效; 如果设置非法值则认为设置失败,采用上次设置的检索策略并返回false。
参数:
- policy: ( SearchPolicy ) 必选 公交线路检索策略 可取值为maps.SearchPolicy.TRANSIT_TIME_FIRST、maps.SearchPolicy.TRANSIT_TRANSFER_FIRST、maps.SearchPolicy.TRANSIT_WALK_FIRST、maps.SearchPolicy.TRANSIT_NO_SUBWAY。
返回值:
Boolean : 设置成功返回true,否则返回false。
transitSearch
公交路线检索
Boolean searchObj.transitSearch(start, end, city);
说明:
检索完成后触发onRouteSearchComplete()事件。 若调用此方法时对象处于检索操作中,则终止上次检索操作,重新开始新的检索。
参数:
- start: ( String | Point ) 必选 公交线路检索的起点地址名称或坐标 若起点地址为名称则需使用地名关键字,如起点为坐标则需要使用plus.maps.Point类型对象。
- end: ( String | Point ) 必选 公交线路检索的终点地址名称或坐标 若终点地址为名称则需使用地名关键字,如终点为坐标则需要使用plus.maps.Point类型对象。
- city: ( String ) 必选 公交线路检索的城市名称
返回值:
Boolean : 检索成功返回true,否则返回false。
示例:
function transitSearch(){
// 在北京检索从天安门到大钟寺的公交线路
var searchObj = new plus.maps.Search( map );
searchObj.onRouteSearchComplete = function ( state, result ) {
console.log("onRouteSearchComplete: "+state+" , "+result.routeNumber);
if ( state == 0 ) {
if ( result.routeNumber <= 0 ) {
alert( "没有检索到结果" );
}
for(var i=0; i<result.routeNumber; i++){
map.addOverlay( result.getRoute( i ) );
}
} else {
alert( "检索失败" );
}
}
searchObj.transitSearch( "天安门", "大钟寺", "北京" );
}
setDrivingPolicy
设置驾车路线检索策略
Boolean searchObj.setDrivingPolicy(policy);
说明:
设置驾车路线检索策略,默认采用maps.SearchPolicy.DRIVING_TIME_FIRST策略。 如果设置非法值则认为设置失败,采用上次设置的检索策略并返回false;需在调用drivingSearch()方法前设置的策略才生效。
参数:
- policy: ( SearchPolicy ) 必选 驾车线路检索策略 可取值为maps.SearchPolicy.DRIVING_TIME_FIRST、maps.SearchPolicy.DRIVING_DIS_FIRST、maps.SearchPolicy.DRIVING_FEE_FIRST。
返回值:
Boolean : 设置成功返回true,否则返回false。
drivingSearch
驾车路线检索
Boolean searchObj.drivingSearch(start, startCity, end, endCity);
说明:
用于驾车路线检索,检索完成后触发onRouteSearchComplete()事件。 调用此方法时对象处于检索操作中,则终止上次检索操作,重新开始新的检索。
参数:
- start: ( String | Point ) 必选 驾车线路检索的起点地址名称或坐标 若起点地址为名称则需使用地名关键字,如起点为坐标则需要使用plus.maps.Point类型对象。
- startCity: ( String ) 必选 驾车线路检索的起点位置所属城市 如果start参数传入的为坐标只则所属城市可传入空字符串。
- end: ( String | Point ) 必选 驾车线路检索的终点地址名称或坐标 若终点地址为名称则需使用地名关键字,如终点为坐标则需要使用plus.maps.Point类型对象。
- endCity: ( String ) 必选 驾车线路检索的终点位置所属城市
返回值:
Boolean : 检索成功返回true,否则返回false。
示例:
function drivingSearch(){
// 检索从北京天安门到大钟寺的驾车线路
var searchObj = new plus.maps.Search( map );
searchObj.onRouteSearchComplete = function ( state, result ) {
console.log("onRouteSearchComplete: "+state+" , "+result.routeNumber);
if ( state == 0 ) {
if ( result.routeNumber <= 0 ) {
alert( "没有检索到结果" );
}
for(var i=0; i<result.routeNumber; i++){
map.addOverlay( result.getRoute( i ) );
}
} else {
alert( "检索失败" );
}
}
searchObj.drivingSearch( "天安门", "北京", "大钟寺", "北京" );
}
walkingSearch
步行路线检索
Boolean searchObj.walkingSearch(start, startCity, end, endCity);
说明:
用于步行路线检索,检索完成后触发onRouteSearchComplete()事件。 调用此方法时对象处于检索操作中,则终止上次检索操作,重新开始新的检索。
参数:
- start: ( String | Point ) 必选 步行线路检索的起点地址名称或坐标 若起点地址为名称则需使用地名关键字,如起点为坐标则需要使用plus.maps.Point类型对象。
- startCity: ( String ) 必选 步行线路检索的起点所属城市 如果start参数传入的为坐标只则所属城市可传入空字符串。
- end: ( String | Point ) 必选 步行线路检索的终点 若终点地址为名称则需使用地名关键字,如终点为坐标则需要使用plus.maps.Point类型对象。
- endCity: ( String ) 必选 步行线路检索的终点所属城市 如果end参数传入的为坐标只则所属城市可传入空字符串。
返回值:
Boolean : 检索成功返回true,否则返回false。
示例:
function walkingSearch(){
// 检索从北京天安门到大钟寺的步行线路
var searchObj = new plus.maps.Search( map );
searchObj.onRouteSearchComplete = function ( state, result ) {
console.log("onRouteSearchComplete: "+state+" , "+result.routeNumber);
if ( state == 0 ) {
if ( result.routeNumber <= 0 ) {
alert( "没有检索到结果" );
}
for(var i=0; i<result.routeNumber; i++){
map.addOverlay( result.getRoute( i ) );
}
} else {
alert( "检索失败" );
}
}
searchObj.walkingSearch( "天安门", "北京", "大钟寺", "北京" );
}
onPoiSearchComplete
兴趣点检索完成事件
searchObj.onPoiSearchComplete = function(state, result){
// JS Code.
}
说明:
示例:
function mapSearch(){
// 将检索到结果作为标点添加到地图中
var searchObj = new plus.maps.Search( map );
searchObj.onPoiSearchComplete = function( state, result ){
console.log("onPoiSearchComplete: "+state+" , "+result.currentNumber);
if ( state == 0 ) {
if ( result.currentNumber <= 0 ) {
alert( "没有检索到结果" );
}
for(var i=0; i<result.currentNumber; i++){
var pos = result.getPosition( i );
var marker = new plus.maps.Marker( pos.point );
marker.setLabel( pos.name );
map.addOverlay( marker );
}
} else {
alert( "检索失败" );
}
}
var pt = new plus.maps.Point( 116.404, 39.915 ); // 天安门坐标
searchObj.poiSearchNearBy( "肯德基", pt, 2000 );
}
onRouteSearchComplete
线路检索完成事件
searchObj.onRouteSearchComplete = function(state, result){
// JS Code.
}
说明:
示例:
function transitSearch(){
// 在北京检索从天安门到大钟寺的公交线路
var searchObj = new plus.maps.Search( map );
searchObj.onRouteSearchComplete = function ( state, result ) {
console.log("onRouteSearchComplete: "+state+" , "+result.routeNumber);
if ( state == 0 ) {
if ( result.routeNumber <= 0 ) {
alert( "没有检索到结果" );
}
for(var i=0; i<result.routeNumber; i++){
map.addOverlay( result.getRoute( i ) );
}
} else {
alert( "检索失败" );
}
}
searchObj.transitSearch( "天安门", "大钟寺", "北京" );
}
SearchPolicy
检索策略类型
说明:
在线路检索时设置检索策略时使用。
常量:
- TRANSIT_TIME_FIRST: (Number 类型 )时间优先检索策略类型常量,用于公交检索策略
- TRANSIT_TRANSFER_FIRST: (Number 类型 )最少换乘优先检索策略类型常量,用于公交检索策略
- TRANSIT_WALK_FIRST: (Number 类型 )最少步行距离优先检索策略类型常量,用于公交检索策略
- TRANSIT_FEE_FIRST: (Number 类型 )选择车票花销最少优先检索策略类型常量,用于公交检索策略
- DRIVING_DIS_FIRST: (Number 类型 )最短距离优先检索策略类型常量,用于驾车检索策略
- DRIVING_NO_EXPRESSWAY: (Number 类型 )无高速公路线路检索策略类型常量,用于驾车检索策略
- DRIVING_FEE_FIRST: (Number 类型 )最少费用优先检索策略类型常量,用于驾车检索策略
SearchPoiResult
保存位置检索、周边检索和范围检索返回的结果
属性:
- totalNumber: POI检索总结果数
- currentNumber: 当前页的POI检索结果数
- pageNumber: 本次POI检索的总页数
- pageIndex: 获取当前页的索引
- poiList: 本次POI检索结果数组
方法:
- getPosition: 获取指定索引的检索结果
totalNumber
POI检索总结果数
poiResult.totalNumber;
说明:
Number 类型 只读属性
POI检索总结果数,若没有检索到则返回0。
currentNumber
当前页的POI检索结果数
poiResult.currentNumber;
说明:
Number 类型 只读属性
当前页POI检索结果数,若没有检索到则返回0。
pageNumber
本次POI检索的总页数
poiResult.pageNumber;
说明:
Number 类型 只读属性
本次POI检索的总页数,若没有检索到则返回0。
pageIndex
获取当前页的索引
poiResult.pageIndex;
说明:
Number 类型 只读属性
当前页的索引值,从0开始,即0表示第一页。
poiList
本次POI检索结果数组
poiResult.poiList;
说明:
Array 类型 只读属性
POI检索结果数组,Array数组对象,数组内容为Position对象。
getPosition
获取指定索引的检索结果
Position poiResult.getPosition( index ) ;
说明:
如果index值超出范围则返回null对象。
参数:
无
返回值:
Position : 指定索引的检索结果。
SearchRouteResult
保存位置检索、周边检索和范围检索返回的结果
说明:
不可通过new操作符创建SearchRouteResult对象,在触发onRouteSearchComplete()时自动创建。
属性:
- startPosition: 线路的起点位置
- endPosition: 线路的终点位置
- routeNumber: 本次线路检索的总方案数
- routeList: 线路检索结果数组
方法:
- getRoute: 获取指定索引的线路方案
startPosition
线路的起点位置
routeResult.startPosition;
说明:
Position 类型 只读属性
线路检索结果的起始位置点对象。
endPosition
线路的终点位置
poiResult.endPosition;
说明:
Position 类型 只读属性
线路检索结果的终点位置点对象。
routeNumber
本次线路检索的总方案数
routeResult.routeNumber;
说明:
Number 类型 只读属性
线路检索结果的方案数目,若未检索到有效结果则返回0。
routeList
线路检索结果数组
routeResult.routeList;
说明:
Array 类型 只读属性
线路检索结果数组,Array数组对象,数组内容为Route对象。
getRoute
获取指定索引的线路方案
Route poiResult.getRoute( index );
说明:
如果index值超出范围则返回null对象。
参数:
- index: ( Number ) 必选 要获取结果的索引值
返回值:
Route : 指定索引的线路方案。
Position
检索结果的位置点
构造:
- Position( point ): 创建Position对象
属性:
Position( point )
创建Position对象
var posObj = new plus.maps.Position( point );
参数:
- point: ( Point ) 必选 位置点的经纬度坐标
返回值:
Position : 创建的Position对象。
示例:
// 创建检索位置点对象
var posObj = new plus.maps.Position( new plus.maps.Point(116.404,39.915) );
point
位置点的经纬度坐标
posObj.point;
说明:
Point 类型 只读属性
如果没有经纬度坐标信息(如果公交、地铁路线数据等),则其值为undefined。
address
位置点的地址信息
posObj.address;
说明:
String 类型 只读属性
如果没有位置点的地址信息则返回空字符串。
city
位置点的所属城市信息
posObj.city;
说明:
String 类型 只读属性
如果没有位置点的所属城市信息则返回空字符串。
name
位置点的名称
posObj.name;
说明:
String 类型 只读属性
如果没有位置点的名称则返回空字符串。
phone
位置点的电话信息
posObj.phone;
说明:
String 类型 只读属性
如果没有位置点的电话信息则返回空字符串。
postcode
位置点的邮编信息
posObj.postcode;
说明:
String 类型 只读属性
如果没有位置点的邮编信息则返回空字符串。
Route
地图中的路线对象
说明:
从Overlay对象继承而来,可通过Map对象的addOverlay()方法将对象添加地图中。
构造:
- Route( ptStart, ptEnd ): 创建Route对象
属性:
- startPoint: 路线起点地理坐标点
- endPoint: 路线终点地理坐标点
- pointCount: 路线坐标点段数
- pointList: 路线的地理坐标点数组
- distance: 路线总距离
- routeTip: 线路的提示信息
Route( ptStart, ptEnd )
创建Route对象
var routeObj = new plus.maps.Route( ptStart, ptEnd );
参数:
返回值:
Route : 创建的Route对象。
示例:
// 创建Route线路对象
var routeObj = new plus.maps.Route( new plus.maps.Point(116.404,39.915), new plus.maps.Point(116.347496,39.970191) );
startPoint
路线起点地理坐标点
routeObj.startPoint;
说明:
Point 类型 只读属性
endPoint
路线终点地理坐标点
routeObj.endPoint;
说明:
Point 类型 只读属性
pointCount
路线坐标点段数
routeObj.pointCount;
说明:
Point 类型 只读属性
pointList
路线的地理坐标点数组
routeObj.pointList;
说明:
Array 类型 只读属性
路线的地理坐标点数组,数组中保存Point对象。
distance
路线总距离
routeObj.distance;
说明:
Number 类型 只读属性
路线从起始点到终点的距离,单位为米。
routeTip
线路的提示信息
routeObj.routeTip;
说明:
String 类型 只读属性
线路提示信息,没有提示信息则返回空字符串。
GeocodeCallback
地理编码转换成功的回调函数
void onGeocodeSuccess( Event event ) {
// JS code.
var address = event.address; // 转换后的地理位置
var point = event.coord; // 转换后的坐标信息
var coordType = event.coordType; // 转换后的坐标系类型
}
说明:
在地理编码转换成功触发,并返回转换结果。
参数:
- event: ( Event ) 可选 转换后的坐标信息 可通过event.coord(Point类型)获取转换后的坐标值。 可通过event.coordType(String类型)获取转换后的坐标系类型,“wgs84”:表示WGS-84坐标系; “gcj02”:表示国测局经纬度坐标系; “bd09”:表示百度墨卡托坐标系; “bd09ll”:表示百度经纬度坐标系。
返回值:
void : 无
CoordinateConvertCallback
坐标转换成功的回调函数
void onConvertSuccess( Event event ) {
// JS code.
var point = event.coord; // 转换后的坐标值
var coordType = event.coordType; // 转换后的坐标系类型
}
说明:
在坐标转换成功触发,并返回转换结果。
参数:
- event: ( Event ) 可选 转换后的坐标信息 可通过event.coord(Point类型)获取转换后的坐标值。 可通过event.coordType(String类型)获取转换后的坐标系类型,“wgs84”:表示WGS-84坐标系; “gcj02”:表示国测局经纬度坐标系; “bd09”:表示百度墨卡托坐标系; “bd09ll”:表示百度经纬度坐标系。
返回值:
void : 无
DistanceCalculateCallback
距离计算成功的回调函数
void onCalculateSuccess( Event event ) {
// JS code.
var distance = event.distance; // 转换后的距离值
}
说明:
在距离计算成功触发,并返回计算结果。
参数:
- event: ( Event ) 可选 距离计算后的信息 可通过event.distance(Number类型)获取计算后的距离值,单位为米(m)。
返回值:
void : 无
AreaCalculateCallback
地理区域面积计算成功的回调函数
void onCalculateSuccess( Event event ) {
// JS code.
var area = event.area; // 计算后的面积值
}
说明:
在地理区域面积计算成功触发,并返回计算结果。
参数:
- event: ( Event ) 可选 地理区域面积计算后的信息 可通过event.area(Number类型)获取计算后的面积值,单位为平方米。
返回值:
void : 无
UserLocationCallback
获取用户当前位置信息成功回调
void onSuccess( state, point ) {
// Get location code
}
参数:
- state: ( Number ) 必选 获取用户位置操作状态码,0表示成功,其它为错误码
- point: ( Point ) 必选 位置经纬度坐标,如果获取操作失败则为null对象
返回值:
void : 无
ClickEventHandler
用户点击地图回调事件
void onClick( point ) {
// Click code
}
参数:
- point: ( Point ) 必选 用户在地图上点击的坐标点
返回值:
void : 无
StatusChangedEventHandler
地图状态变化回调事件
void onStatusChanged( event ) {
// Click code
var target = event.target; // 状态变化的地图对象(plus.maps.Map)
var bounds = event.bounds; // 地图的可视地理区域(plus.maps.Bounds)
var center = event.center; // 地图的中心点坐标(plus.maps.Point)
var zoom = event.zoom; // 地图的缩放级别(Number)
}
参数:
- event: ( Object ) 必选 地图状态变化对象 可通过event.target(plus.maps.Map类型)获取状态变化的地图对象; 可通过event.bounds(plus.maps.Bounds类型)获取地图当前的可视区域; 可通过event.center(plus.maps.Point类型)获取地图当前的中心点坐标; 可通过event.zoom(Number类型)获取地图当前的缩放级别。
返回值:
void : 无
OverlayClickEventHandler
用户点击地图覆盖物回调事件
void onClick( overlay ) {
// Click code
}
参数:
- overlay: ( Overlay ) 必选 用户在地图上点击的覆盖物对象 overlay可以是Marker、Bubble、Circle、Polyline、Polygon对象的引用。
返回值:
void : 无
OverlayDragEventHandler
用户拖拽覆盖物回调事件
void onDrag( target ) {
// Click code
var marker = target; // 拖拽的覆盖物对象
}
参数:
- target: ( Object ) 必选 拖拽事件对象 可通过target(Overlay类型)获取拖拽的覆盖物对象,target可以是Marker、Bubble、Circle、Polyline、Polygon对象的引用。
返回值:
void : 无
PoiSearchCallback
兴趣点检索完成事件
void onPoiSearchComplete( state, result ) {
// JS code.
}
说明:
在兴趣点检索完成时触发,并返回检索结果。
参数:
- state: ( Number ) 必选 检索结果状态号0表示检索正确并返回结果,其它表示检索错误。
- result: ( SearchPoiResult ) 必选 POI检索结果若检索错误,则为null对象。
返回值:
void : 无
RouteSearchCallback
线路检索完成事件
void onRouteSearchComplete( state, result ) {
// JS code.
}
说明:
在线路检索完成时触发,并返回检索结果。
参数:
- state: ( Number ) 必选 检索结果状态号0表示检索正确并返回结果,其它表示检索错误。
- result: ( SearchRouteResult ) 必选 线路检索结果若检索错误,则为null对象。
返回值:
void : 无
SuccessCallback
地图操作成功回调函数
void onSuccess(){
// Success code.
}
说明:
地图操作成功后触发回调函数。
参数:
无
返回值:
void : 无
ErrorCallback
地图操作失败的回调函数
function void onError( error ) {
// Handle error
var code = error.code; // 错误编码
var message = error.message; // 错误描述信息
}
参数:
- error: ( Exception ) 必选 地图操作的错误信息 可通过error.code(Number类型)获取错误编码; 可通过error.message(String类型)获取错误描述信息。
返回值:
void : 无