html5在线api,HTML5+ API Reference

Maps模块管理地图控件,用于在web页面中显示地图控件,提供各种接口操作地图控件,如添加标点、路线等。通过plus.maps可获取地图管理对象。

方法:

openSysMap: 调用系统第三方程序进行导航

create: 创建Map对象

getMapById: 查找已经创建的Map对象

对象:

Map: 地图控件对象

MapStyles: 地图控件对象的参数

Point: Point对象用于表示地图元素的坐标

Bounds: 地理区域

MapType: 地图视图类型

Overlay: 地图覆盖物基类对象

Marker: 地图上显示的标点对象

Bubble: 地图上显示的气泡对象

Circle: 地图上显示的圆圈对象

Polyline: 地图上显示的折线对象

Polygon: 地图上显示的多边形对象

Search: 地图检索对象

SearchPoiResult: 保存位置检索、周边检索和范围检索返回的结果

SearchRouteResult: 保存位置检索、周边检索和范围检索返回的结果

Position: 检索结果的位置点

Route: 地图中的路线对象

回调方法:

权限:

permissions

{

// ...

"permissions":{

// ...

"Maps": {

"description": "地图"

}

}

}

调用系统第三方程序进行导航

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 );

创建Map对象

Map plus.maps.create(id, styles);

说明:

调用此方法创建后并不会显示,需要调用Webview窗口的append方法将其添加到Webview窗口后才能显示。

注意:此时需要通过styles参数的top/left/width/height属性设置控件的位置及大小。

参数:

id:

(

String

)

必选地图控件对象的全局标识

可用于通过plus.maps.getMapById()方法查找已经创建的地图控件对象。

styles:

设置Map控件的位置及大小等。

返回值:

Map

: Map地图控件对象

示例:

Map Example

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);

}

}

*{

-webkit-user-select: none;

}

html,body{

margin: 0px;

padding: 0px;

height: 100%;

}

创建地图控件

查找已经创建的Map对象

Map plus.maps.getMapById(id);

说明:

调用此方法查找指定id的Map对象,如果不存在则返回null。

参数:

id:

(

String

)

必选Map对象的全局标识

如果存在多个相同标识的Map对象,则返回第一个查找到的Map对象。

如果不存在指定标识的Map对象,则返回null。

返回值:

Map

: Map地图控件对象

示例:

Map Example

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');

}

}

*{

-webkit-user-select: none;

}

html,body{

margin: 0px;

padding: 0px;

height: 100%;

}

创建地图控件

查找地图控件

地图控件对象

构造:

方法:

geocode: 静态方法,地理编码

addOverlay: 向地图中添加覆盖物

centerAndZoom: 设置地图初始中心点和缩放级别

clearOverlays: 清除地图中所有覆盖物对象

close: 关闭地图控件

getBounds: 获取当前地图可视范围的地理区域

getCenter: 获取地图中心点位置

getCurrentCenter: 获取当前地图显示的地图中心点位置

getMapType: 获取地图的显示类型

getZoom: 获取地图的缩放级别

hide: 隐藏地图控件

isTraffic: 获取是否打开地图交通信息图层

removeOverlay: 从地图中删除覆盖物对象

reset: 重置地图

resize: 重设地图控件大小

setCenter: 设置地图的中心点

setMapType: 设置地图的视图类型

setStyles: 设置地图控件的配置参数

setTraffic: 是否打开地图交通信息图层

setZoom: 设置地图的缩放级别

show: 显示地图控件

showZoomControls: 设置是否显示地图内置缩放控件

事件:

创建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:

返回值:

Map

: Map地图控件对象

示例:

Map Example

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);

#map {

width: 100%;

position: fixed;

top: 0px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

地图加载中...

静态方法,计算面积

void plus.maps.Map.calculateArea( bounds, successCallback, errorCallback );

说明:

计算指定地理区域的面积,单位为平方米。

注:此功能仅百度地图支持,高德地图暂不支持此功能。

参数:

bounds:

successCallback:

地理区域面积计算成功时触发,并返回计算的面积值。

errorCallback:

地理区域面积计算失败时触发,并返回错误信息。

返回值:

void

: 无

示例:

Map Example

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));

} );

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

计算面积

获取地理区域面积

地图加载中...

静态方法,计算距离

void plus.maps.Map.calculateDistance( pointStart, pointEnd, successCallback, errorCallback );

说明:

计算从pointStart坐标点到pointEnd坐标的实际直线距离,单位为米(m)。

参数:

pointStart:

(

Point

)

必选起点的坐标

pointEnd:

(

Point

)

可选终点的坐标

successCallback:

距离计算成功时触发,并返回计算的距离值。

errorCallback:

距离计算失败时触发,并返回错误信息。

返回值:

void

: 无

示例:

Map Example

// 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);

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

计算距离

静态方法,坐标转换

void plus.maps.Map.convertCoordinates( point, options, successCallback, errorCallback );

说明:

将第三方坐标系坐标转换成当前地图的坐标系坐标。

转换成功通过successCallback返回,转换失败则通过errorCallback返回。

参数:

point:

(

Point

)

必选要转换的坐标

successCallback:

坐标转换成功时触发,并返回转后的坐标值。

errorCallback:

坐标转换失败时触发,并返回错误信息。

返回值:

void

: 无

平台支持:

Android

- 2.3+

(支持)

:

仅百度地图支持此功能。

iOS

- 5.1+

(支持)

:

仅百度地图支持此功能。

示例:

Map Example

// 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);

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

坐标转换

静态方法,地理编码

void plus.maps.Map.geocode( address, options, successCallback, errorCallback );

说明:

将地理位置信息转换为坐标点。

转换成功通过successCallback返回,转换失败则通过errorCallback返回。

参数:

address:

(

String

)

必选要转换的地理位置信息

越详细的地址信息越容易转换,如XX路XX号XX大厦。

options:

successCallback:

地理编码转换成功时触发,并返回转换后的坐标信息。

errorCallback:

地理编码转换失败时触发,并返回错误信息。

返回值:

void

: 无

示例:

Map Example

// 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);

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

地理编码

静态方法,反向地理编码

void plus.maps.Map.reverseGeocode( point, options, successCallback, errorCallback );

说明:

将坐标点转换为地理位置信息。

转换成功通过successCallback返回,转换失败则通过errorCallback返回。

参数:

point:

(

Point

)

必选要转换的坐标

options:

successCallback:

反向地理编码转换成功时触发,并返回转换后的地址位置信息。

errorCallback:

反向地理编码转换失败时触发,并返回错误信息。

返回值:

void

: 无

示例:

Map Example

// 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);

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

反向地理编码

向地图中添加覆盖物

Boolean mapObj.addOverlay( overlay );

说明:

此方法用于向地图中添加覆盖物。

支持各种从maps.Overlay对象继承的各种覆盖物对象;

如果添加不支持的对象则直接返回false;

同一覆盖物对象只能添加到地图中一次,已在地图中的覆盖物再次添加时则返回false。

参数:

overlay:

返回值:

Boolean

: 添加成功返回true,失败返回false。

示例:

Map Example

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);

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

向地图中添加覆盖物

添加标点

地图加载中...

设置地图初始中心点和缩放级别

void mapObj.centerAndZoom( center, zoom );

说明:

用于设置地图的初始中心点和缩放级别,通常在创建地图后立即调用。

默认中心点为天安门,默认缩放级别为12;

该方法设置的中心点和缩放级别可通过reset()方法恢复;

如果在地图显示后调用将改变地图的中心点和缩放级别并立即更新,并将初始值更新。

参数:

center:

(

Point

)

必选地图初始化的中心点坐标

zoom:

(

Number

)

必选地图初始化的缩放级别

返回值:

void

: 无

示例:

Map Example

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);

#map {

width: 100%;

position: fixed;

top: 0px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

地图加载中...

清除地图中所有覆盖物对象

void mapObj.clearOverlays();

说明:

此方法用于清除地图中所有覆盖物对象。

清除地图中的覆盖物对象后会自动更新地图视图。

参数:

返回值:

void

: 无

示例:

Map Example

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=[];

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

清除地图中所有覆盖物对象

添加标点

清除标点

地图加载中...

关闭地图控件

void mapObj.close();

说明:

关闭地图控件将会销毁地图使用的资源,不可再使用。

参数:

返回值:

void

: 无

示例:

Map Example

// 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);

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

关闭地图控件

显示地图

关闭地图

地图加载中...

获取当前地图可视范围的地理区域

Bounds mapObj.getBounds();

说明:

当旋转或俯视时,是当前地图可视范围的最大外接矩形地理区域。

参数:

返回值:

Bounds

: 获取到

示例:

Map Example

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()) );

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

获取当前地图显示的地理区域

获取地理区域

地图加载中...

获取地图中心点位置

Point mapObj.getCenter();

说明:

此方法用于获取设置的地图中心点位置(centerAndZoom/setCenter)。

参数:

返回值:

Point

: 地图中心点坐标

示例:

Map Example

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) );

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

获取地图中心点

GetCenter

地图加载中...

获取当前地图显示的地图中心点位置

Boolean mapObj.getCurrentCenter( callback );

说明:

此方法用于获取当前地图显示的地图中心点位置,获取成功后通过callback回调返回。

参数:

callback:

返回值:

Boolean

: 执行获取操作成功则返回true,一定会执行通知结果方法;否则返回false。

示例:

Map Example

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!" );

}

} );

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

获取当前地图显示的地图中心点位置

获取中心位置

地图加载中...

获取地图的显示类型

void mapObj.getMapType();

参数:

返回值:

MapType

: 地图视图的显示类型

示例:

Map Example

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?"卫星视图":"街道视图" );

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

设置地图类型

视图类型

地图加载中...

获取用户的当前位置信息

Boolean mapObj.getUserLocation( callback );

说明:

此方法用于获取用户的当前位置信息,获取成功后通过callback回调返回。

获取用户当前位置信息将打开定位设备。

参数:

callback:

返回值:

Boolean

: 执行获取操作成功则返回true,一定会执行通知结果方法;否则返回false。

示例:

Map Example

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!" );

}

} );

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

获取用户的当前位置信息

获取位置

地图加载中...

获取地图的缩放级别

Number mapObj.getZoom();

说明:

当前地图显示的真实缩放级别。

参数:

返回值:

Number

: 地图视图的缩放级别

示例:

Map Example

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() );

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

获取地图的缩放级别

GetZoom

地图加载中...

隐藏地图控件

void mapObj.hide();

说明:

此方法用于隐藏地图控件,通常在显示后调用此方法来隐藏。

如果地图已经隐藏再调用此方法将无效果。

参数:

返回值:

void

: 无

示例:

Map Example

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();

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

隐藏地图控件

显示地图

隐藏地图

地图加载中...

获取是否显示用户位置

Boolean mapObj.isShowUserLocation();

参数:

返回值:

Boolean

: 地图中显示用户位置则返回true,否则返回false。

示例:

Map Example

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() );

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

获取是否显示用户位置

显示用户位置

关闭用户位置

是否显示用户位置

地图加载中...

获取是否显示地图内置缩放控件

Boolean mapObj.isShowZoomControls();

参数:

返回值:

Boolean

: 地图中已显示内置缩放控件则返回true,否则返回false

示例:

Map Example

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() );

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

获取是否显示地图内置缩放控件

显示缩放控件

关闭缩放控件

是否显示缩放控件

地图加载中...

获取是否打开地图交通信息图层

Boolean mapObj.isTraffic();

参数:

返回值:

Boolean

: 地图中显示交通信息图层则返回true,否则返回false。

示例:

Map Example

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() );

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

获取是否打开地图交通信息图层

显示交通信息

关闭交通信息

是否显示交通信息

地图加载中...

从地图中删除覆盖物对象

void mapObj.removeOverlay( overlay );

说明:

此方法用于从地图中删除覆盖物对象。

支持各种从maps.Overlay对象继承的各种覆盖物对象。

参数:

overlay:

返回值:

void

: 无

示例:

Map Example

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;

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

向地图中添加覆盖物

添加标点

删除标点

地图加载中...

重置地图

void mapObj.reset();

说明:

此方法用于重新设置地图,恢复地图的初始化时的中心点和缩放级别。

该方法将导致显示内容将立即更新。

参数:

返回值:

void

: 无

示例:

Map Example

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();

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

重置地图 - 用户操作移动、缩放地图后重置上次设置的中心点和缩放级别

Reset

地图加载中...

重设地图控件大小

void mapObj.resize();

说明:

此方法用于重新计算地图控件大小,保持与构造时传入DOM元素的大小及位置一致。

参数:

返回值:

void

: 无

示例:

Map Example

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();

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

重设地图控件大小

Resize

地图加载中...

设置地图的中心点

void mapObj.setCenter( center );

说明:

此方法用于设置地图的中心点,用于切换当前显示地图位置。

该方法改变中心点后地图显示内容将立即更新;

该方法不会改变地图显示的缩放级别。

参数:

center:

(

Point

)

必选要切换到的中心点坐标

返回值:

void

: 无

示例:

Map Example

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 );

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

设置地图的中心点

SetCenter

地图加载中...

设置地图的视图类型

void mapObj.setMapType( type );

说明:

此方法用于设置地图类型,默认为普通街道视图。

参数:

type:

返回值:

void

: 无

示例:

Map Example

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 );

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

设置地图类型

街道视图

卫星视图

地图加载中...

设置地图控件的配置参数

void mapObj.setStyles(styles);

说明:

用于动态更新地图控件的参数。

参数:

styles:

返回值:

void

: 无

示例:

Map Example

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'// 调整地图的位置

});

}

*{

-webkit-user-select: none;

}

html,body{

margin: 0px;

padding: 0px;

height: 100%;

}

创建地图控件

更新地图控件

是否打开地图交通信息图层

void mapObj.setTraffic( traffic );

说明:

此方法用于设置是否打开地图交通信息图层,默认不显示。

该方法改变是否显示交通图层后地图显示内容将立即更新。

参数:

traffic:

(

Boolean

)

必选设置是否显示交通信息图层

返回值:

void

: 无

示例:

Map Example

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 );

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

设置是否打开地图交通信息图层

显示交通信息

关闭交通信息

地图加载中...

设置地图的缩放级别

void mapObj.setZoom( zoom );

说明:

此方法用于设置地图的缩放级别,用于切换当前显示地图缩放级别。

该方法改变缩放级别后地图显示内容将立即更新;

该方法不会改变地图显示区域,以当前地图显示的中心点位置来缩放地图。

参数:

zoom:

(

Number

)

必选要设置的新的缩放级别,有效范围为3-21(高德地图为3-20,百度地图为4-21)

返回值:

void

: 无

示例:

Map Example

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 );

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

设置地图的缩放级别

SetZoom

地图加载中...

显示地图控件

void mapObj.show();

说明:

此方法用于显示地图控件,通常在隐藏后调用此方法来显示。

如果地图已经显示再调用此方法将无效果。

参数:

返回值:

void

: 无

示例:

Map Example

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();

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

显示地图控件

显示地图

隐藏地图

地图加载中...

显示用户位置

void mapObj.showUserLocation( display );

说明:

此方法将在地图上显示用户位置信息。

显示用户位置将打开定位设备。

参数:

display:

(

Boolean

)

必选是否显示用户位置

返回值:

void

: 无

示例:

Map Example

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 );

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

显示用户位置

显示用户位置

关闭用户位置

地图加载中...

设置是否显示地图内置缩放控件

void mapObj.showZoomControls( display );

说明:

此方法将在地图上显示内置缩放控件。

参数:

display:

(

Boolean

)

必选是否显示地图内置缩放控件

返回值:

void

: 无

示例:

Map Example

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 );

}

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

设置是否显示地图内置缩放控件

显示缩放控件

关闭缩放控件

地图加载中...

用户点击地图事件

mapObj.onclick = function ( point ) {

// JS code.

}

说明:

示例:

Map Example

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);

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

用户点击地图事件

地图加载中...

地图状态改变事件

mapObj.onstatuschanged = function( event ){

// JS code.

}

说明:

用户拖动、缩放地图等操作完成后触发。

示例:

Map Example

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);

#map {

width: 100%;

position: fixed;

top: 100px;

bottom: 0px;

line-height: 200px;

text-align: center;

background: #FFFFFF;

}

地图状态改变事件
用户拖动或缩放时触发。

地图加载中...

地图控件对象的参数

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:

可设置普通街道视图、卫星视图,默认值为普通街道视图。

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"。

地理编码转换的参数

属性:

coordType: (String

类型

)源数据的坐标系类型

仅在反向地理编码转换时生效。

“wgs84”:表示WGS-84坐标系; “gcj02”:表示国测局经纬度坐标系; “bd09”:表示百度墨卡托坐标系; “bd09ll”:表示百度经纬度坐标系;

默认使用wgs84坐标系。

city: (String

类型

)源地址所属的城市

仅在地理编码转换时生效,如果不指定则在全国范围内区配转换。

地图坐标转换的参数

属性:

coordType: (String

类型

)源数据的坐标系类型

“wgs84”:表示WGS-84坐标系; “gcj02”:表示国测局经纬度坐标系; “bd09”:表示百度墨卡托坐标系; “bd09ll”:表示百度经纬度坐标系;

默认使用wgs84坐标系。

Point对象用于表示地图元素的坐标

说明:

常用语对地图上元素进行定位时使用。

构造:

方法:

setLng: 设置坐标点的经度

getLng: 获取坐标的经度

setLat: 设置坐标的纬度

getLat: 获取坐标的纬度

equals: 判断两个坐标点是否相等

创建Point对象

var ptObj = new plus.maps.Point( lng, lat );

参数:

lng:

(

Number

)

必选坐标的经度

lat:

(

Number

)

必选坐标的纬度

返回值:

Point

: 创建的坐标对象

示例:

// 创建地图坐标对象

var pt1 = new plus.maps.Point( 116.123, 36.456 );

设置坐标点的经度

void ptObj.setLng( lng );

参数:

lng:

(

Number

)

必选要设置坐标的经度

返回值:

void

: 无

获取坐标的经度

Number ptObj.getLng();

参数:

返回值:

Number

: 坐标的经度

设置坐标的纬度

void ptObj.setLat( lat );

参数:

返回值:

void

: 无

获取坐标的纬度

Number ptObj.getLat();

参数:

返回值:

Number

: 坐标的纬度

判断两个坐标点是否相等

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

地理区域

说明:

有西南及东北坐标点数据组成的矩形区域。

构造:

方法:

setNorthEast: 设置地理区域的东北坐标点

getNorthEast: 地理区域的东北坐标点

setSouthWest: 设置地理区域的西南坐标点

getSouthWest: 地理区域的西南坐标点

contains: 判断制定的坐标是否在地理区域中

equals: 判断两个地理区域是否相等

getCenter: 获取地理区域的中心点坐标

创建Bounds对象

var bounds = new plus.maps.Bounds(northeast, southwest);

参数:

northeast:

(

Point

)

必选东北坐标点

southwest:

(

Point

)

必选西南坐标点

返回值:

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对象

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 );

设置地理区域的东北坐标点

void bounds.setNorthEast( point );

说明:

原方法名为setNorthEase,HBuilderX2.5.5+版本后已修正,原方法仍兼容支持。

参数:

point:

(

Point

)

必选要设置的坐标点

返回值:

void

: 无

地理区域的东北坐标点

Point bounds.getNorthEast();

说明:

原方法名为getNorthEase,HBuilderX2.5.5+版本后已修正,原方法仍兼容支持。

参数:

返回值:

Point

: 东北坐标点

设置地理区域的西南坐标点

void bounds.setSouthWest( point );

参数:

point:

(

Point

)

必选要设置的坐标点

返回值:

void

: 无

地理区域的西南坐标点

Point bounds.getSouthWest();

参数:

返回值:

Point

: 西南坐标点

判断制定的坐标是否在地理区域中

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

判断两个地理区域是否相等

Boolean bounds.equals( 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

获取地理区域的中心点坐标

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_NORMAL: (Number

类型

)普通街道视图类型

地图视图类型常量,普通街道视图。

MAPTYPE_SATELLITE: (Number

类型

)卫星视图

地图视图类型常量,卫星视图。

地图覆盖物基类对象

interface Overlay {

function Boolean isVisible();

function void show();

function void hide();

}

说明:

Overlay是地图上显示元素的基类,用于抽象地图元素,不用于实例化。

方法:

isVisible: 判断地图覆盖物是否可见

show: 显示地图上的覆盖物

hide: 隐藏地图上的覆盖物

判断地图覆盖物是否可见

Boolean overlayObj.isVisible();

说明:

地图覆盖物对象默认为可见;地图覆盖物对象是否可见由其自身状态决定,不管其是否被添加到地图层中。

参数:

返回值:

Boolean

: 覆盖物在地图上可见则返回true,否则返回false。

显示地图上的覆盖物

void overlayObj.show();

说明:

常用于地图覆盖物在隐藏后调用此方法来显示。

只有添加到地图上的覆盖物才能看到效果;

如果覆盖物对象已经在地图上显示再调用此方法将无效果。

参数:

返回值:

void

: 无

隐藏地图上的覆盖物

void overlayObj.show();

说明:

常用于地图覆盖物在显示后调用此方法来隐藏。

只有添加到地图上的覆盖物才能看到效果;

如果覆盖物对象已经在地图上隐藏再调用此方法将无效果。

参数:

返回值:

void

: 无

地图上显示的标点对象

说明:

从Overlay对象继承而来,可通过Map对象的addOverlay()方法将对象添加地图中。

构造:

Marker( point ): 创建地图标点Marker对象

方法:

bringToTop: 覆盖物显示到最上层

setPoint: 设置标点对象的坐标

getPoint: 获取标点的坐标

setIcon: 设置标点上显示的图标

setIcons: 设置标点上显示的图标数组

setLabel: 设置标点上显示的文本标注

getLabel: 获取标点上显示的文本标注

setBubble: 设置标点的气泡内容

getBubble: 获取标点上显示的文本标注

hideBubble: 隐藏标点上显示的气泡

setDraggable: 设置标点的是否允许拖拽

isDraggable: 获取标点是否允许拖拽

事件:

onclick: 用户点击地图标点事件

onDrag: 用户拖拽标点事件

创建地图标点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);

覆盖物显示到最上层

void overlayObj.bringToTop();

说明:

常用于覆盖物相互覆盖时调整覆盖物的显示顺序。

只有添加到地图上的覆盖物才能看到效果;

如果覆盖物对象已经在地图上隐藏再调用此方法将无效果。

参数:

返回值:

void

: 无

平台支持:

Android

- 2.3+

(支持)

iOS

- 5.1+

(不支持)

:

调用此API无任何效果。

设置标点对象的坐标

void markObj.setPoint( point );

说明:

标点在设置新坐标后将在地图上立即更新标点位置。

参数:

point:

(

Point

)

必选要设置标点的坐标

返回值:

void

: 无

获取标点的坐标

Point markObj.getPoint();

参数:

返回值:

Point

: 标点的坐标对象

设置标点上显示的图标

void markObj.setIcon( icon );

说明:

若未设置则显示默认标点图标,已添加的标点在设置新值后将在地图上立即更新标点内容。

参数:

icon:

(

String

)

必选要设置标点图标的URL地址

仅支持本地图标URL地址,支持png、jpg/jpeg、bmp格式。

返回值:

void

: 无

设置标点上显示的图标数组

void markObj.setIcons( icons, period );

说明:

设置图标数组后则按照指定的间隔时间轮播数组中图标。

设置图标数组后将忽略setIcon方法设置的图标,未设置则显示setIcon设置的图标。

参数:

icons:

(

Array[

String

]

)

必选要设置标点图标数组

图标数组中仅支持本地图标URL地址,支持png、jpg/jpeg、bmp格式。

注:所有图片应该使用统一的分辨率,否则可能会显示不正常。

返回值:

void

: 无

设置标点上显示的文本标注

void markObj.setLabel( label );

说明:

若未设置则不显示标注(默认为空字符串),已添加的标点在设置新值后将在地图上立即更新标点内容。

参数:

label:

(

String

)

必选要设置标点的标注文字

返回值:

void

: 无

获取标点上显示的文本标注

String markObj.getLabel();

参数:

返回值:

String

: 标点的标注文本内容

设置标点的气泡内容

void markObj.setBubble( buuble, pop );

说明:

设置气泡内容后,用户点击标点时弹出则弹出气泡。

注意:用户点击标点时先弹出标点关联的气泡,再响应标点的onclick事件。

参数:

buuble:

pop:

(

Boolean

)

可选是否默认弹出气泡

true表示弹出显示气泡,false表示不弹出显示气泡(当用户点击时才弹出),默认值为false。

当添加标点时自动弹出显示气泡,如果已经添加标点则调用setBubble时弹出显示气泡。

返回值:

void

: 无

获取标点上显示的文本标注

Bubble markObj.getBubble();

说明:

如果没有设置关联的气泡对象则返回null。

参数:

返回值:

Bubble

: 标点关联的气泡对象

隐藏标点上显示的气泡

void markObj.hideBubble();

说明:

如果没有设置关联的气泡对象或者气泡对象没有弹出显示,则不做任何操作。

参数:

返回值:

void

: 无

设置标点的是否允许拖拽

void markObj.setDraggable( draggable );

说明:

设置标点可拖拽后,用户按住标点后拖动,标点会跟随手的拖拽而移动。

拖拽后会更新标点的坐标信息。

注:拖动前需要先在标点上长按。

参数:

draggable:

(

Boolean

)

必选要设置标点是否可拖拽

true表示标点可拖拽,false表示标点不可拖拽,默认值为false。

返回值:

void

: 无

获取标点是否允许拖拽

Boolean markObj.isDraggable();

参数:

返回值:

Boolean

: true表示标点可拖拽,false表示标点不可拖拽

用户点击地图标点事件

markObj.onclick = function ( marker ) {

// Click code.

}

说明:

示例:

// 用户点击标点将弹出标点上的文本

markObj.onclick = function ( marker ) {

alert( "Clicked:" + markObj.getLabel() );

}

用户拖拽标点事件

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()) );

}

地图上显示的气泡对象

说明:

此对象不能直接添加到地图上显示,只可关联到地图标点覆盖物上,用户点击标点时弹出显示。

构造:

方法:

setIcon: 设置气泡上显示的图标

setLabel: 设置气泡上显示的文字内容

getLabel: 获取气泡上显示的文字内容

belongMarker: 获取气泡所属的标点对象

loadImage: 从图片加载气泡显示的内容

loadImageDataURL: 从图片数据加载气泡显示的内容

事件:

onclick: 用户点击气泡事件

创建气泡对象

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);

设置气泡上显示的图标

void bubObj.setIcon( icon );

说明:

若为设置则无默认图标,已添加的显示的气泡在设置新值后将在地图上立即更新内容。

参数:

icon:

(

String

)

必选设置气泡图标的URL地址

仅支持本地资源,支持png、jpg/jpeg、bmp格式图片资源。

返回值:

void

: 无

设置气泡上显示的文字内容

void bubObj.setLabel( label );

说明:

若未设置则不显示文字(默认为空字符串),已添加的显示的气泡在设置新值后将在地图上立即更新内容。

参数:

label:

(

String

)

必选要设置气泡上显示的文字

返回值:

void

: 无

获取气泡上显示的文字内容

String bubObj.getLabel();

参数:

返回值:

String

: 气泡上显示的文字内容

获取气泡所属的标点对象

Marker bubObj.belongMarker();

参数:

返回值:

Marker

: 气泡所属的标点对象。

从图片加载气泡显示的内容

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

: 无

从图片数据加载气泡显示的内容

void bubObj.loadImageDataURL( data );

说明:

通过加载图片数据来自定义气泡显示的内容,加载图片后将清空气泡使用的图标及文字内容。

图片数据可通过Canvas自定义绘制后调用toDataURL来获取。

参数:

data:

(

String

)

必选要加载的图片数据

图片数据为经过Base64URL编码转换后的字符串,如果图片数据无效则使用之前的内容显示。

返回值:

void

: 无

用户点击气泡事件

bubObj.onclick = function ( bubble ) {

// JS code.

}

说明:

示例:

// 用户点击气泡将弹出气泡上的标题信息

bubObj.onclick = function ( bubble ) {

alert( "Clicked:" + bubble.getLabel() );

}

地图上显示的圆圈对象

说明:

从Overlay对象继承而来,可通过Map对象的addOverlay()方法将对象添加地图中。

构造:

方法:

创建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);

设置圆圈中心点的经纬度坐标

void circleObj.setCenter( point );

说明:

该方法设置将导致地图中的圆圈立即更新。

参数:

point:

(

Point

)

必选圆圈的中心点坐标

返回值:

void

: 无

示例:

// 设置新的圆圈中心点

circleObj.setCenter( new plus.maps.Point(116.0,39.0) );

获取圆圈中心点的坐标

Point circleObj.getCenter();

参数:

返回值:

Point

: 圆圈中心点的坐标对象

设置圆圈的半径,单位为米

void circleObj.setRadius( radius );

说明:

该方法设置将导致地图中的圆圈立即更新。

参数:

radius:

(

Number

)

必选圆圈的半径,单位为米

返回值:

void

: 无

示例:

// 设置新的圆圈半径

circleObj.setRadius( 1000 );

获取圆圈的半径

Number circleObj.getRadius();

参数:

返回值:

Number

: 圆圈的半径,单位为米。

设置圆圈的边框颜色

void circleObj.setStrokeColor( color );

说明:

圆圈默认的圆圈边框颜色为黑色"#000000",该方法设置将导致地图中的圆圈立即更新。

参数:

color:

(

String

)

必选圆圈边框的线条颜色值

格式为"#RRGGBB",如红色为"#ff0000"。

返回值:

void

: 无

示例:

// 设置圆圈的边框颜色为红色

circleObj.setStorkeColor( "#ff0000" );

获取圆圈的边框颜色

String circleObj.getStrokeColor();

参数:

返回值:

String

: 圆圈边框的线条颜色,格式为"#RRGGBB",如黑色为"#000000"。

设置圆圈的边框透明度

void circleObj.setStrokeOpacity( opacity );

说明:

圆圈默认值为不透明。

如果设置的值不合法则保持原有的透明度;该方法设置将导致地图中的圆圈立即更新。

参数:

opacity:

(

Number

)

必选圆圈边框的透明度

取值范围为0-1,0表示全透明,1表示不透明。

返回值:

void

: 无

示例:

// 设置圆圈边框为半透明

circleObj.setStrokeOpacity( 0.5 );

获取圆圈边框的透明度

Number circleObj.getStrokeOpacity();

参数:

返回值:

Number

: 圆圈的透明度,取值范围为0-1,0表示全透明,1表示不透明。

设置圆圈的填充颜色

void circleObj.setFillColor( color );

说明:

圆圈默认的圆圈填充颜色为无色,该方法设置将导致地图中的圆圈立即更新。

参数:

color:

(

String

)

必选圆圈填充的颜色值

格式为"#RRGGBB",如红色为"#ff0000"。

返回值:

void

: 无

示例:

// 设置圆圈的填充颜色为红色

circleObj.setFillColor( "#ff0000" );

获取圆圈的填充颜色

String circleObj.getFillColor();

说明:

如果填充颜色为无色,则返回空字符串。

参数:

返回值:

String

: 圆圈的填充颜色,格式为"#RRGGBB",如黑色为"#000000"。

设置圆圈填充颜色的透明度

void circleObj.setFillOpacity( opacity );

说明:

圆圈默认值为不透明。

如果设置的值不合法则保持原有的透明度;该方法设置将导致地图中的圆圈立即更新。

参数:

opacity:

(

Number

)

必选圆圈填充颜色的透明度

取值范围为0-1,0表示全透明,1表示不透明。

返回值:

void

: 无

示例:

// 设置圆圈填充颜色为半透明

circleObj.setFillOpacity( 0.5 );

获取圆圈填充色的透明度

Number circleObj.getFillOpacity();

参数:

返回值:

Number

: 圆圈填充色的透明度,取值范围为0-1,0表示全透明,1表示不透明。

设置圆圈边框的线条宽度

void circleObj.setLineWidth( width );

说明:

圆圈边框的默认值为5。

如果设置的值不合法则保持原有的宽度;该方法设置将导致地图中的圆圈立即更新。

参数:

width:

(

Number

)

必选圆圈边框的线条宽度

取值范围为正整数。

返回值:

void

: 无

示例:

// 设置圆圈边框线条为宽度为10

circleObj.setLineWidth( 10 );

获取圆圈边框的线条宽度

Number circleObj.getLineWidth();

参数:

返回值:

Number

: 圆圈边框的线条宽度,正整数。

地图上显示的折线对象

说明:

从Overlay对象继承而来,可通过Map对象的addOverlay()方法将对象添加地图中。

构造:

方法:

创建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 );

设置折线的顶点坐标

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 );

获取折线的顶点坐标

Array polylineObj.getPath();

参数:

返回值:

Array

: 折线的顶点坐标数组。

设置折线的颜色

void polylineObj.setStrokeColor( color );

说明:

折线默认的颜色为黑色"#000000",该方法设置将导致地图中的折线立即更新。

参数:

color:

(

String

)

必选折线的颜色值

格式为"#RRGGBB",如红色为"#ff0000"。

返回值:

void

: 无

示例:

// 设置折线为红色

polylineObj.setStorkeColor( "#ff0000" );

获取折线的颜色

String polylineObj.getStrokeColor();

参数:

返回值:

String

: 折线的颜色,格式为"#RRGGBB",如黑色为"#000000"。

设置折线的透明度

void polylineObj.setStrokeOpacity( opacity );

说明:

折线默认值为不透明。

如果设置的值不合法则保持原有的透明度;该方法设置将导致地图中的折线立即更新。

参数:

opacity:

(

Number

)

必选折线的透明度

取值范围为0-1,0表示全透明,1表示不透明。

返回值:

void

: 无

示例:

// 设置折线为半透明

polylineObj.setStrokeOpacity( 0.5 );

获取折线的透明度

Number polylineObj.getStrokeOpacity();

参数:

返回值:

Number

: 折线的透明度,取值范围为0-1,0表示全透明,1表示不透明。

设置折线的线条宽度

void polylineObj.setLineWidth( width );

说明:

折线线条的宽度默认值为5。

如果设置的值不合法则保持原有的宽度;该方法设置将导致地图中的折线立即更新。

参数:

width:

(

Number

)

必选折线的线条宽度

取值范围为正整数。

返回值:

void

: 无

示例:

// 设置折线为宽度为10

polylineObj.setLineWidth( 10 );

获取折线的线条宽度

Number polylineObj.getLineWidth();

参数:

返回值:

Number

: 折线的线条宽度,正整数。

地图上显示的多边形对象

说明:

从Overlay对象继承而来,可通过Map对象的addOverlay()方法将对象添加地图中。

构造:

方法:

创建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 );

设置多边形的顶点坐标

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 );

获取多边形的顶点坐标

Array polygonObj.getPath();

参数:

返回值:

Array

: 多边形的顶点坐标数组。

设置多边形的颜色

void polygonObj.setStrokeColor( color );

说明:

多边形边框默认的颜色为黑色"#000000",该方法设置将导致地图中的多边形立即更新。

参数:

color:

(

String

)

必选多边形边框的颜色值

格式为"#RRGGBB",如红色为"#ff0000"。

返回值:

void

: 无

示例:

// 设置多边形边框为红色

polygonObj.setStorkeColor( "#ff0000" );

获取多边形边框的颜色

String polygonObj.getStrokeColor();

参数:

返回值:

String

: 多边形边框的颜色,格式为"#RRGGBB",如黑色为"#000000"。

设置多边形的透明度

void polygonObj.setStrokeOpacity( opacity );

说明:

多边形边框默认值为不透明。

如果设置的值不合法则保持原有的透明度;该方法设置将导致地图中的多边形立即更新。

参数:

opacity:

(

Number

)

必选多边形边框的透明度

取值范围为0-1,0表示全透明,1表示不透明。

返回值:

void

: 无

示例:

// 设置多边形边框为半透明

polygonObj.setStrokeOpacity( 0.5 );

获取多边形边框的透明度

Number polygonObj.getStrokeOpacity();

参数:

返回值:

Number

: 多边形边框的透明度,取值范围为0-1,0表示全透明,1表示不透明。

设置多边形的填充颜色

void polygonObj.setStrokeColor( color );

说明:

多边形默认填充颜色为无色,该方法设置将导致地图中的多边形立即更新。

参数:

color:

(

String

)

必选多边形填充的颜色值

格式为"#RRGGBB",如红色为"#ff0000"。

返回值:

void

: 无

示例:

// 设置多边形的填充颜色为红色

polygonObj.setStorkeColor( "#ff0000" );

获取多边形的填充色

String polygonObj.getFillColor();

说明:

如果填充色为无色,则返回空字符串。

参数:

返回值:

String

: 多边形的填充色,格式为"#RRGGBB",如黑色为"#000000"。

设置多边形填充色的透明度

void polygonObj.setFillOpacity( opacity );

说明:

多边形填充色默认值为不透明。

如果设置的值不合法则保持原有的透明度;该方法设置将导致地图中的多边形立即更新。

参数:

opacity:

(

Number

)

必选多边形填充色的透明度

取值范围为0-1,0表示全透明,1表示不透明。

返回值:

void

: 无

示例:

// 设置多边形填充色为半透明

