登录
目录
当前位置： 首页 > 文档资料 > Dcloud HTML5+ 规范 >

maps

优质
小牛编辑
129浏览
2023-12-01

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

方法：

对象：

回调方法：

权限：

permissions


{
// ...
"permissions":{
	// ...
	"Maps": {
		"description": "地图"
	}
}
}

openSysMap

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


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

参数：

  • dst: ( Point ) 必选 导航目的地坐标

    要求使用WGS-84坐标系值，即GPS获取的值。

  • des: ( String ) 必选 导航目的地描述

    要求使用WGS-84坐标系，即GPS获取的值。

  • src: ( Point ) 必选 导航起始地描述

返回值：

void : 无

示例：


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

uni-app使用plus注意事项

create

创建Map对象


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

说明：

调用此方法创建后并不会显示，需要调用Webview窗口的append方法将其添加到Webview窗口后才能显示。 注意：此时需要通过styles参数的top/left/width/height属性设置控件的位置及大小。

参数：

  • id: ( String ) 必选 地图控件对象的全局标识

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

  • styles: ( MapStyles ) 可选 地图控件的显示参数

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

返回值：

Map : Map地图控件对象

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var map = null;
// 创建地图控件
function createMap() {
	if(!map){
		map = plus.maps.create('map', {
			top:'100px',
			left:'0px',
			width: '100%',
			height: '200px',
			position: 'static'
		});
		plus.webview.currentWebview().append(map);
	}
}
		</script>
		<style type="text/css">
*{
	-webkit-user-select: none;
}
html,body{
	margin: 0px;
	padding: 0px;
	height: 100%;
}
		</style>
	</head>
	<body>
		<button onclick="createMap()">创建地图控件</button>
	</body>
</html>

uni-app使用plus注意事项

getMapById

查找已经创建的Map对象


Map plus.maps.getMapById(id);

说明：

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

参数：

  • id: ( String ) 必选 Map对象的全局标识

    如果存在多个相同标识的Map对象，则返回第一个查找到的Map对象。 如果不存在指定标识的Map对象，则返回null。

返回值：

Map : Map地图控件对象

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var map = null;
// 创建地图控件
function createMap() {
	if(!map){
		map = plus.maps.create('map', {
			top:'100px',
			left:'0px',
			width: '100%',
			height: '200px',
			position: 'static'
		});
		plus.webview.currentWebview().append(map);
	}
}
// 查找地图控件
function findMap() {
	var b = plus.maps.getMapById('map');
	if(b){
		console.log('find success!');
		alert('success');
	} else {
		console.log('find failed!');
		alert('failed');
	}
}
		</script>
		<style type="text/css">
*{
	-webkit-user-select: none;
}
html,body{
	margin: 0px;
	padding: 0px;
	height: 100%;
}
		</style>
	</head>
	<body>
		<button onclick="createMap()">创建地图控件</button>
		<br/>
		<button onclick="findMap()">查找地图控件</button>
	</body>
</html>

uni-app使用plus注意事项

Map

地图控件对象

构造：

方法：

事件：

Map(domId, styles)

创建Map对象


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

说明：

创建Map地图控件对象，并指定其在Webview窗口中关联div或object标签的id号。 此时styles参数中的left/top/width/height属性值被忽略，通过DOM标签来确定Map对象的位置及大小。

参数：

  • domId: ( String ) 必选 关联到Webview中DOM节点的标识

    系统将查找到此id的DOM节点，并将Map地图控件对象的位置和大小与其保持一致。

  • styles: ( MapStyles ) 可选 地图控件的显示参数

返回值：

Map : Map地图控件对象

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready", plusReady, false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded", function(){
	em=document.getElementById("map");
	plusReady();
},false);
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 0px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

calculateArea

静态方法，计算面积


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

说明：

计算指定地理区域的面积，单位为平方米。 注：此功能仅百度地图支持，高德地图暂不支持此功能。

