Maps

稿件来源: 互联网   撰稿作者: 匿名   发表日期: 2015-03-23   阅读次数: 1096   查看权限: 游客查看

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

方法:

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

对象:

  • Map地图控件对象
  • PointPoint对象用于表示地图元素的坐标
  • MapType地图视图类型
  • Overlay地图覆盖物基类对象
  • Marker地图上显示的标点对象
  • Bubble地图上显示的气泡对象
  • Circle地图上显示的圆圈对象
  • Polyline地图上显示的折线对象
  • Polygon地图上显示的多边形对象
  • Search地图检索对象
  • SearchPolicy检索策略类型
  • SearchPoiResult保存位置检索、周边检索和范围检索返回的结果
  • SearchRouteResult保存位置检索、周边检索和范围检索返回的结果
  • Position检索结果的位置点
  • Route地图中的路线对象

回调方法:

openSysMap

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

plus.maps.openSysMap( dst, des, src );

说明:

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

参数:

  • dst (Point) 可选 导航目的地坐标
  • des (DOMString) 可选 导航目的地描述
  • src (Point) 可选 导航起始地描述

返回值:

示例:

// 设置目标位置坐标点和其实位置坐标点
var dst = new plus.maps.Point(39.906016,116.3977); // 天安门 
var src = new plus.maps.Point(39.967846,116.337984); // 大钟寺
// 调用系统地图显示 
plus.maps.openSysMap( dst, "天安门", src );

Map

地图控件对象

方法:

事件:

Map(id,zoomControl)

创建Map对象

var ptObj = new plus.maps.Map( id );

说明:

Map对象是通过DOM树中的节点进行定位,在构造时需传入一个DOM元素id,地图控件将会自动保持与DOM元素位置和大小完全一致。

参数:

  • id (String) 可选 地图控件所占位的DOM节点(通常为div)的id

返回值:

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(){
	if(!em||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
	createMarker();
}
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>

centerAndZoom

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

void mapObj.centerAndZoom( center, zoom );

说明:

用于设置地图的初始中心点和缩放级别,通常在创建地图后立即调用。 默认中心点为天安门,默认缩放级别为12; 该方法设置的中心点和缩放级别可通过reset()方法恢复; 如果在地图显示后调用将改变地图的中心点和缩放级别并立即更新,并将初始值更新。

参数:

  • center (Point) 可选 地图初始化的中心点坐标
  • zoom (Number) 可选 地图初始化的缩放级别

返回值:

示例:

var mapObj = new plus.maps.Map( "mapid" );
var center = new plus.maps.Point( 116.123, 36.456 );
mapObj.centerAndZoom(  center, 12 );

setCenter

设置地图的中心点

void mapObj.setCenter( center );

说明:

此方法用于设置地图的中心点,用于切换当前显示地图位置。 该方法改变中心点后地图显示内容将立即更新; 该方法不会改变地图显示的缩放级别。

参数:

  • center (Point) 可选 要切换到的中心点坐标

返回值:

示例:

var center = new plus.maps.Point( 118.123, 35.456 );
mapObj.setCenter( center );

getCenter

获取地图中心点

Point mapObj.getCenter();

说明:

结束指定的持续事件统计,需先调用eventStart方法开始持续事件统计,触发的事件必须要先在统计网站上注册事件ID。

返回值:

地图中心点坐标

setZoom

设置地图的缩放级别

void mapObj.setZoom( zoom );

说明:

此方法用于设置地图的缩放级别,用于切换当前显示地图缩放级别。 该方法改变缩放级别后地图显示内容将立即更新; 该方法不会改变地图显示区域,以当前地图显示的中心点位置来缩放地图。

参数:

  • zoom (Number) 可选 要设置的新的缩放级别,其有效范围为1-22

返回值:

示例:

mapObj.setZoom( 18 );

getZoom

获取地图的缩放级别

Number mapObj.getZoom();

说明:

此方法用于设置地图的缩放级别,用于切换当前显示地图缩放级别。 该方法改变缩放级别后地图显示内容将立即更新; 该方法不会改变地图显示区域,以当前地图显示的中心点位置来缩放地图。

返回值:

地图视图的缩放级别

reset

重新设置地图

void mapObj.reset();

说明:

此方法用于重新设置地图,恢复地图的初始化时的中心点和缩放级别。 该方法将导致显示内容将立即更新。

返回值:

地图视图的缩放级别

示例:

mapObj.reset();

setMapType

设置地图类型

void mapObj.setMapType( type );

说明:

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

参数:

  • type (MapType) 可选 要设置的地图的显示模式,参考maps.MapType的常量说明

返回值:

示例:

mapObj.setMapType( plus.maps.MapType.MAPTYPE_SATELLITE );

getMapType

获取地图的显示类型

void mapObj.getMapType();

说明:

获取地图的显示类型

返回值:

地图视图的显示类型

setTraffic

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

void mapObj.setTraffic( traffic );

说明:

此方法用于设置是否打开地图交通信息图层,默认不显示。 该方法改变是否显示交通图层后地图显示内容将立即更新。

参数:

  • traffic (Boolean) 可选 是否显示交通信息图层

返回值:

示例:

mapObj.setTraffic( true );

isTraffic

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

Boolean mapObj.isTraffic();

说明:

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

返回值:

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

showUserLocation

显示用户位置

void mapObj.showUserLocation( display );

说明:

此方法将在地图上显示用户位置信息。 显示用户位置将打开定位设备。

参数:

  • display (Boolean) 可选 是否显示用户位置

返回值:

示例:

mapObj.showUserLocation( true );

isShowUserLocation

获取地图是否显示用户位置

Boolean mapObj.isShowUserLocation();

说明:

获取地图是否显示用户位置

返回值:

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

showZoomControls

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

void mapObj.showUserLocation( display );

说明:

此方法将在地图上显示用户位置信息。 显示用户位置将打开定位设备。

参数:

  • display (Boolean) 可选 是否显示地图内置缩放控件

返回值:

示例:

// 显示地图内置缩放控件
mapObj.showUserLocation( true );

isShowZoomControls

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

Boolean mapObj.isShowZoomControls();

说明:

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

返回值:

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

addOverlay

向地图中添加覆盖物

Boolean mapObj.addOverlay( overlay );

说明:

此方法用于向地图中添加覆盖物。 支持各种从maps.Overlay对象继承的各种覆盖物对象; 如果添加不支持的对象则直接返回false; 同一覆盖物对象只能添加到地图中一次,已在地图中的覆盖物再次添加时则返回false。

参数:

  • overlay (Overlay) 可选 在地图中要添加覆盖物

返回值:

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

示例:

// 在地图中插入标点
var pt = new plus.maps.Point(116,36);
var mk = new plus.maps.Marker(pt);
mk.setIcon( "marker.png" );
mk.setCaption( "这是一个标点" );
mapObj.addOverlay( mk );

removeOverlay

从地图中删除覆盖物对象

void mapObj.removeOverlay( overlay );

说明:

此方法用于从地图中删除覆盖物对象。 支持各种从maps.Overlay对象继承的各种覆盖物对象。

参数:

  • overlay (Overlay) 可选 需要从地图中删除的覆盖物对象

返回值:

示例:

// 清除地图中的标点
var pt = new plus.maps.Point(116,36);
var mk = new plus.maps.Marker(pt);
mk.setIcon( "marker.png" );
mk.setCaption( "这是一个标点" );
mapObj.addOverlay( mk ); 
....
// 删除标点
mapObj.removeOverlay( mk );

clearOverlays

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

void mapObj.clearOverlays();

说明:

此方法用于清除地图中所有覆盖物对象。 清除地图中的覆盖物对象后会自动更新地图视图。

返回值:

示例:

// 清除地图中所有覆盖物
mapObj.clearOverlays();

getUserLocation

获取用户的当前位置信息

Boolean mapObj.getUserLocation( callback );

说明:

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

参数:

  • callback (UserLocationCallback) 可选 获取用户当前位置信息完成后执行的通知操作结果方法,回调函数中返回的point信息为当前用户位置的坐标

返回值:

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

示例:

// 通知结果方法
function locationCallback( state, point ) {
	if ( 0 == state ) {
		alert( "Current Position:" + point.getLng() + "," + point.getLat() );
	} else {
		alert( "无法获取当前位置" );
	}
}
// 获取用户位置信息
mapObj.getUserLocation( locationCallback );

getCurrentCenter

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

Boolean mapObj.getCurrentCenter( callback );

说明:

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

参数:

  • callback (UserLocationCallback) 可选 获取当前地图显示的地图中心点位置完成后执行的通知操作结果方法,在回调函数中返回的point信息为当前地图中心点坐标

返回值:

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

示例:

// 通知结果方法
function centerCallback( state, point ) {
	if ( 0 == state ) {
		alert( "Center Position:" + point.getLng() + "," + point.getLat() );
	} else {
		alert( "无法获取当前显示中心点位置" );
	}
}
// 获取当前显示中心点位置信息
mapObj.getUserLocation( centerCallback );

show

显示地图控件

void mapObj.show();

说明:

此方法用于显示地图控件,通常在隐藏后调用此方法来显示。 如果地图已经显示再调用此方法将无效果。

返回值:

hide

隐藏地图控件

void mapObj.show();

说明:

此方法用于隐藏地图控件,通常在显示后调用此方法来隐藏。 如果地图已经隐藏再调用此方法将无效果。

返回值:

onclick

用户点击地图事件

mapObj.onclick = function ( point ) {
	// JS code.
}

说明:

用户点击地图事件

示例:

// 用户点击地图将弹出点击位置的坐标 
mapObj.onclick = function ( point ) {
	alert( "Longitude:" + point.lng + "; Latitude:" + point.lat );
}

Point

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

说明:

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

方法:

  • setLng设置坐标点的经度
  • getLng获取坐标的经度
  • setLat设置坐标的纬度
  • getLat获取坐标的纬度
  • equals判断两个坐标点是否相等

Point(lng,lat)

创建Point对象

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

说明:

创建Point对象

参数:

  • lng (Number) 可选 坐标的经度
  • lat (Number) 可选 坐标的纬度

返回值:

创建的坐标对象

示例:

// 创建地图坐标对象
var pt1 = new plus.maps.Point( 116.123, 36.456 );

setLng

设置坐标点的经度

void ptObj.setLng( lng );

说明:

设置坐标点的经度

参数:

  • lng (Number) 可选 要设置坐标的经度

返回值:

getLng

获取坐标的经度

Number ptObj.getLng();

说明:

获取坐标的经度

返回值:

坐标的经度

setLat

设置坐标的纬度

void ptObj.setLat( lat );

说明:

设置坐标的纬度

返回值:

getLat

获取坐标的纬度

Number ptObj.getLat();

说明:

获取坐标的纬度

返回值:

坐标的纬度

equals

判断两个坐标点是否相等

Boolean ptObj.equals( Point pt );

说明:

判断两个坐标点是否相等

参数:

  • pt (Point) 可选 要比较的坐标对象

返回值:

坐标对象是否相等,相等则返回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

MapType

地图视图类型

常量:

平台支持:

平台支持:

MAPTYPE_NORMAL

普通街道视图类型

plus.maps.MapType.MAPTYPE_SATELLITE

说明:

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

MAPTYPE_SATELLITE

卫星视图

plus.maps.MapType.MAPTYPE_SATELLITE

说明:

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

Overlay

地图覆盖物基类对象

interface Overlay {
	function Boolean isVisible();
	function void show();
	function void hide();
}

说明:

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

方法:

  • isVisible判断地图覆盖物是否可见
  • show显示地图上的覆盖物
  • hide隐藏地图上的覆盖物

isVisible

判断地图覆盖物是否可见

Boolean overlayObj.isVisible();

说明:

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

返回值:

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

show

显示地图上的覆盖物

void overlayObj.show();

说明:

常用于地图覆盖物在隐藏后调用此方法来显示。 只有添加到地图上的覆盖物才能看到效果; 如果覆盖物对象已经在地图上显示再调用此方法将无效果。

返回值:

hide

隐藏地图上的覆盖物

void overlayObj.show();

说明:

常用于地图覆盖物在显示后调用此方法来隐藏。 只有添加到地图上的覆盖物才能看到效果; 如果覆盖物对象已经在地图上隐藏再调用此方法将无效果。

返回值:

Marker

地图上显示的标点对象

说明:

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

方法:

事件:

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

Marker( point )

创建地图标点Marker对象

var markObj = new plus.maps.Marker( point );

说明:

创建地图标点Marker对象

参数:

  • point (Point) 可选 地图标点的坐标信息

返回值:

创建好的地图标点对象

示例:

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

setPoint

设置标点对象的坐标

void markObj.setPoint( point );

说明:

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

参数:

  • point (Point) 可选 要设置标点的坐标

返回值:

getPoint

获取标点的坐标

Point markObj.getPoint();

说明:

获取标点的坐标

返回值:

标点的坐标对象

setIcon

设置标点上显示的图标

void markObj.setIcon( icon );

说明:

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

参数:

  • icon (DOMString) 可选 仅支持本地图标URL地址,支持png、jpg/jpeg、bmp格式。

返回值:

setLabel

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

void markObj.setLabel( label );

说明:

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

参数:

  • label (DOMString) 可选 要设置标点的标注文字

返回值:

getLabel

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

DOMString markObj.getLabel();

说明:

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

返回值:

标点的标注文本内容

setBubble

设置标点的气泡内容

void markObj.setBubble( buuble );

说明:

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

参数:

  • buuble (Bubble) 可选 要设置标点关联的气泡对象

返回值:

getBubble

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

Bubble markObj.getBubble();

说明:

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

返回值:

标点关联的气泡对象

onclick

用户点击地图标点事件

markObj.onclick = function ( marker ) {
	// Click code.
}

说明:

用户点击地图标点事件

示例:

// 用户点击标点将弹出标点上的文本 
markObj.onclick = function ( marker ) {
	alert( "Clicked:" + markObj.getLabel() );
}

Bubble

地图上显示的气泡对象

说明:

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

方法:

  • setIcon设置气泡上显示的图标
  • setLabel设置气泡上显示的文字内容
  • getLabel获取气泡上显示的文字内容
  • belongMarker获取气泡所属的标点对象

事件:

Bubble( label )

创建气泡对象

var bubObj = new plus.maps.Bubble( label );

说明:

创建气泡对象

参数:

  • label (DOMString) 可选 气泡上显示的文字

返回值:

气泡对象

示例:

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 (DOMString) 可选 仅支持本地资源,支持png、jpg/jpeg、bmp格式图片资源。

返回值:

setLabel

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

void bubObj.setLabel( label );

说明:

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

参数:

  • label (DOMString) 可选 要设置气泡上显示的文字

返回值:

getLabel

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

DOMString bubObj.getLabel();

说明:

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

返回值:

气泡上显示的文字内容

belongMarker

获取气泡所属的标点对象

Marker bubObj.belongMarker();

说明:

获取气泡所属的标点对象

返回值:

气泡所属的标点对象。

onclick

用户点击气泡事件

bubObj.onclick = function ( bubble ) {
	// JS code. 
}

说明:

用户点击气泡事件

示例:

// 用户点击气泡将弹出气泡上的标题信息 
bubObj.onclick = function ( bubble ) {
	alert( "Clicked:" + bubble.getLabel() );
}

Circle

地图上显示的圆圈对象

说明:

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

方法:

Circle( center, radius )

创建Circle对象

var circleObj = new plus.maps.Circle( center, radius );

说明:

创建Circle对象

参数:

  • center (Point) 可选 圆圈中心点的经纬度坐标
  • radius (Number) 可选 圆圈的半径,单位为米

返回值:

地图上圆圈对象

示例:

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) 可选 圆圈的中心点坐标

返回值:

示例:

// 设置新的圆圈中心点 
circleObj.setCenter( new plus.maps.Point(116.0,39.0) );

getCenter

获取圆圈中心点的坐标

Point circleObj.getCenter();

说明:

获取圆圈中心点的坐标

返回值:

圆圈中心点的坐标对象

setRadius

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

void circleObj.setRadius( radius );

说明:

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

参数:

  • radius (Number) 可选 圆圈的半径,单位为米

返回值:

示例:

// 设置新的圆圈半径
circleObj.setRadius( 1000 );

getRadius

获取圆圈的半径

Number circleObj.getRadius();

说明:

获取圆圈的半径

返回值:

圆圈的半径,单位为米。

setStrokeColor

设置圆圈的边框颜色

void circleObj.setStrokeColor( color );

说明:

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

参数:

  • color (DOMString) 可选 格式为"#RRGGBB",如红色为"#ff0000"。

返回值:

示例:

// 设置圆圈的边框颜色为红色
circleObj.setStorkeColor( "#ff0000" );

getStrokeColor

获取圆圈的边框颜色

DOMString circleObj.getStrokeColor();

说明:

获取圆圈的边框颜色

返回值:

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

setStrokeOpacity

设置圆圈的边框颜色

void circleObj.setStrokeOpacity( opacity );

说明:

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

参数:

  • opacity (Number) 可选 取值范围为0-1,0表示全透明,1表示不透明。

返回值:

示例:

// 设置圆圈边框为半透明
circleObj.setStrokeOpacity( 0.5 );

getStrokeOpacity

获取圆圈边框的透明度

Number circleObj.getStrokeOpacity();

说明:

获取圆圈边框的透明度

返回值:

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

setFillColor

设置圆圈的填充颜色

void circleObj.setStrokeColor( color );

说明:

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

参数:

  • color (DOMString) 可选 格式为"#RRGGBB",如红色为"#ff0000"。

返回值:

示例:

// 设置圆圈的边框颜色为红色
circleObj.setStorkeColor( "#ff0000" );

getFillColor

获取圆圈的填充颜色

DOMString circleObj.getFillColor();

说明:

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

返回值:

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

setFillOpacity

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

void circleObj.setFillOpacity( opacity );

说明:

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

参数:

  • opacity (Number) 可选 取值范围为0-1,0表示全透明,1表示不透明。

返回值:

示例:

// 设置圆圈填充颜色为半透明
circleObj.setFillOpacity( 0.5 );

getFillOpacity

获取圆圈填充色的透明度

Number circleObj.getFillOpacity();

说明:

获取圆圈填充色的透明度

返回值:

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

setLineWidth

设置圆圈边框的线条宽度

void circleObj.setLineWidth( width );

说明:

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

参数:

  • width (Number) 可选 取值范围为正整数。

返回值:

示例:

// 设置圆圈边框线条为宽度为10
circleObj.setLineWidth( 10 );

getLineWidth

获取圆圈边框的线条宽度

Number circleObj.getLineWidth();

说明:

获取圆圈边框的线条宽度

返回值:

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

Polyline

地图上显示的折线对象

说明:

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

方法:

Polyline( points )

创建Polyline对象

var polylineObj = new plus.maps.Polyline( points );

说明:

创建Polyline对象

参数:

  • points (Array) 可选 折线的顶点坐标,Point数组

返回值:

地图上折线对象

示例:

// 创建一个折线对象
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数组

返回值:

示例:

// 设置新的折线顶点
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();

说明:

获取折线的顶点坐标

返回值:

折线的顶点坐标数组。

setStrokeColor

设置折线的颜色

void circleObj.setStrokeColor( color );

说明:

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

参数:

  • color (DOMString) 可选 格式为"#RRGGBB",如红色为"#ff0000"。

返回值:

示例:

// 设置折线为红色
polylineObj.setStorkeColor( "#ff0000" );

getStrokeColor

获取折线的颜色

DOMString polylineObj.getStrokeColor();

说明:

获取折线的颜色

返回值:

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

setStrokeOpacity

设设置折线的透明度

void polylineObj.setStrokeOpacity( opacity );

说明:

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

参数:

  • opacity (Number) 可选 取值范围为0-1,0表示全透明,1表示不透明。

返回值:

示例:

// 设置折线为半透明
polylineObj.setStrokeOpacity( 0.5 );

getStrokeOpacity

获取折线的透明度

Number polylineObj.getStrokeOpacity();

说明:

获取折线的透明度

返回值:

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

setLineWidth

设置折线的线条宽度

void polylineObj.setLineWidth( width );

说明:

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

参数:

  • width (Number) 可选 取值范围为正整数。

返回值:

示例:

// 设置折线为宽度为10
polylineObj.setLineWidth( 10 );

getLineWidth

获取折线的线条宽度

Number polylineObj.getLineWidth();

说明:

获取折线的线条宽度

返回值:

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

Polygon

地图上显示的多边形对象

说明:

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

方法:

Polygon( points )

创建Polygon对象

var polygonObj = new plus.maps.Polygon( points );

说明:

创建Polygon对象

参数:

  • points (Array) 可选 多边形的顶点坐标,Point数组

返回值:

地图上多边形对象

示例:

// 创建一个多边形对象
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数组

返回值:

示例:

// 设置新的多边形顶点
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();

说明:

获取多边形的顶点坐标

返回值:

多边形的顶点坐标数组。

setStrokeColor

设置多边形的颜色

void polygonObj.setStrokeColor( color );

说明:

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

参数:

  • color (DOMString) 可选 格式为"#RRGGBB",如红色为"#ff0000"。

返回值:

示例:

// 设置多边形边框为红色
polygonObj.setStorkeColor( "#ff0000" );

getStrokeColor

获取多边形边框的颜色

DOMString polygonObj.getStrokeColor();

说明:

获取多边形边框的颜色

返回值:

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

setStrokeOpacity

设置多边形的透明度

void polygonObj.setStrokeOpacity( opacity );

说明:

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

参数:

  • opacity (Number) 可选 取值范围为0-1,0表示全透明,1表示不透明。

返回值:

示例:

// 设置多边形边框为半透明
polygonObj.setStrokeOpacity( 0.5 );

getStrokeOpacity

获取多边形边框的透明度

Number polygonObj.getStrokeOpacity();

说明:

获取多边形边框的透明度

返回值:

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

setFillColor

设置多边形的填充颜色

void polygonObj.setStrokeColor( color );

说明:

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

参数:

  • color (DOMString) 可选 格式为"#RRGGBB",如红色为"#ff0000"。

返回值:

示例:

// 设置多边形的填充颜色为红色
polygonObj.setStorkeColor( "#ff0000" );

getFillColor

获取多边形的填充色

DOMString polygonObj.getFillColor();

说明:

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

返回值:

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

setFillOpacity

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

void polygonObj.setFillOpacity( opacity );

说明:

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

参数:

  • opacity (Number) 可选 取值范围为0-1,0表示全透明,1表示不透明。

返回值:

示例:

// 设置多边形填充色为半透明
polygonObj.setFillOpacity( 0.5 );

getFillOpacity

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

Number polygonObj.getFillOpacity();

说明:

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

返回值:

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

setLineWidth

设置多边形的边框宽度

void polygonObj.setLineWidth( width );

说明:

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

参数:

  • width (Number) 可选 取值范围为正整数。

返回值:

示例:

// 设置多边形为宽度为10
polygonObj.setLineWidth( 10 );

getLineWidth

获取多边形边框的宽度

Number polygonObj.getLineWidth();

说明:

获取多边形边框的宽度

返回值:

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

Search

地图检索对象

说明:

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

方法:

事件:

Search( map )

创建Search对象

var searchObj = new plus.maps.Search( map );

说明:

创建Search对象

参数:

  • map (Map) 可选 检索关联的地图对象

返回值:

地图检索对象

示例:

// 将检索到的第一条信息作为标点添加到地图中
	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) 可选 要指定检索返回结果每页的信息数目

返回值:

getPageCapacity

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

Number searchObj.getPageCapacity();

说明:

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

返回值:

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

poiSearchInCity

城市兴趣点检索

Boolean searchObj.poiSearchInCity( city, key, index );

说明:

检索结果将通过onPoiSearchComplete事件返回。 如果调用此方法时已经处于POI检索操作中,则终止上次检索操作,重新开始新的检索。

参数:

  • city (DOMString) 可选 如果设置为空字符串则在地图定位出当前所在城市内进行检索。
  • key (DOMString) 可选 检索的关键字
  • index (Number) 可选 页号索引值从0开始,即0表示第一页,默认值为0。

返回值:

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

示例:

// 在北京对关键字“肯德基”进行检索
var searchObj = new plus.maps.Search( map );
searchObj. poiSearchInCity( "北京", "肯德基" );

poiSearchNearBy

周边检索

Boolean searchObj.poiSearchNearBy( key, pt, radius, index );

说明:

周边检索根据中心点、半径与检索词进行检索,检索完成后触发onPoiSearchComplete()事件。 若调用此方法时对象处于POI检索操作中,则终止上次检索操作,重新开始新的检索。

参数:

  • key (DOMString) 可选 检索的关键字
  • pt (Point) 可选 检索的中心点坐标
  • radius (Number) 可选 检索的半径,单位为米
  • index (Number) 可选 页号索引值从0开始,即0表示第一页,默认值为0。

返回值:

检索成功返回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检索操作中,则终止上次检索操作,重新开始新的检索。

返回值:

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

setTransitPolicy

设置公交路线检索策略

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

说明:

默认采用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。

返回值:

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

transitSearch

公交路线检索

Boolean searchObj.transitSearch( start, end, city );

说明:

检索完成后触发onRouteSearchComplete()事件。 若调用此方法时对象处于检索操作中,则终止上次检索操作,重新开始新的检索。

参数:

  • start (Point) 可选 可以为起点地名关键字或地图坐标。
  • end (Point) 可选 可以为起点地名关键字或地图坐标。
  • city (DOMString) 可选 要检索的城市名称

返回值:

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

示例:

// 在北京检索从天安门到鸟巢的公交线路
var searchObj = new plus.maps.Search( map );
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。

返回值:

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

drivingSearch

驾车路线检索

Boolean searchObj.drivingSearch( start, startCity, end, endCity );

说明:

用于驾车路线检索,检索完成后触发onRouteSearchComplete()事件。 调用此方法时对象处于检索操作中,则终止上次检索操作,重新开始新的检索。

参数:

  • start (Point) 可选 可以为起点地名关键字或地图坐标。
  • startCity (DOMString) 可选 如果start为坐标则可传入空字符串
  • end (Point) 可选 可以为终点地名关键字或地图坐标。
  • endCity (DOMString) 可选 驾车线路检索的终点位置所属城市

返回值:

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

示例:

// 检索从北京天安门到上海市政府线路
var searchObj = new plus.maps.Search( map );
searchObj.drivingSearch( "天安门", "北京", "市政府", "上海" );

walkingSearch

步行路线检索

Boolean searchObj.walkingSearch( start, startCity, end, endCity );

说明:

用于步行路线检索,检索完成后触发onRouteSearchComplete()事件。 调用此方法时对象处于检索操作中,则终止上次检索操作,重新开始新的检索。

参数:

  • start (Point) 可选 可以为起点地名关键字或地图坐标。
  • startCity (DOMString) 可选 如果start为坐标则可传入空字符串。
  • end (Point) 可选 可以为终点地名关键字或地图坐标。
  • endCity (DOMString) 可选 如果end为坐标则可传入空字符串。

返回值:

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

示例:

// 检索从天安门到鸟巢的步行线路
var searchObj = new plugins.maps.Search( map );
searchObj.walkingSearch( "天安门", "北京", "鸟巢", "北京" );

onPoiSearchComplete

兴趣点检索完成事件

searchObj.onPoiSearchComplete = function ( state, result ) {
	// JS Code.
}

说明:

兴趣点检索完成事件

示例:

// 将检索到的第一条信息作为标点添加到地图中
var searchObj = new plus.maps.Search( map );
searchObj.onPoiSearchComplete = function ( state, result ) {
	if ( state == 0 ) {
		if ( result.currentNumber <= 0 ) {
			alert( "没有检索到结果" );
		}
		var pos = result.getPosition( 0 );
		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 );

onRouteSearchComplete

线路检索完成事件

searchObj.onRouteSearchComplete = function ( state, result ) {
	// JS Code.
}

说明:

线路检索完成事件

示例:

// 将检索到的第一条信息作为标点添加到地图中
var searchObj = new plus.maps.Search( map );
	searchObj.onRouteSearchComplete = function ( state, result ) {
		if ( state == 0 ) {
		if ( result.currentNumber <= 0 ) {
		alert( "没有检索到结果" );
		}
		var pos = result.getPosition( 0 );
		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 );

SearchPolicy

检索策略类型

说明:

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

常量:

平台支持:

平台支持:

平台支持:

平台支持:

平台支持:

平台支持:

平台支持:

TRANSIT_TIME_FIRST

时间优先

说明:

检索策略类型常量,用于公交检索策略

TRANSIT_TRANSFER_FIRST

最少换乘优先

说明:

检索策略类型常量,用于公交检索策略

TRANSIT_WALK_FIRST

最少步行距离优先

说明:

检索策略类型常量,用于公交检索策略

TRANSIT_FEE_FIRST

选择车票花销最少优先

说明:

检索策略类型常量,用于公交检索策略

DRIVING_DIS_FIRST

最短距离优先

说明:

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

DRIVING_NO_EXPRESSWAY

无高速公路线路

说明:

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

DRIVING_FEE_FIRST

最少费用优先

说明:

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

SearchPoiResult

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

方法:

属性:

  • totalNumber:Number,只读属性,POI检索总结果数,若没有检索到则返回0。
  • currentNumber:Number,只读属性,当前页POI检索结果数,若没有检索到则返回0。
  • pageNumber:Number,只读属性,本次POI检索的总页数,若没有检索到则返回0。
  • pageIndex:Number,只读属性,当前页的索引值,从0开始,即0表示第一页。
  • poiList:Array,只读属性,POI检索结果数组,Array数组对象,数组内容为Position对象。

getPosition

获取指定索引的检索结果

Position poiResult.getPosition( index ) ;

说明:

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

返回值:

指定索引的检索结果。

SearchRouteResult

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

说明:

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

方法:

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

属性:

  • startPosition:Position,只读属性,线路检索结果的起始位置点对象。
  • endPosition:Position,只读属性,线路检索结果的终点位置点对象。
  • routeNumber:Number,只读属性,线路检索结果的方案数目,若未检索到有效结果则返回0。
  • routeList:Array,只读属性,线路检索结果数组,Array数组对象,数组内容为Route对象。

getRoute

获取指定索引的线路方案

Route poiResult.getRoute( index );

说明:

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

参数:

  • index (Number) 可选 要获取结果的索引值

返回值:

指定索引的线路方案。

Position

检索结果的位置点

属性:

  • point:Point,只读属性,位置点的经纬度坐标
  • address:DOMString,只读属性,如果没有位置点的地址信息则返回空字符串。
  • city:DOMString,只读属性,如果没有位置点的所属城市信息则返回空字符串。
  • name:DOMString,只读属性,如果没有位置点的名称则返回空字符串。
  • phone:DOMString,只读属性,如果没有位置点的电话信息则返回空字符串。
  • postcode:DOMString,只读属性,如果没有位置点的邮编信息则返回空字符串。

Position( point )

创建Position对象

var posObj = new plus.maps.Position( point );

说明:

创建Position对象

参数:

  • point (Point) 可选 位置点的经纬度坐标

返回值:

创建的Position对象。

示例:

// 创建检索位置点对象
var posObj = new plus.maps.Position( new plus.maps.Point(116.404,39.915) );

Route

地图中的路线对象

说明:

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

属性:

  • startPoint:Point,只读属性,路线起点地理坐标点
  • endPoint:Point,只读属性,路线终点地理坐标点
  • pointCount:Point,只读属性,路线坐标点段数
  • pointList:Array,只读属性,路线的地理坐标点数组,数组中保存Point对象。
  • distance:Number,只读属性,路线从起始点到终点的距离,单位为米。
  • routeTip:DOMString,只读属性,线路提示信息,没有提示信息则返回空字符串。

Route( ptStart, ptEnd )

创建Route对象

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

说明:

创建Route对象

参数:

  • ptStart (Point) 可选 路线起点经纬度坐标
  • ptEnd (Point) 可选 路线终点经纬度坐标

返回值:

创建的Route对象。

示例:

// 创建Route线路对象
var routeObj = new plus.maps.Route( new plus.maps.Point(116.404,39.915), new plus.maps.Point(116.347496,39.970191) );

UserLocationCallback

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

void onSuccess( state, point ) {
	// Get location code
}

说明:

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

参数:

  • state (Number) 可选 获取用户位置操作状态码,0表示成功,其它为错误码
  • point (Point) 可选 位置经纬度坐标,如果获取操作失败则为null对象

ClickEventHandler

用户点击地图回调事件

void onClick( point ) {
	// Click code
}

说明:

用户点击地图回调事件

参数:

  • point (Point) 可选 用户在地图上点击的坐标点

OverlayClickEventHandler

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

void onClick( overlay ) {
	// Click code
}

说明:

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

参数:

  • overlay (Overlay) 可选 overlay可以是Marker、Bubble、Circle、Polyline、Polygon对象的引用。

PoiSearchCallback

兴趣点检索完成事件

void onPoiSearchComplete( state, result ) {
	// JS code.
}

说明:

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

参数:

  • state (Number) 可选 0表示检索正确并返回结果,其它表示检索错误。
  • result (SearchPoiResult) 可选 若检索错误,则为null对象。

RouteSearchCallback

线路检索完成事件

void onRouteSearchComplete( state, result ) {
	// JS code.
}

说明:

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

参数:

  • state (Number) 可选 0表示检索正确并返回结果,其它表示检索错误。
  • result (SearchRouteResult) 可选 若检索错误,则为null对象。

关键词: html5puls,Maps   编辑时间: 2015-03-23 23:17:20

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
上一篇:Key
下一篇:Messaging
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