polygonObj.setFillOpacity( 0.5 );

获取多边形填充色的透明度

Number polygonObj.getFillOpacity();

参数:

返回值:

Number

: 多边形填充色的透明度,取值范围为0-1,0表示全透明,1表示不透明。

设置多边形的边框宽度

void polygonObj.setLineWidth( width );

说明:

多边形边框的宽度默认值为5。

如果设置的值不合法则保持原有的宽度;该方法设置将导致地图中的多边形立即更新。

参数:

width:

(

Number

)

必选多边形的边框宽度

取值范围为正整数。

返回值:

void

: 无

示例:

// 设置多边形为宽度为10

polygonObj.setLineWidth( 10 );

获取多边形边框的宽度

Number polygonObj.getLineWidth();

参数:

返回值:

Number

: 多边形的边框宽度,正整数。

地图检索对象

说明:

Search对象用于管理地图上的检索功能,包括位置检索、周边检索和范围检索。

构造:

方法:

事件:

创建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

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 );

设置检索返回结果每页的信息数目

void searchObj.setPageCapacity( capacity );

说明:

地图检索结果是按页返回的,默认检索每页返回10条信息。

参数:

capacity:

(

Number

)

必选要指定检索返回结果每页的信息数目

返回值:

void

: 无

获取检索返回结果每页的信息数目

Number searchObj.getPageCapacity();

参数:

返回值:

Number

: 检索返回结果每页的信息数目

城市兴趣点检索

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( "北京", "肯德基" );

周边检索

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 );

指定范围检索

Boolean searchObj.poiSearchInbounds( key, ptLB, ptRT, index );

说明:

根据范围和检索词进行检索,检索完成后触发onPoiSearchComplete()事件。

若调用此方法时对象处于POI检索操作中,则终止上次检索操作,重新开始新的检索。

参数:

key:

(

String

)

必选检索的关键字

ptLB:

(

Point

)

必选检索范围的左下角坐标点

ptRT:

(

Point

)

必选检索范围的右上角坐标点

index:

(

Number

)

必选要获取检索结果的页号索引

页号索引值从0开始,即0表示第一页,默认值为0。

返回值:

Boolean

: 检索成功返回true,否则返回false。

设置公交路线检索策略

Boolean searchObj.poiSearchInbounds(policy);

说明:

默认采用maps.SearchPolicy.TRANSIT_TIME_FIRST策略。

需在调用transitSearch()方法前设置的策略才生效;

如果设置非法值则认为设置失败,采用上次设置的检索策略并返回false。

参数:

policy:

可取值为maps.SearchPolicy.TRANSIT_TIME_FIRST、maps.SearchPolicy.TRANSIT_TRANSFER_FIRST、maps.SearchPolicy.TRANSIT_WALK_FIRST、maps.SearchPolicy.TRANSIT_NO_SUBWAY。

返回值:

Boolean

: 设置成功返回true,否则返回false。

公交路线检索

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

map.addOverlay( result.getRoute( i ) );

}

} else {

alert( "检索失败" );

}

}

searchObj.transitSearch( "天安门", "大钟寺", "北京" );

}

设置驾车路线检索策略

Boolean searchObj.setDrivingPolicy(policy);

说明:

设置驾车路线检索策略,默认采用maps.SearchPolicy.DRIVING_TIME_FIRST策略。

如果设置非法值则认为设置失败,采用上次设置的检索策略并返回false;需在调用drivingSearch()方法前设置的策略才生效。

参数:

policy:

可取值为maps.SearchPolicy.DRIVING_TIME_FIRST、maps.SearchPolicy.DRIVING_DIS_FIRST、maps.SearchPolicy.DRIVING_FEE_FIRST。

返回值:

Boolean

: 设置成功返回true,否则返回false。

驾车路线检索

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

map.addOverlay( result.getRoute( i ) );

}

} else {

alert( "检索失败" );

}

}

searchObj.drivingSearch( "天安门", "北京", "大钟寺", "北京" );

}

步行路线检索

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

map.addOverlay( result.getRoute( i ) );

}

} else {

alert( "检索失败" );

}

}

searchObj.walkingSearch( "天安门", "北京", "大钟寺", "北京" );

}

兴趣点检索完成事件

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

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 );

}

线路检索完成事件

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

map.addOverlay( result.getRoute( i ) );

}

} else {

alert( "检索失败" );

}

}

searchObj.transitSearch( "天安门", "大钟寺", "北京" );

}

检索策略类型

说明:

在线路检索时设置检索策略时使用。

常量:

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

类型

)最少费用优先

检索策略类型常量,用于驾车检索策略

保存位置检索、周边检索和范围检索返回的结果

属性:

totalNumber: POI检索总结果数

currentNumber: 当前页的POI检索结果数

pageNumber: 本次POI检索的总页数

pageIndex: 获取当前页的索引

poiList: 本次POI检索结果数组

方法:

getPosition: 获取指定索引的检索结果

POI检索总结果数

poiResult.totalNumber;

说明:

Number

类型

只读属性

POI检索总结果数,若没有检索到则返回0。

当前页的POI检索结果数

poiResult.currentNumber;

说明:

Number

类型

只读属性

当前页POI检索结果数,若没有检索到则返回0。

本次POI检索的总页数

poiResult.pageNumber;

说明:

Number

类型

只读属性

本次POI检索的总页数,若没有检索到则返回0。

获取当前页的索引

poiResult.pageIndex;

说明:

Number

类型

只读属性

当前页的索引值,从0开始,即0表示第一页。

本次POI检索结果数组

poiResult.poiList;

说明:

Array

类型

只读属性

POI检索结果数组,Array数组对象,数组内容为Position对象。

获取指定索引的检索结果

Position poiResult.getPosition( index ) ;

说明:

如果index值超出范围则返回null对象。

参数:

返回值:

Position

: 指定索引的检索结果。

保存位置检索、周边检索和范围检索返回的结果

说明:

不可通过new操作符创建SearchRouteResult对象,在触发onRouteSearchComplete()时自动创建。

属性:

方法:

getRoute: 获取指定索引的线路方案

线路的起点位置

routeResult.startPosition;

说明:

Position

类型

只读属性

线路检索结果的起始位置点对象。

线路的终点位置

poiResult.endPosition;

说明:

Position

类型

只读属性

线路检索结果的终点位置点对象。

本次线路检索的总方案数

routeResult.routeNumber;

说明:

Number

类型

只读属性

线路检索结果的方案数目,若未检索到有效结果则返回0。

线路检索结果数组

routeResult.routeList;

说明:

Array

类型

只读属性

线路检索结果数组,Array数组对象,数组内容为Route对象。

获取指定索引的线路方案

Route poiResult.getRoute( index );

说明:

如果index值超出范围则返回null对象。

参数:

index:

(

Number

)

必选要获取结果的索引值

返回值:

Route

: 指定索引的线路方案。

检索结果的位置点

构造:

属性:

point: 位置点的经纬度坐标

address: 位置点的地址信息

city: 位置点的所属城市信息

name: 位置点的名称

phone: 位置点的电话信息

postcode: 位置点的邮编信息

创建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) );

位置点的经纬度坐标

posObj.point;

说明:

Point

类型

只读属性

如果没有经纬度坐标信息(如果公交、地铁路线数据等),则其值为undefined。

位置点的地址信息

posObj.address;

说明:

String

类型

只读属性

如果没有位置点的地址信息则返回空字符串。

位置点的所属城市信息

posObj.city;

说明:

String

类型

只读属性

如果没有位置点的所属城市信息则返回空字符串。

位置点的名称

posObj.name;

说明:

String

类型

只读属性

如果没有位置点的名称则返回空字符串。

位置点的电话信息

posObj.phone;

说明:

String

类型

只读属性

如果没有位置点的电话信息则返回空字符串。

位置点的邮编信息

posObj.postcode;

说明:

String

类型

只读属性

如果没有位置点的邮编信息则返回空字符串。

地图中的路线对象

说明:

从Overlay对象继承而来,可通过Map对象的addOverlay()方法将对象添加地图中。

构造:

属性:

startPoint: 路线起点地理坐标点

endPoint: 路线终点地理坐标点

pointList: 路线的地理坐标点数组

routeTip: 线路的提示信息

创建Route对象

var routeObj = new plus.maps.Route( ptStart, ptEnd );

参数:

ptStart:

(

Point

)

必选路线起点经纬度坐标

ptEnd:

(

Point

)

必选路线终点经纬度坐标

返回值:

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) );

路线起点地理坐标点

routeObj.startPoint;

说明:

Point

类型

只读属性

路线终点地理坐标点

routeObj.endPoint;

说明:

Point

类型

只读属性

路线坐标点段数

routeObj.pointCount;

说明:

Point

类型

只读属性

路线的地理坐标点数组

routeObj.pointList;

说明:

Array

类型

只读属性

路线的地理坐标点数组,数组中保存Point对象。

路线总距离

routeObj.distance;

说明:

Number

类型

只读属性

路线从起始点到终点的距离,单位为米。

线路的提示信息

routeObj.routeTip;

说明:

String

类型

只读属性

线路提示信息,没有提示信息则返回空字符串。

地理编码转换成功的回调函数

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

: 无

坐标转换成功的回调函数

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

: 无

距离计算成功的回调函数

void onCalculateSuccess( Event event ) {

// JS code.

var distance = event.distance; // 转换后的距离值

}

说明:

在距离计算成功触发,并返回计算结果。

参数:

event:

(

Event

)

可选距离计算后的信息

可通过event.distance(Number类型)获取计算后的距离值,单位为米(m)。

返回值:

void

: 无

地理区域面积计算成功的回调函数

void onCalculateSuccess( Event event ) {

// JS code.

var area = event.area; // 计算后的面积值

}

说明:

在地理区域面积计算成功触发,并返回计算结果。

参数:

event:

(

Event

)

可选地理区域面积计算后的信息

可通过event.area(Number类型)获取计算后的面积值,单位为平方米。

返回值:

void

: 无

获取用户当前位置信息成功回调

void onSuccess( state, point ) {

// Get location code

}

参数:

state:

(

Number

)

必选获取用户位置操作状态码,0表示成功,其它为错误码

point:

(

Point

)

必选位置经纬度坐标,如果获取操作失败则为null对象

返回值:

void

: 无

用户点击地图回调事件

void onClick( point ) {

// Click code

}

参数:

point:

(

Point

)

必选用户在地图上点击的坐标点

返回值:

void

: 无

地图状态变化回调事件

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:

(

Event

)

必选地图状态变化对象

可通过event.target(plus.maps.Map类型)获取状态变化的地图对象;

可通过event.bounds(plus.maps.Bounds类型)获取地图当前的可视区域;

可通过event.center(plus.maps.Point类型)获取地图当前的中心点坐标;

可通过event.zoom(Number类型)获取地图当前的缩放级别。

返回值:

void

: 无

用户点击地图覆盖物回调事件

void onClick( overlay ) {

// Click code

}

参数:

overlay:

overlay可以是Marker、Bubble、Circle、Polyline、Polygon对象的引用。

返回值:

void

: 无

用户拖拽覆盖物回调事件

void onDrag( target ) {

// Click code

var marker = target; // 拖拽的覆盖物对象

}

参数:

target:

(

Event

)

必选拖拽事件对象

可通过target(Overlay类型)获取拖拽的覆盖物对象,target可以是Marker、Bubble、Circle、Polyline、Polygon对象的引用。

返回值:

void

: 无

兴趣点检索完成事件

void onPoiSearchComplete( state, result ) {

// JS code.

}

说明:

在兴趣点检索完成时触发,并返回检索结果。

参数:

state:

(

Number

)

必选检索结果状态号

0表示检索正确并返回结果,其它表示检索错误。

result:

若检索错误,则为null对象。

返回值:

void

: 无

线路检索完成事件

void onRouteSearchComplete( state, result ) {

// JS code.

}

说明:

在线路检索完成时触发,并返回检索结果。

参数:

state:

(

Number

)

必选检索结果状态号

0表示检索正确并返回结果,其它表示检索错误。

result:

若检索错误,则为null对象。

返回值:

void

: 无

地图操作成功回调函数

void onSuccess(){

// Success code.

}

说明:

地图操作成功后触发回调函数。

参数:

返回值:

void

: 无

地图操作失败的回调函数

function void onError( error ) {

// Handle error

var code = error.code; // 错误编码

var message = error.message; // 错误描述信息

}

参数:

error:

(

Exception

)

必选地图操作的错误信息

可通过error.code(Number类型)获取错误编码;

可通过error.message(String类型)获取错误描述信息。

返回值:

void

: 无

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值