参数：

  • bounds: ( Bounds ) 必选 要计算的地理区域

  • successCallback: ( AreaCalculateCallback ) 可选 计算地理区域面积成功回调

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

  • errorCallback: ( ErrorCallback ) 可选 计算面积失败回调

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

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 获取当前地图显示的地理区域面积
function calculateArea(){
	var bounds = map.getBounds();
	plus.maps.Map.calculateArea( bounds, function(event){
		var area = event.area;  // 计算后的面积值
		alert("Area:"+area);
	}, function(e){
		alert("Failed:"+JSON.stringify(e));
	} );
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		计算面积<br/>
		<button onclick="calculateArea()">获取地理区域面积</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

calculateDistance

静态方法，计算距离


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

说明：

计算从pointStart坐标点到pointEnd坐标的实际直线距离，单位为米（m）。

参数：

  • pointStart: ( Point ) 必选 起点的坐标

  • pointEnd: ( Point ) 可选 终点的坐标

  • successCallback: ( DistanceCalculateCallback ) 可选 计算距离成功回调

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

  • errorCallback: ( ErrorCallback ) 可选 计算距离失败回调

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

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	var point1 = new plus.maps.Point(116.351442,39.972614);
	var point2 = new plus.maps.Point(116.340788,39.973319)
	plus.maps.Map.calculateDistance(point1,point2,function(event){
		var distance = event.distance;  // 转换后的距离值
		alert("Distance:"+distance);
	},function(e){
		alert("Failed:"+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		计算距离<br/>
	</body>
</html>

uni-app使用plus注意事项

convertCoordinates

静态方法，坐标转换


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

说明：

将第三方坐标系坐标转换成当前地图的坐标系坐标。 转换成功通过successCallback返回，转换失败则通过errorCallback返回。

参数：

  • point: ( Point ) 必选 要转换的坐标

  • options: ( CoordinateConvertOptions ) 可选 坐标转换的参数

  • successCallback: ( CoordinateConvertCallback ) 可选 坐标转换成功回调

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

  • errorCallback: ( ErrorCallback ) 可选 坐标转换失败回调

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

返回值：

void : 无

平台支持：

  • Android - 2.3+ (支持) :

    仅百度地图支持此功能。

  • iOS - 5.1+ (支持) :

    仅百度地图支持此功能。

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	var point = new plus.maps.Point(116.3447905236,39.9663258208);
	plus.maps.Map.convertCoordinates(point,{},function(event){
		var point = event.coord;  // 转换后的坐标值
		var coordType = event.coordType;	// 转换后的坐标系类型
		alert("Success:"+JSON.stringify(event));
	},function(e){
		alert("Failed:"+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		坐标转换<br/>
	</body>
</html>

uni-app使用plus注意事项

geocode

静态方法，地理编码


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

说明：

将地理位置信息转换为坐标点。 转换成功通过successCallback返回，转换失败则通过errorCallback返回。

参数：

  • address: ( String ) 必选 要转换的地理位置信息

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

  • options: ( GeocodeOptions ) 可选 地理编码的参数

  • successCallback: ( GeocodeCallback ) 可选 地理编码转换成功回调

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

  • errorCallback: ( ErrorCallback ) 可选 地理编码转换失败回调

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

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	plus.maps.Map.geocode("海淀区大钟寺地铁站",{city:"北京"},function(event){
		var address = event.address;  // 转换后的地理位置
		var point = event.coord;  // 转换后的坐标信息
		var coordType = event.coordType;	// 转换后的坐标系类型
		alert("Coord:"+JSON.stringify(point));
	},function(e){
		alert("Failed:"+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		地理编码<br/>
	</body>
</html>

uni-app使用plus注意事项

reverseGeocode

静态方法，反向地理编码


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

说明：

将坐标点转换为地理位置信息。 转换成功通过successCallback返回，转换失败则通过errorCallback返回。

参数：

  • point: ( Point ) 必选 要转换的坐标

  • options: ( GeocodeOptions ) 可选 地理编码的参数

  • successCallback: ( GeocodeCallback ) 可选 反向地理编码转换成功回调

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

  • errorCallback: ( ErrorCallback ) 可选 反向地理编码转换失败回调

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

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
	var point = new plus.maps.Point(116.347496,39.970191);
	plus.maps.Map.reverseGeocode(point,{},function(event){
		var address = event.address;  // 转换后的地理位置
		var point = event.coord;  // 转换后的坐标信息
		var coordType = event.coordType;	// 转换后的坐标系类型
		alert("Address:"+address);
	},function(e){
		alert("Failed:"+JSON.stringify(e));
	});
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		反向地理编码<br/>
	</body>
</html>

uni-app使用plus注意事项

addOverlay

向地图中添加覆盖物


Boolean mapObj.addOverlay( overlay );

说明：

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

参数：

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

返回值：

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

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 添加标点
var marker=null;
function addMarker(){
	if(marker){return;}
	marker=new plus.maps.Marker(new plus.maps.Point(116.347496,39.970191));
	marker.setIcon("/logo.png");
	marker.setLabel("HBuilder");
	var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
	marker.setBubble(bubble);
	map.addOverlay(marker);
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		向地图中添加覆盖物<br/>
		<button onclick="addMarker()">添加标点</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

centerAndZoom

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


void mapObj.centerAndZoom( center, zoom );

说明：

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

参数：

  • center: ( Point ) 必选 地图初始化的中心点坐标

  • zoom: ( Number ) 必选 地图初始化的缩放级别

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 0px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

clearOverlays

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


void mapObj.clearOverlays();

说明：

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

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.347496,39.970191), 18 );
	addMarker();
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 添加标点
var markers=[],i=0;
function addMarker(){
	var marker=new plus.maps.Marker(new plus.maps.Point(116.347496+0.001*i,39.970191+0.001*i));
	marker.setIcon("/logo.png");
	marker.setLabel("HBuilder");
	var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
	marker.setBubble(bubble);
	map.addOverlay(marker);
	markers.push(marker);
	i++;
}
// 清除所有标点
function clearMarker(){
	map.clearOverlays();
	markers=[];
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		清除地图中所有覆盖物对象<br/>
		<button onclick="addMarker()">添加标点</button>
		<button onclick="clearMarker()">清除标点</button><br/>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

close

关闭地图控件


void mapObj.close();

说明：

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

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready', plusReady, false);
}

var map=null;
// 显示地图
function showMap(){
	map||(map=new plus.maps.Map('map'),
		map.centerAndZoom(new plus.maps.Point(116.3977,39.906016), 12));
	map.show();
}
// 关闭地图
function closeMap(){
	map&&(map.close(),map=null);
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		关闭地图控件<br/>
		<button onclick="showMap()">显示地图</button>
		<button onclick="closeMap()">关闭地图</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

getBounds

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


Bounds mapObj.getBounds();

说明：

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

参数：

无

返回值：

Bounds : 获取到

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 获取当前地图显示的地理区域
function getCurrentBounds(){
	alert( JSON.stringify(map.getBounds()) );
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		获取当前地图显示的地理区域<br/>
		<button onclick="getCurrentBounds()">获取地理区域</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

getCenter

获取地图中心点位置


Point mapObj.getCenter();

说明：

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

参数：

无

返回值：

Point : 地图中心点坐标

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 获取地图的中心点
function getCenter(){
	var center = map.getCenter();
	alert( JSON.stringify(center) );
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		获取地图中心点<br/>
		<button onclick="getCenter()">GetCenter</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

getCurrentCenter

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


Boolean mapObj.getCurrentCenter( callback );

说明：

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

参数：

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

返回值：

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

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 获取当前地图显示的地图中心点位置
function getCurrentCenter(){
	map.getCurrentCenter( function ( state, point ){
		if( 0 == state ){
			alert( JSON.stringify(point) );
		}else{
			alert( "Failed!" );
		}
	} );
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		获取当前地图显示的地图中心点位置<br/>
		<button onclick="getCurrentCenter()">获取中心位置</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

getMapType

获取地图的显示类型


void mapObj.getMapType();

参数：

无

返回值：

MapType : 地图视图的显示类型

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 获取地图的显示类型
function getMapType(){
	alert(map.getMapType()==plus.maps.MapType.MAPTYPE_SATELLITE?"卫星视图":"街道视图" );
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		设置地图类型<br/>
		<button onclick="getMapType()">视图类型</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

getUserLocation

获取用户的当前位置信息


Boolean mapObj.getUserLocation( callback );

说明：

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

参数：

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

返回值：

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

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 获取用户的当前位置信息
function getUserLocation(){
	map.getUserLocation( function ( state, point ){
		if( 0 == state ){
			alert( JSON.stringify(point) );
		}else{
			alert( "Failed!" );
		}
	} );
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		获取用户的当前位置信息<br/>
		<button onclick="getUserLocation()">获取位置</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

getZoom

获取地图的缩放级别


Number mapObj.getZoom();

说明：

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

参数：

无

返回值：

Number : 地图视图的缩放级别

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 获取地图的缩放级别
function getZoom(){
	plus.nativeUI.alert( map.getZoom() );
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		获取地图的缩放级别<br/>
		<button onclick="getZoom()">GetZoom</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

hide

隐藏地图控件


void mapObj.hide();

说明：

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

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 显示地图
function showMap(){
	map.show();
}
// 隐藏地图
function hideMap(){
	map.hide();
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		隐藏地图控件<br/>
		<button onclick="showMap()">显示地图</button>
		<button onclick="hideMap()">隐藏地图</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

isShowUserLocation

获取是否显示用户位置


Boolean mapObj.isShowUserLocation();

参数：

无

返回值：

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

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 打开用户位置
function showUserLocation(){
	map.showUserLocation( true );
}
// 关闭用户位置
function hideUserLocation(){
	map.showUserLocation( false );
}
// 获取是否打开用户位置
function isUserLocation(){
	alert( map.isShowUserLocation() );
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		获取是否显示用户位置<br/>
		<button onclick="showUserLocation()">显示用户位置</button>
		<button onclick="hideUserLocation()">关闭用户位置</button><br/>
		<button onclick="isUserLocation()">是否显示用户位置</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

isShowZoomControls

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


Boolean mapObj.isShowZoomControls();

参数：

无

返回值：

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

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 打开用户位置
function showZoomControls(){
	map.showZoomControls( true );
}
// 关闭用户位置
function hideZoomControls(){
	map.showZoomControls( false );
}
// 获取是否打开用户位置
function isZoomControls(){
	alert( map.isShowZoomControls() );
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		获取是否显示地图内置缩放控件<br/>
		<button onclick="showZoomControls()">显示缩放控件</button>
		<button onclick="hideZoomControls()">关闭缩放控件</button><br/>
		<button onclick="isZoomControls()">是否显示缩放控件</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

isTraffic

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


Boolean mapObj.isTraffic();

参数：

无

返回值：

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

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 打开地图交通信息图层
function showTraffic(){
	map.setTraffic( true );
}
// 关闭地图交通信息图层
function hideTraffic(){
	map.setTraffic( false );
}
// 获取是否打开地图交通信息图层
function isTraffic(){
	alert( map.isTraffic() );
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		获取是否打开地图交通信息图层<br/>
		<button onclick="showTraffic()">显示交通信息</button>
		<button onclick="hideTraffic()">关闭交通信息</button><br/>
		<button onclick="isTraffic()">是否显示交通信息</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

removeOverlay

从地图中删除覆盖物对象


void mapObj.removeOverlay( overlay );

说明：

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

参数：

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

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 添加标点
var marker=null;
function addMarker(){
	if(marker){return;}
	marker=new plus.maps.Marker(new plus.maps.Point(116.347496,39.970191));
	marker.setIcon("/logo.png");
	marker.setLabel("HBuilder");
	var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
	marker.setBubble(bubble);
	map.addOverlay(marker);
}
// 删除标点
function removeMarker(){
	map.removeOverlay(marker);
	delete marker;
	marker=null;
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		向地图中添加覆盖物<br/>
		<button onclick="addMarker()">添加标点</button>
		<button onclick="removeMarker()">删除标点</button><br/>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

reset

重置地图


void mapObj.reset();

说明：

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

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 重置地图
function resetMap(){
	map.reset();
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		重置地图 - 用户操作移动、缩放地图后重置上次设置的中心点和缩放级别<br/>
		<button onclick="resetMap()">Reset</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

resize

重设地图控件大小


void mapObj.resize();

说明：

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

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 改变地图大小
function resizeMap(){
	em.style.width = "50%";
	map.resize();
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		重设地图控件大小<br/>
		<button onclick="resizeMap()">Resize</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

setCenter

设置地图的中心点


void mapObj.setCenter( center );

说明：

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

参数：

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

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 设置地图的中心点
function setCenter(){
	var center = new plus.maps.Point( 118.123, 35.456 );
	map.setCenter( center );
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		设置地图的中心点<br/>
		<button onclick="setCenter()">SetCenter</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

setMapType

设置地图的视图类型


void mapObj.setMapType( type );

说明：

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

参数：

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

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 街道视图
function normalMap(){
	map.setMapType( plus.maps.MapType.MAPTYPE_NORMAL );
}
// 卫星视图
function stelliteMap(){
	map.setMapType( plus.maps.MapType.MAPTYPE_SATELLITE );
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		设置地图类型<br/>
		<button onclick="normalMap()">街道视图</button>
		<button onclick="stelliteMap()">卫星视图</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

setStyles

设置地图控件的配置参数


void mapObj.setStyles(styles);

说明：

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

参数：

  • styles: ( MapStyles ) 必选 要更新的配置参数

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var map = null;
// 创建地图控件
function createMap() {
	if(!map){
		map = plus.maps.create('map', {
			top:'100px',
			left:'0px',
			width: '100%',
			height: '200px',
			position: 'static'
		});
		plus.webview.currentWebview().append(map);
	}
}
// 更新地图控件
function updateMap() {
	map.setStyles({
		top:'200px'		// 调整地图的位置
	});
}
		</script>
		<style type="text/css">
*{
	-webkit-user-select: none;
}
html,body{
	margin: 0px;
	padding: 0px;
	height: 100%;
}
		</style>
	</head>
	<body>
		<button onclick="createMap()">创建地图控件</button>
		<button onclick="updateMap()">更新地图控件</button>
	</body>
</html>

uni-app使用plus注意事项

setTraffic

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


void mapObj.setTraffic( traffic );

说明：

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

参数：

  • traffic: ( Boolean ) 必选 设置是否显示交通信息图层

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 打开地图交通信息图层
function showTraffic(){
	map.setTraffic( true );
}
// 关闭地图交通信息图层
function hideTraffic(){
	map.setTraffic( false );
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		设置是否打开地图交通信息图层<br/>
		<button onclick="showTraffic()">显示交通信息</button>
		<button onclick="hideTraffic()">关闭交通信息</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

setZoom

设置地图的缩放级别


void mapObj.setZoom( zoom );

说明：

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

参数：

  • zoom: ( Number ) 必选 要设置的新的缩放级别，有效范围为3-21（高德地图为3-20，百度地图为4-21）

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 设置地图的缩放级别
function setZoom(){
	map.setZoom( 22 );
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		设置地图的缩放级别<br/>
		<button onclick="setZoom()">SetZoom</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

show

显示地图控件


void mapObj.show();

说明：

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

参数：

无

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 显示地图
function showMap(){
	map.show();
}
// 隐藏地图
function hideMap(){
	map.hide();
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		显示地图控件<br/>
		<button onclick="showMap()">显示地图</button>
		<button onclick="hideMap()">隐藏地图</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

showUserLocation

显示用户位置


void mapObj.showUserLocation( display );

说明：

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

参数：

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

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 打开用户位置
function showUserLocation(){
	map.showUserLocation( true );
}
// 关闭用户位置
function hideUserLocation(){
	map.showUserLocation( false );
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		显示用户位置<br/>
		<button onclick="showUserLocation()">显示用户位置</button>
		<button onclick="hideUserLocation()">关闭用户位置</button>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

showZoomControls

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


void mapObj.showZoomControls( display );

说明：

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

参数：

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

返回值：

void : 无

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
// 打开用户位置
function showZoomControls(){
	map.showZoomControls( true );
}
// 关闭用户位置
function hideZoomControls(){
	map.showZoomControls( false );
}
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		设置是否显示地图内置缩放控件<br/>
		<button onclick="showZoomControls()">显示缩放控件</button>
		<button onclick="hideZoomControls()">关闭缩放控件</button><br/>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

onclick

用户点击地图事件


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

说明：

ClickEventHandler 类型

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
	map.onclick = function( point ){
		alert( JSON.stringify(point) );
	}
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		用户点击地图事件<br/>
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

onstatuschanged

地图状态改变事件


mapObj.onstatuschanged = function( event ){
	// JS code.
}

说明：

StatusChangedEventHandler 类型

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

示例：


<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
	map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
	map.onstatuschanged = function( e ){
		alert( "StatusChanged: "+JSON.stringify(e) );
	}
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
		</script>
		<style type="text/css">
#map {
	width: 100%;
	position: fixed;
	top: 100px;
	bottom: 0px;
	line-height: 200px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		地图状态改变事件<br/>用户拖动或缩放时触发。
		<div id="map">地图加载中...</div>
	</body>
</html>

uni-app使用plus注意事项

MapStyles

地图控件对象的参数


interface plus.maps.MapStyles {
	attribute Point center;
	attribute Number zoom;
	attribute MapType type;
	attribute Boolean traffic;
	attribute Boolean zoomControls;
	
	attribute String top;
	attribute String left;
	attribute String width;
	attribute String height;
	attribute String position;
}

说明：

设置地图对象显示时使用的参数，如地图的中心位置、缩放级别等。

属性：

  • center: (Point 类型 )地图的中心位置

    未设置则使用地图的默认中心点（由地图供应商确定）。

  • zoom: (Number 类型 )地图的缩放级别

    有效范围为有效范围为3-21（高德地图为3-20，百度地图为4-21），默认值为12，设置无效的值则使用默认值。

  • type: (MapType 类型 )地图的视图类型

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

  • traffic: (Boolean 类型 )地图的是否显示交通信息

    true表示显示地图的交通信息图层，false则不显示，默认值为false。

  • zoomControls: (Boolean 类型 )是否显示地图的内置缩放控件

    true表示显示地图的内置缩放控件，false则不显示，默认值为false。

  • top: (String 类型 )地图控件左上角的垂直偏移量

    可取值： 像素值，如"100px"； 百分比，如"10%"，相对于父Webview窗口的高度； 自动计算，如"auto",根据height值自动计算，相对于父Webview窗口垂直居中。

  • left: (String 类型 )地图控件左上角的水平偏移量

    可取值： 像素值，如"100px"； 百分比，如"10%"，相对于父Webview窗口的宽度； 自动计算，如"auto"，根据width值自动计算，相对于父Webview窗口水平居中。 默认值为"0px"。

  • width: (String 类型 )地图控件的宽度

    可取值： 像素值，如"100px"； 百分比，如"10%"，相对于父Webview窗口的宽度。 默认值为"100%"。

  • height: (String 类型 )地图控件的高度

    可取值： 像素值，如"100px"； 百分比，如"10%"，相对于父Webview窗口的高度。 默认值为"100%"。

  • position: (String 类型 )地图控件在Webview窗口的布局模式

    可取值： "static" - 静态布局模式，如果页面存在滚动条则随窗口内容滚动； "absolute" - 绝对布局模式，如果页面存在滚动条不随窗口内容滚动； 默认值为"static"。

GeocodeOptions

地理编码转换的参数

属性：

  • coordType: (String 类型 )源数据的坐标系类型

    仅在反向地理编码转换时生效。 “wgs84”：表示WGS-84坐标系； “gcj02”：表示国测局经纬度坐标系； “bd09”：表示百度墨卡托坐标系； “bd09ll”：表示百度经纬度坐标系； 默认使用wgs84坐标系。

  • city: (String 类型 )源地址所属的城市

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

CoordinateConvertOptions

地图坐标转换的参数

属性：

  • coordType: (String 类型 )源数据的坐标系类型

    “wgs84”：表示WGS-84坐标系； “gcj02”：表示国测局经纬度坐标系； “bd09”：表示百度墨卡托坐标系； “bd09ll”：表示百度经纬度坐标系； 默认使用wgs84坐标系。

Point

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

说明：

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

构造：

方法：

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

Point(lng,lat)

创建Point对象


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

参数：

  • lng: ( Number ) 必选 坐标的经度

  • lat: ( Number ) 必选 坐标的纬度

返回值：

Point : 创建的坐标对象

示例：


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

uni-app使用plus注意事项

setLng

设置坐标点的经度


void ptObj.setLng( lng );

参数：

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

返回值：

void : 无

getLng

获取坐标的经度


Number ptObj.getLng();

参数：

无

返回值：

Number : 坐标的经度

setLat

设置坐标的纬度


void ptObj.setLat( lat );

参数：

无

返回值：

void : 无

getLat

获取坐标的纬度


Number ptObj.getLat();

参数：

无

返回值：

Number : 坐标的纬度

equals

判断两个坐标点是否相等


Boolean ptObj.equals( Point pt );

参数：

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

返回值：

Boolean : 坐标对象是否相等，相等则返回true，否则返回false。

示例：


var pt1 = new plus.maps.Point( 116.123, 36.456 );
var pt2 = new plus.maps.Point( 117.234, 37.567 );
var pt3 = new plus.maps.Point( 117.789, 36.456 );
alert( pt1.equals(pt2) ); // 提示false
alert( pt1.equals(pt3) ); // 提示false

uni-app使用plus注意事项

Bounds

地理区域

说明：

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

构造：

方法：

Bounds(northeast,southwest)

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

uni-app使用plus注意事项

Bounds(nelng,nelat,swlng,swlat)

创建Bounds对象


var bounds = new plus.maps.Bounds( nelng, nelat, swlng, swlat );

参数：

  • nelng: ( Number ) 必选 东北坐标点的经度值

  • nelat: ( Number ) 必选 东北坐标点的纬度值

  • swlng: ( Number ) 必选 西南坐标点的经度值

  • swlat: ( Number ) 必选 西南坐标点的纬度值

返回值：

Bounds : 创建的Bounds对象

示例：


// 创建地理区域对象
var bounds = new plus.maps.Bounds( 116.123, 36.456, 116.111, 36.401 );

uni-app使用plus注意事项

setNorthEast

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


void bounds.setNorthEast( point );

说明：

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

参数：

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

返回值：

void : 无

getNorthEast

地理区域的东北坐标点


Point bounds.getNorthEast();

说明：

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

参数：

无

返回值：

Point : 东北坐标点

setSouthWest

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


void bounds.setSouthWest( point );

参数：

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

返回值：

void : 无

getSouthWest

地理区域的西南坐标点


Point bounds.getSouthWest();

参数：

无

返回值：

Point : 西南坐标点

contains

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


Boolean bounds.contains( point );

参数：

  • point: ( Point ) 必选 要判断的坐标点对象

返回值：

Boolean : 地理区域包含指定的坐标点，相等则返回true，否则返回false。

示例：


var bd1 = new plus.maps.Bounds( 116.123, 36.456, 116.111, 36.401 );
var pt1 = new plus.maps.Point( 116.120, 36.450 );
var pt1 = new plus.maps.Point( 117.234, 37.567 );
alert( bd1.contains(pt1) ); // 提示true
alert( bd1.contains(pt2) ); // 提示false

uni-app使用plus注意事项

equals

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


Boolean bounds.equals( Bounds bounds );

参数：

  • bounds: ( Bounds ) 必选 要比较的地理区域对象

返回值：

Boolean : 地理区域对象是否相等，相等则返回true，否则返回false。

示例：


var bd1 = new plus.maps.Bounds( 116.123, 36.456, 116.111, 36.401 );
var bd2 = new plus.maps.Bounds( 117.234, 37.567, 116.224, 36.557 );
var bd3 = new plus.maps.Bounds( 116.123, 36.456, 116.111, 36.401 );
alert( bd1.equals(bd2) ); // 提示false
alert( bd1.equals(bd3) ); // 提示false

uni-app使用plus注意事项

getCenter

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


Point bounds.getCenter();

参数：

无

返回值：

Point : 地理区域的中心坐标点，如果地理区域无效则返回null。

示例：


var bd1 = new plus.maps.Bounds( 116.123, 36.456, 116.111, 36.401 );
var center = bd1.getCenter();// (116.117,36.4285)

uni-app使用plus注意事项

MapType

地图视图类型

常量：

  • MAPTYPE_NORMAL: (Number 类型 )普通街道视图类型

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

  • MAPTYPE_SATELLITE: (Number 类型 )卫星视图

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

Overlay

地图覆盖物基类对象


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

说明：

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

方法：

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

isVisible

判断地图覆盖物是否可见


Boolean overlayObj.isVisible();

说明：

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

参数：

无

返回值：

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

show

显示地图上的覆盖物


void overlayObj.show();

说明：

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

参数：

无

返回值：

void : 无

hide

隐藏地图上的覆盖物


void overlayObj.show();

说明：

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

参数：

无

返回值：

void : 无

Marker

地图上显示的标点对象

说明：

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

构造：

方法：

事件：

  • onclick: 用户点击地图标点事件
  • onDrag: 用户拖拽标点事件

Marker( point )

创建地图标点Marker对象


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

参数：

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

返回值：

Marker : 创建好的地图标点对象

示例：


	var marker=new plus.maps.Marker(new plus.maps.Point(116.347496,39.970191));
	marker.setIcon("/logo.png");
	marker.setLabel("HBuilder");
	var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
	marker.setBubble(bubble);
	map.addOverlay(marker);

uni-app使用plus注意事项

bringToTop

覆盖物显示到最上层


void overlayObj.bringToTop();

说明：

常用于覆盖物相互覆盖时调整覆盖物的显示顺序。 只有添加到地图上的覆盖物才能看到效果； 如果覆盖物对象已经在地图上隐藏再调用此方法将无效果。

参数：

无

返回值：

void : 无

平台支持：

  • Android - 2.3+ (支持)
  • iOS - 5.1+ (不支持) :

    调用此API无任何效果。

setPoint

设置标点对象的坐标


void markObj.setPoint( point );

说明：

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

参数：

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

返回值：

void : 无

getPoint

获取标点的坐标


Point markObj.getPoint();

参数：

无

返回值：

Point : 标点的坐标对象

setIcon

设置标点上显示的图标


void markObj.setIcon( icon );

说明：

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

参数：

  • icon: ( String ) 必选 要设置标点图标的URL地址

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

返回值：

void : 无

setIcons

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


void markObj.setIcons( icons, period );

说明：

设置图标数组后则按照指定的间隔时间轮播数组中图标。 设置图标数组后将忽略setIcon方法设置的图标，未设置则显示setIcon设置的图标。

参数：

  • icons: ( Array[String] ) 必选 要设置标点图标数组

    图标数组中仅支持本地图标URL地址，支持png、jpg/jpeg、bmp格式。 注：所有图片应该使用统一的分辨率，否则可能会显示不正常。

返回值：

void : 无

setLabel

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


void markObj.setLabel( label );

说明：

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

参数：

  • label: ( String ) 必选 要设置标点的标注文字

返回值：

void : 无

getLabel

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


String markObj.getLabel();

参数：

无

返回值：

String : 标点的标注文本内容

setBubble

设置标点的气泡内容


void markObj.setBubble( buuble, pop );

说明：

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

参数：

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

  • pop: ( Boolean ) 可选 是否默认弹出气泡

    true表示弹出显示气泡，false表示不弹出显示气泡（当用户点击时才弹出），默认值为false。 当添加标点时自动弹出显示气泡，如果已经添加标点则调用setBubble时弹出显示气泡。

返回值：

void : 无

getBubble

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


Bubble markObj.getBubble();

说明：

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

参数：

无

返回值：

Bubble : 标点关联的气泡对象

hideBubble

隐藏标点上显示的气泡


void markObj.hideBubble();

说明：

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

参数：

无

返回值：

void : 无

setDraggable

设置标点的是否允许拖拽


void markObj.setDraggable( draggable );

说明：

设置标点可拖拽后，用户按住标点后拖动，标点会跟随手的拖拽而移动。 拖拽后会更新标点的坐标信息。 注：拖动前需要先在标点上长按。

参数：

  • draggable: ( Boolean ) 必选 要设置标点是否可拖拽

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

返回值：

void : 无

isDraggable

获取标点是否允许拖拽


Boolean markObj.isDraggable();

参数：

无

返回值：

Boolean : true表示标点可拖拽，false表示标点不可拖拽

onclick

用户点击地图标点事件


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

说明：

OverlayClickEventHandler 类型

示例：


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

uni-app使用plus注意事项

onDrag

用户拖拽标点事件


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

说明：

OverlayDragEventHandler 类型

可调用标点对象的markObj.setDraggable(true)方法设置标点允许拖拽，当用户拖拽标点对象时触发此事件。

平台支持：

  • Android - 2.3+ (支持)
  • iOS - 5.1+ (不支持) :

    不触发此事件。

示例：


// 用户点击标点将弹出标点上的文本 
markObj.onDrag = function ( target ) {
	alert( "Drag:" + JSON.stringify(target.getPoint()) );
}

uni-app使用plus注意事项

Bubble

地图上显示的气泡对象

说明：

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

构造：

方法：

事件：

Bubble( label )

创建气泡对象


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

参数：

  • label: ( String ) 必选 气泡上显示的文字

返回值：

Bubble : 气泡对象

示例：


	var marker=new plus.maps.Marker(new plus.maps.Point(116.347496,39.970191));
	marker.setIcon("/logo.png");
	marker.setLabel("HBuilder");
	var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
	marker.setBubble(bubble);
	map.addOverlay(marker);

uni-app使用plus注意事项

setIcon

设置气泡上显示的图标


void bubObj.setIcon( icon );

说明：

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

参数：

  • icon: ( String ) 必选 设置气泡图标的URL地址

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

返回值：

void : 无

setLabel

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


void bubObj.setLabel( label );

说明：

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

参数：

  • label: ( String ) 必选 要设置气泡上显示的文字

返回值：

void : 无

getLabel

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


String bubObj.getLabel();

参数：

无

返回值：

String : 气泡上显示的文字内容

belongMarker

获取气泡所属的标点对象


Marker bubObj.belongMarker();

参数：

无

返回值：

Marker : 气泡所属的标点对象。

loadImage

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


void bubObj.loadImage( path );

说明：

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

参数：

  • path: ( String ) 必选 要加载的图片路径

    支持以下图片路径： 相对路径 - 相对于当前页面的host位置，如"a.jpg"，注意当前页面为网络地址则不支持； 绝对路径 - 系统绝对路径，如Android平台"/storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/www/ａ.jpg"，iOS平台"/var/mobile/Containers/Data/Application/757966CF-345C-4348-B07F-EEF83CF9A369/Library/Pandora/apps/HBuilder/www/a.png"； 相对路径URL(RelativeURL) - 以"_"开头的相对路径，如"_www/a.jpg"、"_doc/b.jpg"、"_documents/c.jpg"、"_downloads/d.jpg"； 本地路径URL - 以“file://”开头，后面跟随系统绝对路径。

返回值：

void : 无

loadImageDataURL

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


void bubObj.loadImageDataURL( data );

说明：

通过加载图片数据来自定义气泡显示的内容，加载图片后将清空气泡使用的图标及文字内容。 图片数据可通过Canvas自定义绘制后调用toDataURL来获取。

参数：

  • data: ( String ) 必选 要加载的图片数据

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

返回值：

void : 无

onclick

用户点击气泡事件


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

说明：

OverlayClickEventHandler 类型

示例：


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

uni-app使用plus注意事项

Circle

地图上显示的圆圈对象

说明：

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

构造：

方法：

Circle( center, radius )

创建Circle对象


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

参数：

  • center: ( Point ) 必选 圆圈中心点的经纬度坐标

  • radius: ( Number ) 必选 圆圈的半径，单位为米

返回值：

Circle : 地图上圆圈对象

示例：


	var circleObj=new plus.maps.Circle(new plus.maps.Point(116.347496,39.970191),500);
	map.addOverlay(circleObj);

uni-app使用plus注意事项

setCenter

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


void circleObj.setCenter( point );

说明：

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

参数：

  • point: ( Point ) 必选 圆圈的中心点坐标

返回值：

void : 无

示例：


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

uni-app使用plus注意事项

getCenter

获取圆圈中心点的坐标


Point circleObj.getCenter();

参数：

无

返回值：

Point : 圆圈中心点的坐标对象

setRadius

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


void circleObj.setRadius( radius );

说明：

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

参数：

  • radius: ( Number ) 必选 圆圈的半径，单位为米

返回值：

void : 无

示例：


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

uni-app使用plus注意事项

getRadius

获取圆圈的半径


Number circleObj.getRadius();

参数：

无

返回值：

Number : 圆圈的半径，单位为米。

setStrokeColor

设置圆圈的边框颜色


void circleObj.setStrokeColor( color );

说明：

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

参数：

  • color: ( String ) 必选 圆圈边框的线条颜色值

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

返回值：

void : 无

示例：


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

uni-app使用plus注意事项

getStrokeColor

获取圆圈的边框颜色


String circleObj.getStrokeColor();

参数：

无

返回值：

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

setStrokeOpacity

设置圆圈的边框透明度


void circleObj.setStrokeOpacity( opacity );

说明：

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

参数：

  • opacity: ( Number ) 必选 圆圈边框的透明度

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

返回值：

void : 无

示例：


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

uni-app使用plus注意事项

getStrokeOpacity

获取圆圈边框的透明度


Number circleObj.getStrokeOpacity();

参数：

无

返回值：

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

setFillColor

设置圆圈的填充颜色


void circleObj.setFillColor( color );

说明：

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

参数：

  • color: ( String ) 必选 圆圈填充的颜色值

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

返回值：

void : 无

示例：


// 设置圆圈的填充颜色为红色
circleObj.setFillColor( "#ff0000" );

uni-app使用plus注意事项

getFillColor

获取圆圈的填充颜色


String circleObj.getFillColor();

说明：

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

参数：

无

返回值：

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

setFillOpacity

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


void circleObj.setFillOpacity( opacity );

说明：

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

参数：

  • opacity: ( Number ) 必选 圆圈填充颜色的透明度

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

返回值：

void : 无

示例：


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

uni-app使用plus注意事项

getFillOpacity

获取圆圈填充色的透明度


Number circleObj.getFillOpacity();

参数：

无

返回值：

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

setLineWidth

设置圆圈边框的线条宽度


void circleObj.setLineWidth( width );

说明：

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

参数：

  • width: ( Number ) 必选 圆圈边框的线条宽度

    取值范围为正整数。

返回值：

void : 无

示例：


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

uni-app使用plus注意事项

getLineWidth

获取圆圈边框的线条宽度


Number circleObj.getLineWidth();

参数：

无

返回值：

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

Polyline

地图上显示的折线对象

说明：

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

构造：

方法：

Polyline( points )

创建Polyline对象


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

参数：

  • points: ( Array ) 必选 折线的顶点坐标，Point数组

返回值：

Polyline : 地图上折线对象

示例：


// 创建一个折线对象
var points = new Array( new plus.maps.Point(116.0,39.0), new plus.maps.Point(115.0,38.0), new plus.maps.Point(117.0,38.0) );
var polylineObj = new plus.maps.Polyline( points );

uni-app使用plus注意事项

setPath

设置折线的顶点坐标


void polylineObj.setPath( points );

说明：

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

参数：

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

返回值：

void : 无

示例：


// 设置新的折线顶点
var points = new Array( new plus.maps.Point(116.0,39.0), new plus.maps.Point(115.0,38.0), new plus.maps.Point(117.0,38.0) );
polylineObj.setPath( points );

uni-app使用plus注意事项

getPath

获取折线的顶点坐标


Array<Point> polylineObj.getPath();

参数：

无

返回值：

Array[Point] : 折线的顶点坐标数组。

setStrokeColor

设置折线的颜色


void polylineObj.setStrokeColor( color );

说明：

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

参数：

  • color: ( String ) 必选 折线的颜色值

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

返回值：

void : 无

示例：


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

uni-app使用plus注意事项

getStrokeColor

获取折线的颜色


String polylineObj.getStrokeColor();

参数：

无

返回值：

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

setStrokeOpacity

设置折线的透明度


void polylineObj.setStrokeOpacity( opacity );

说明：

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

参数：

  • opacity: ( Number ) 必选 折线的透明度

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

返回值：

void : 无

示例：


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

uni-app使用plus注意事项

getStrokeOpacity

获取折线的透明度


Number polylineObj.getStrokeOpacity();

参数：

无

返回值：

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

setLineWidth

设置折线的线条宽度


void polylineObj.setLineWidth( width );

说明：

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

参数：

  • width: ( Number ) 必选 折线的线条宽度

    取值范围为正整数。

返回值：

void : 无

示例：


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

uni-app使用plus注意事项

getLineWidth

获取折线的线条宽度


Number polylineObj.getLineWidth();

参数：

无

返回值：

Number : 折线的线条宽度，正整数。

Polygon

地图上显示的多边形对象

说明：

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

构造：

方法：

Polygon( points )

创建Polygon对象


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

参数：

  • points: ( Array ) 必选 多边形的顶点坐标，Point数组

返回值：

Polygon : 地图上多边形对象

示例：


// 创建一个多边形对象
var points = new Array( new plus.maps.Point(116.0,39.0), new plus.maps.Point(115.0,38.0), new plus.maps.Point(117.0,38.0) );
var polygonObj = new plus.maps.Polygon( points );

uni-app使用plus注意事项

setPath

设置多边形的顶点坐标


void polygonObj.setPath( points );

说明：

该方法设置将导致地图中的多边形立即更新。

参数：

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

返回值：

void : 无

示例：


// 设置新的多边形顶点
var points = new Array( new plus.maps.Point(116.0,39.0), new plus.maps.Point(115.0,38.0), new plus.maps.Point(117.0,38.0) );
polygonObj.setPath( points );

uni-app使用plus注意事项

getPath

获取多边形的顶点坐标


Array<Point> polygonObj.getPath();

参数：

无

返回值：

Array[Point] : 多边形的顶点坐标数组。

setStrokeColor

设置多边形的颜色


void polygonObj.setStrokeColor( color );

说明：

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

参数：

  • color: ( String ) 必选 多边形边框的颜色值

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

返回值：

void : 无

示例：


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

uni-app使用plus注意事项

getStrokeColor

获取多边形边框的颜色


String polygonObj.getStrokeColor();

参数：

无

返回值：

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

setStrokeOpacity

设置多边形的透明度


void polygonObj.setStrokeOpacity( opacity );

说明：

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

参数：

  • opacity: ( Number ) 必选 多边形边框的透明度

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

返回值：

void : 无

示例：


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

uni-app使用plus注意事项

getStrokeOpacity

获取多边形边框的透明度


Number polygonObj.getStrokeOpacity();

参数：

无

返回值：

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

setFillColor

设置多边形的填充颜色


void polygonObj.setStrokeColor( color );

说明：

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

参数：

  • color: ( String ) 必选 多边形填充的颜色值

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

返回值：

void : 无

示例：


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

uni-app使用plus注意事项

getFillColor

获取多边形的填充色


String polygonObj.getFillColor();

说明：

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

参数：

无

返回值：

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

setFillOpacity

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


void polygonObj.setFillOpacity( opacity );

说明：

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

参数：

  • opacity: ( Number ) 必选 多边形填充色的透明度

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

返回值：

void : 无

示例：


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

uni-app使用plus注意事项

getFillOpacity

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


Number polygonObj.getFillOpacity();

参数：

无

返回值：

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

setLineWidth

设置多边形的边框宽度


void polygonObj.setLineWidth( width );

说明：

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

参数：

  • width: ( Number ) 必选 多边形的边框宽度

    取值范围为正整数。

返回值：

void : 无

示例：


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

uni-app使用plus注意事项

getLineWidth

获取多边形边框的宽度


Number polygonObj.getLineWidth();

参数：

无

返回值：

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

Search

地图检索对象

说明：

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

构造：

方法：

事件：

Search( map )

创建Search对象


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

参数：

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

返回值：

Search : 地图检索对象

示例：


	// 将检索到的第一条信息作为标点添加到地图中
	var searchObj = new plus.maps.Search( map );
	searchObj.onPoiSearchComplete = function( state, result ){
		console.log("onPoiSearchComplete: "+state+" , "+result.currentNumber);
		if ( state == 0 ) {
			if ( result.currentNumber <= 0 ) {
				alert( "没有检索到结果" );
			}
			for(var i=0; i<result.currentNumber; i++){
				var pos = result.getPosition( i );
				var marker = new plus.maps.Marker( pos.point );
				marker.setLabel( pos.name );
				map.addOverlay( marker );
			}
		} else {
			alert( "检索失败" );
		}
	}
	var pt = new plus.maps.Point( 116.404, 39.915 ); // 天安门坐标
	searchObj.poiSearchNearBy( "肯德基", pt, 1000 );

uni-app使用plus注意事项

setPageCapacity

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


void searchObj.setPageCapacity( capacity );

说明：

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

参数：

  • capacity: ( Number ) 必选 要指定检索返回结果每页的信息数目

返回值：

void : 无

getPageCapacity

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


Number searchObj.getPageCapacity();

参数：

无

返回值：

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

poiSearchInCity

城市兴趣点检索


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

说明：

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

参数：

  • city: ( String ) 必选 检索的城市名称

    如果设置为空字符串则在地图定位出当前所在城市内进行检索。

  • key: ( String ) 必选 检索的关键字

  • index: ( Number ) 可选 要获取检索结果的页号索引

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

返回值：

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

示例：


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

uni-app使用plus注意事项

poiSearchNearBy

周边检索


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

说明：

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

参数：

  • key: ( String ) 必选 检索的关键字

  • pt: ( Point ) 必选 检索的中心点坐标

  • radius: ( Number ) 必选 检索的半径，单位为米

  • index: ( Number ) 必选 要获取检索结果的页号索引

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

返回值：

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

示例：


// 在天安门周围1千米内对关键字“肯德基”进行检索
var searchObj = new plus.maps.Search( map );
var pt = new plus.maps.Point( 116.404, 39.915 ); // 天安门坐标
searchObj. poiSearchNearBy( "肯德基", pt, 1000 );

uni-app使用plus注意事项

poiSearchInbounds

指定范围检索


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

说明：

根据范围和检索词进行检索，检索完成后触发onPoiSearchComplete()事件。 若调用此方法时对象处于POI检索操作中，则终止上次检索操作，重新开始新的检索。

参数：

  • key: ( String ) 必选 检索的关键字

  • ptLB: ( Point ) 必选 检索范围的左下角坐标点

  • ptRT: ( Point ) 必选 检索范围的右上角坐标点

  • index: ( Number ) 必选 要获取检索结果的页号索引

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

返回值：

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

setTransitPolicy

设置公交路线检索策略


Boolean searchObj.poiSearchInbounds(policy);

说明：

默认采用maps.SearchPolicy.TRANSIT_TIME_FIRST策略。 需在调用transitSearch()方法前设置的策略才生效； 如果设置非法值则认为设置失败，采用上次设置的检索策略并返回false。

参数：

  • policy: ( SearchPolicy ) 必选 公交线路检索策略

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

返回值：

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

transitSearch

公交路线检索


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

说明：

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

参数：

  • start: ( String | Point ) 必选 公交线路检索的起点地址名称或坐标

    若起点地址为名称则需使用地名关键字，如起点为坐标则需要使用plus.maps.Point类型对象。

  • end: ( String | Point ) 必选 公交线路检索的终点地址名称或坐标

    若终点地址为名称则需使用地名关键字，如终点为坐标则需要使用plus.maps.Point类型对象。

  • city: ( String ) 必选 公交线路检索的城市名称

返回值：

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

示例：


function transitSearch(){
	// 在北京检索从天安门到大钟寺的公交线路
	var searchObj = new plus.maps.Search( map );
	searchObj.onRouteSearchComplete = function ( state, result ) {
		console.log("onRouteSearchComplete: "+state+" , "+result.routeNumber);
		if ( state == 0 ) {
			if ( result.routeNumber <= 0 ) {
				alert( "没有检索到结果" );
			}
			for(var i=0; i<result.routeNumber; i++){
				map.addOverlay( result.getRoute( i ) );
			}
		} else {
			alert( "检索失败" );
		}
	}
	searchObj.transitSearch( "天安门", "大钟寺", "北京" );
}

uni-app使用plus注意事项

setDrivingPolicy

设置驾车路线检索策略


Boolean searchObj.setDrivingPolicy(policy);

说明：

设置驾车路线检索策略，默认采用maps.SearchPolicy.DRIVING_TIME_FIRST策略。 如果设置非法值则认为设置失败，采用上次设置的检索策略并返回false；需在调用drivingSearch()方法前设置的策略才生效。

参数：

  • policy: ( SearchPolicy ) 必选 驾车线路检索策略

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

返回值：

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

drivingSearch

驾车路线检索


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

说明：

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

参数：

  • start: ( String | Point ) 必选 驾车线路检索的起点地址名称或坐标

    若起点地址为名称则需使用地名关键字，如起点为坐标则需要使用plus.maps.Point类型对象。

  • startCity: ( String ) 必选 驾车线路检索的起点位置所属城市

    如果start参数传入的为坐标只则所属城市可传入空字符串。

  • end: ( String | Point ) 必选 驾车线路检索的终点地址名称或坐标

    若终点地址为名称则需使用地名关键字，如终点为坐标则需要使用plus.maps.Point类型对象。

  • endCity: ( String ) 必选 驾车线路检索的终点位置所属城市

返回值：

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

示例：


function drivingSearch(){
	// 检索从北京天安门到大钟寺的驾车线路
	var searchObj = new plus.maps.Search( map );
	searchObj.onRouteSearchComplete = function ( state, result ) {
		console.log("onRouteSearchComplete: "+state+" , "+result.routeNumber);
		if ( state == 0 ) {
			if ( result.routeNumber <= 0 ) {
				alert( "没有检索到结果" );
			}
			for(var i=0; i<result.routeNumber; i++){
				map.addOverlay( result.getRoute( i ) );
			}
		} else {
			alert( "检索失败" );
		}
	}
	searchObj.drivingSearch( "天安门", "北京", "大钟寺", "北京" );
}

uni-app使用plus注意事项

walkingSearch

步行路线检索


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

说明：

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

参数：

  • start: ( String | Point ) 必选 步行线路检索的起点地址名称或坐标

    若起点地址为名称则需使用地名关键字，如起点为坐标则需要使用plus.maps.Point类型对象。

  • startCity: ( String ) 必选 步行线路检索的起点所属城市

    如果start参数传入的为坐标只则所属城市可传入空字符串。

  • end: ( String | Point ) 必选 步行线路检索的终点

    若终点地址为名称则需使用地名关键字，如终点为坐标则需要使用plus.maps.Point类型对象。

  • endCity: ( String ) 必选 步行线路检索的终点所属城市

    如果end参数传入的为坐标只则所属城市可传入空字符串。

返回值：

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

示例：


function walkingSearch(){
	// 检索从北京天安门到大钟寺的步行线路
	var searchObj = new plus.maps.Search( map );
	searchObj.onRouteSearchComplete = function ( state, result ) {
		console.log("onRouteSearchComplete: "+state+" , "+result.routeNumber);
		if ( state == 0 ) {
			if ( result.routeNumber <= 0 ) {
				alert( "没有检索到结果" );
			}
			for(var i=0; i<result.routeNumber; i++){
				map.addOverlay( result.getRoute( i ) );
			}
		} else {
			alert( "检索失败" );
		}
	}
	searchObj.walkingSearch( "天安门", "北京", "大钟寺", "北京" );
}

uni-app使用plus注意事项

onPoiSearchComplete

兴趣点检索完成事件


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

说明：

PoiSearchCallback 类型

示例：


function mapSearch(){
	// 将检索到结果作为标点添加到地图中
	var searchObj = new plus.maps.Search( map );
	searchObj.onPoiSearchComplete = function( state, result ){
		console.log("onPoiSearchComplete: "+state+" , "+result.currentNumber);
		if ( state == 0 ) {
			if ( result.currentNumber <= 0 ) {
				alert( "没有检索到结果" );
			}
			for(var i=0; i<result.currentNumber; i++){
				var pos = result.getPosition( i );
				var marker = new plus.maps.Marker( pos.point );
				marker.setLabel( pos.name );
				map.addOverlay( marker );
			}
		} else {
			alert( "检索失败" );
		}
	}
	var pt = new plus.maps.Point( 116.404, 39.915 ); // 天安门坐标
	searchObj.poiSearchNearBy( "肯德基", pt, 2000 );
}

uni-app使用plus注意事项

onRouteSearchComplete

线路检索完成事件


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

说明：

RouteSearchCallback 类型

示例：


function transitSearch(){
	// 在北京检索从天安门到大钟寺的公交线路
	var searchObj = new plus.maps.Search( map );
	searchObj.onRouteSearchComplete = function ( state, result ) {
		console.log("onRouteSearchComplete: "+state+" , "+result.routeNumber);
		if ( state == 0 ) {
			if ( result.routeNumber <= 0 ) {
				alert( "没有检索到结果" );
			}
			for(var i=0; i<result.routeNumber; i++){
				map.addOverlay( result.getRoute( i ) );
			}
		} else {
			alert( "检索失败" );
		}
	}
	searchObj.transitSearch( "天安门", "大钟寺", "北京" );
}

uni-app使用plus注意事项

SearchPolicy

检索策略类型

说明：

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

常量：

  • TRANSIT_TIME_FIRST: (Number 类型 )时间优先

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

  • TRANSIT_TRANSFER_FIRST: (Number 类型 )最少换乘优先

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

  • TRANSIT_WALK_FIRST: (Number 类型 )最少步行距离优先

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

  • TRANSIT_FEE_FIRST: (Number 类型 )选择车票花销最少优先

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

  • DRIVING_DIS_FIRST: (Number 类型 )最短距离优先

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

  • DRIVING_NO_EXPRESSWAY: (Number 类型 )无高速公路线路

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

  • DRIVING_FEE_FIRST: (Number 类型 )最少费用优先

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

SearchPoiResult

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

属性：

方法：

totalNumber

POI检索总结果数


poiResult.totalNumber;

说明：

Number 类型 只读属性

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

currentNumber

当前页的POI检索结果数


poiResult.currentNumber;

说明：

Number 类型 只读属性

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

pageNumber

本次POI检索的总页数


poiResult.pageNumber;

说明：

Number 类型 只读属性

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

pageIndex

获取当前页的索引


poiResult.pageIndex;

说明：

Number 类型 只读属性

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

poiList

本次POI检索结果数组


poiResult.poiList;

说明：

Array 类型 只读属性

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

getPosition

获取指定索引的检索结果


Position poiResult.getPosition( index ) ;

说明：

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

参数：

无

返回值：

Position : 指定索引的检索结果。

SearchRouteResult

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

说明：

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

属性：

方法：

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

startPosition

线路的起点位置


routeResult.startPosition;

说明：

Position 类型 只读属性

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

endPosition

线路的终点位置


poiResult.endPosition;

说明：

Position 类型 只读属性

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

routeNumber

本次线路检索的总方案数


routeResult.routeNumber;

说明：

Number 类型 只读属性

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

routeList

线路检索结果数组


routeResult.routeList;

说明：

Array 类型 只读属性

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

getRoute

获取指定索引的线路方案


Route poiResult.getRoute( index );

说明：

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

参数：

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

返回值：

Route : 指定索引的线路方案。

Position

检索结果的位置点

构造：

属性：

  • point: 位置点的经纬度坐标
  • address: 位置点的地址信息
  • city: 位置点的所属城市信息
  • name: 位置点的名称
  • phone: 位置点的电话信息
  • postcode: 位置点的邮编信息

Position( point )

创建Position对象


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

参数：

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

返回值：

Position : 创建的Position对象。

示例：


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

uni-app使用plus注意事项

point

位置点的经纬度坐标


posObj.point;

说明：

Point 类型 只读属性

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

address

位置点的地址信息


posObj.address;

说明：

String 类型 只读属性

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

city

位置点的所属城市信息


posObj.city;

说明：

String 类型 只读属性

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

name

位置点的名称


posObj.name;

说明：

String 类型 只读属性

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

phone

位置点的电话信息


posObj.phone;

说明：

String 类型 只读属性

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

postcode

位置点的邮编信息


posObj.postcode;

说明：

String 类型 只读属性

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

Route

地图中的路线对象

说明：

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

构造：

属性：

Route( ptStart, ptEnd )

创建Route对象


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

uni-app使用plus注意事项

startPoint

路线起点地理坐标点


routeObj.startPoint;

说明：

Point 类型 只读属性

endPoint

路线终点地理坐标点


routeObj.endPoint;

说明：

Point 类型 只读属性

pointCount

路线坐标点段数


routeObj.pointCount;

说明：

Point 类型 只读属性

pointList

路线的地理坐标点数组


routeObj.pointList;

说明：

Array 类型 只读属性

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

distance

路线总距离


routeObj.distance;

说明：

Number 类型 只读属性

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

routeTip

线路的提示信息


routeObj.routeTip;

说明：

String 类型 只读属性

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

GeocodeCallback

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


void onGeocodeSuccess( Event event ) {
	// JS code.
	var address = event.address;  // 转换后的地理位置
	var point = event.coord;  // 转换后的坐标信息
	var coordType = event.coordType;	// 转换后的坐标系类型
}

说明：

在地理编码转换成功触发，并返回转换结果。

参数：

  • event: ( Event ) 可选 转换后的坐标信息

    可通过event.coord（Point类型）获取转换后的坐标值。 可通过event.coordType（String类型）获取转换后的坐标系类型，“wgs84”：表示WGS-84坐标系； “gcj02”：表示国测局经纬度坐标系； “bd09”：表示百度墨卡托坐标系； “bd09ll”：表示百度经纬度坐标系。

返回值：

void : 无

CoordinateConvertCallback

坐标转换成功的回调函数


void onConvertSuccess( Event event ) {
	// JS code.
	var point = event.coord;  // 转换后的坐标值
	var coordType = event.coordType;	// 转换后的坐标系类型
}

说明：

在坐标转换成功触发，并返回转换结果。

参数：

  • event: ( Event ) 可选 转换后的坐标信息

    可通过event.coord（Point类型）获取转换后的坐标值。 可通过event.coordType（String类型）获取转换后的坐标系类型，“wgs84”：表示WGS-84坐标系； “gcj02”：表示国测局经纬度坐标系； “bd09”：表示百度墨卡托坐标系； “bd09ll”：表示百度经纬度坐标系。

返回值：

void : 无

DistanceCalculateCallback

距离计算成功的回调函数


void onCalculateSuccess( Event event ) {
	// JS code.
	var distance = event.distance;  // 转换后的距离值
}

说明：

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

参数：

  • event: ( Event ) 可选 距离计算后的信息

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

返回值：

void : 无

AreaCalculateCallback

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


void onCalculateSuccess( Event event ) {
	// JS code.
	var area = event.area;  // 计算后的面积值
}

说明：

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

参数：

  • event: ( Event ) 可选 地理区域面积计算后的信息

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

返回值：

void : 无

UserLocationCallback

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


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

参数：

  • state: ( Number ) 必选 获取用户位置操作状态码，0表示成功，其它为错误码

  • point: ( Point ) 必选 位置经纬度坐标，如果获取操作失败则为null对象

返回值：

void : 无

ClickEventHandler

用户点击地图回调事件


void onClick( point ) {
	// Click code
}

参数：

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

返回值：

void : 无

StatusChangedEventHandler

地图状态变化回调事件


void onStatusChanged( event ) {
	// Click code
	var target = event.target;		// 状态变化的地图对象(plus.maps.Map)
	var bounds = event.bounds;		// 地图的可视地理区域(plus.maps.Bounds)
	var center = event.center;		// 地图的中心点坐标(plus.maps.Point)
	var zoom = event.zoom;			// 地图的缩放级别(Number)
}

参数：

  • event: ( Object ) 必选 地图状态变化对象

    可通过event.target（plus.maps.Map类型）获取状态变化的地图对象； 可通过event.bounds（plus.maps.Bounds类型）获取地图当前的可视区域； 可通过event.center（plus.maps.Point类型）获取地图当前的中心点坐标； 可通过event.zoom（Number类型）获取地图当前的缩放级别。

返回值：

void : 无

OverlayClickEventHandler

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


void onClick( overlay ) {
	// Click code
}

参数：

  • overlay: ( Overlay ) 必选 用户在地图上点击的覆盖物对象

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

返回值：

void : 无

OverlayDragEventHandler

用户拖拽覆盖物回调事件


void onDrag( target ) {
	// Click code
	var marker = target;    // 拖拽的覆盖物对象
}

参数：

  • target: ( Object ) 必选 拖拽事件对象

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

返回值：

void : 无

PoiSearchCallback

兴趣点检索完成事件


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

说明：

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

参数：

  • state: ( Number ) 必选 检索结果状态号

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

  • result: ( SearchPoiResult ) 必选 POI检索结果

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

返回值：

void : 无

RouteSearchCallback

线路检索完成事件


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

说明：

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

参数：

  • state: ( Number ) 必选 检索结果状态号

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

  • result: ( SearchRouteResult ) 必选 线路检索结果

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

返回值：

void : 无

SuccessCallback

地图操作成功回调函数


void onSuccess(){
	// Success code.
}

说明：

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

参数：

无

返回值：

void : 无

ErrorCallback

地图操作失败的回调函数


function void onError( error ) {
	// Handle error
	var code = error.code; // 错误编码
	var message = error.message; // 错误描述信息
}

参数：

  • error: ( Exception ) 必选 地图操作的错误信息

    可通过error.code（Number类型）获取错误编码； 可通过error.message（String类型）获取错误描述信息。

返回值：

void : 无
免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn