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

最新推荐文章于 2024-01-18 16:48:46 发布

低吟~浅唱

最新推荐文章于 2024-01-18 16:48:46 发布

阅读量755

点赞数

分类专栏：编程小技能文章标签： javascript

本文链接：https://blog.csdn.net/qq_40575646/article/details/122824730

版权

编程小技能专栏收录该内容

324 篇文章 1 订阅

订阅专栏

方法：

openSysMap: 调用系统第三方程序进行导航
create: 创建Map对象
getMapById: 查找已经创建的Map对象

对象：

Map: 地图控件对象
MapStyles: 地图控件对象的参数
GeocodeOptions: 地理编码转换的参数
CoordinateConvertOptions: 地图坐标转换的参数
Point: Point对象用于表示地图元素的坐标
Bounds: 地理区域
MapType: 地图视图类型
Overlay: 地图覆盖物基类对象
Marker: 地图上显示的标点对象
Bubble: 地图上显示的气泡对象
Circle: 地图上显示的圆圈对象
Polyline: 地图上显示的折线对象
Polygon: 地图上显示的多边形对象
Search: 地图检索对象
SearchPolicy: 检索策略类型
SearchPoiResult: 保存位置检索、周边检索和范围检索返回的结果
SearchRouteResult: 保存位置检索、周边检索和范围检索返回的结果
Position: 检索结果的位置点
Route: 地图中的路线对象

回调方法：

GeocodeCallback: 地理编码转换成功的回调函数
CoordinateConvertCallback: 坐标转换成功的回调函数
DistanceCalculateCallback: 距离计算成功的回调函数
AreaCalculateCallback: 地理区域面积计算成功的回调函数
UserLocationCallback: 获取用户当前位置信息成功回调
ClickEventHandler: 用户点击地图回调事件
StatusChangedEventHandler: 地图状态变化回调事件
OverlayClickEventHandler: 用户点击地图覆盖物回调事件
OverlayDragEventHandler: 用户拖拽覆盖物回调事件
PoiSearchCallback: 兴趣点检索完成事件
RouteSearchCallback: 线路检索完成事件
SuccessCallback: 地图操作成功回调函数
ErrorCallback: 地图操作失败的回调函数

权限：

permissions

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#ffffff">{</span>
<span style="color:#87ceeb">// ...</span>
<span style="color:#ffa0a0">"permissions"</span><span style="color:#ffffff">:{</span>
	<span style="color:#87ceeb">// ...</span>
	<span style="color:#ffa0a0">"Maps"</span><span style="color:#ffffff">:</span> <span style="color:#ffffff">{</span>
		<span style="color:#ffa0a0">"description"</span><span style="color:#ffffff">:</span> <span style="color:#ffa0a0">"地图"</span>
	<span style="color:#ffffff">}</span>
<span style="color:#ffffff">}</span>
<span style="color:#ffffff">}</span>
			</code></span></span>

openSysMap

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

<span style="color:#474747"><span style="background-color:#333333"><code><span style="color:#ffffff">
plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">maps</span><span style="color:#ffffff">.</span><span style="color:#ffffff">openSysMap</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> dst</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> des</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> src </span><span style="color:#ffffff">);</span>
				</code></span></span>

参数：

dst: ( Point ) 必选 导航目的地坐标
要求使用WGS-84坐标系值，即GPS获取的值。
des: ( String ) 必选 导航目的地描述
要求使用WGS-84坐标系，即GPS获取的值。
src: ( Point ) 必选 导航起始地描述

返回值：

void : 无

示例：

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#87ceeb">// 设置目标位置坐标点和其实位置坐标点</span>
<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> dst </span><span style="color:#ffffff">=</span> <span style="color:#f0e68c"><strong>new</strong></span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">maps</span><span style="color:#ffffff">.</span><span style="color:#98fb98">Point</span><span style="color:#ffffff">(</span><span style="color:#cd5c5c">116.39131928</span><span style="color:#ffffff">,</span><span style="color:#cd5c5c">39.90793074</span><span style="color:#ffffff">);</span> <span style="color:#87ceeb">// 天安门 </span>
<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> src </span><span style="color:#ffffff">=</span> <span style="color:#f0e68c"><strong>new</strong></span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">maps</span><span style="color:#ffffff">.</span><span style="color:#98fb98">Point</span><span style="color:#ffffff">(</span><span style="color:#cd5c5c">116.335</span><span style="color:#ffffff">,</span><span style="color:#cd5c5c">39.966</span><span style="color:#ffffff">);</span> <span style="color:#87ceeb">// 大钟寺</span>
<span style="color:#87ceeb">// 调用系统地图显示 </span><span style="color:#ffffff">
plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">maps</span><span style="color:#ffffff">.</span><span style="color:#ffffff">openSysMap</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> dst</span><span style="color:#ffffff">,</span> <span style="color:#ffa0a0">"天安门"</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> src </span><span style="color:#ffffff">);</span>
				</code></span></span>

uni-app使用plus注意事项

create

创建Map对象

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#98fb98">Map</span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">maps</span><span style="color:#ffffff">.</span><span style="color:#ffffff">create</span><span style="color:#ffffff">(</span><span style="color:#ffffff">id</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> styles</span><span style="color:#ffffff">);</span>
				</code></span></span>

说明：

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

参数：

id: ( String ) 必选 地图控件对象的全局标识
可用于通过plus.maps.getMapById()方法查找已经创建的地图控件对象。
styles: ( MapStyles ) 可选 地图控件的显示参数
设置Map控件的位置及大小等。

返回值：

Map : Map地图控件对象

示例：

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

uni-app使用plus注意事项

getMapById

查找已经创建的Map对象

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#98fb98">Map</span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">maps</span><span style="color:#ffffff">.</span><span style="color:#ffffff">getMapById</span><span style="color:#ffffff">(</span><span style="color:#ffffff">id</span><span style="color:#ffffff">);</span>
				</code></span></span>

说明：

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

参数：

id: ( String ) 必选 Map对象的全局标识
如果存在多个相同标识的Map对象，则返回第一个查找到的Map对象。如果不存在指定标识的Map对象，则返回null。

返回值：

Map : Map地图控件对象

示例：

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

uni-app使用plus注意事项

Map

地图控件对象

构造：

Map(domId, styles): 创建Map对象

方法：

calculateArea: 静态方法，计算面积
calculateDistance: 静态方法，计算距离
convertCoordinates: 静态方法，坐标转换
geocode: 静态方法，地理编码
reverseGeocode: 静态方法，反向地理编码
addOverlay: 向地图中添加覆盖物
centerAndZoom: 设置地图初始中心点和缩放级别
clearOverlays: 清除地图中所有覆盖物对象
close: 关闭地图控件
getBounds: 获取当前地图可视范围的地理区域
getCenter: 获取地图中心点位置
getCurrentCenter: 获取当前地图显示的地图中心点位置
getMapType: 获取地图的显示类型
getUserLocation: 获取用户的当前位置信息
getZoom: 获取地图的缩放级别
hide: 隐藏地图控件
isShowUserLocation: 获取是否显示用户位置
isShowZoomControls: 获取是否显示地图内置缩放控件
isTraffic: 获取是否打开地图交通信息图层
removeOverlay: 从地图中删除覆盖物对象
reset: 重置地图
resize: 重设地图控件大小
setCenter: 设置地图的中心点
setMapType: 设置地图的视图类型
setStyles: 设置地图控件的配置参数
setTraffic: 是否打开地图交通信息图层
setZoom: 设置地图的缩放级别
show: 显示地图控件
showUserLocation: 显示用户位置
showZoomControls: 设置是否显示地图内置缩放控件

事件：

onclick: 用户点击地图事件
onstatuschanged: 地图状态改变事件

Map(domId, styles)

创建Map对象

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>var</strong></span><span style="color:#ffffff"> ptObj </span><span style="color:#ffffff">=</span> <span style="color:#f0e68c"><strong>new</strong></span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">maps</span><span style="color:#ffffff">.</span><span style="color:#98fb98">Map</span><span style="color:#ffffff">(</span><span style="color:#ffffff">id</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> styles</span><span style="color:#ffffff">);</span>
						</code></span></span>

说明：

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

参数：

domId: ( String ) 必选 关联到Webview中DOM节点的标识
系统将查找到此id的DOM节点，并将Map地图控件对象的位置和大小与其保持一致。
styles: ( MapStyles ) 可选 地图控件的显示参数

返回值：

Map : Map地图控件对象

示例：

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

uni-app使用plus注意事项

calculateArea

静态方法，计算面积

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">maps</span><span style="color:#ffffff">.</span><span style="color:#98fb98">Map</span><span style="color:#ffffff">.</span><span style="color:#ffffff">calculateArea</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> bounds</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> successCallback</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> errorCallback </span><span style="color:#ffffff">);</span>
						</code></span></span>

说明：

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

参数：

bounds: ( Bounds ) 必选 要计算的地理区域
successCallback: ( AreaCalculateCallback ) 可选 计算地理区域面积成功回调
地理区域面积计算成功时触发，并返回计算的面积值。
errorCallback: ( ErrorCallback ) 可选 计算面积失败回调
地理区域面积计算失败时触发，并返回错误信息。

返回值：

void : 无

示例：

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

uni-app使用plus注意事项

calculateDistance

静态方法，计算距离

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">maps</span><span style="color:#ffffff">.</span><span style="color:#98fb98">Map</span><span style="color:#ffffff">.</span><span style="color:#ffffff">calculateDistance</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> pointStart</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> pointEnd</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> successCallback</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> errorCallback </span><span style="color:#ffffff">);</span>
						</code></span></span>

说明：

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

参数：

pointStart: ( Point ) 必选 起点的坐标
pointEnd: ( Point ) 可选 终点的坐标
successCallback: ( DistanceCalculateCallback ) 可选 计算距离成功回调
距离计算成功时触发，并返回计算的距离值。
errorCallback: ( ErrorCallback ) 可选 计算距离失败回调
距离计算失败时触发，并返回错误信息。

返回值：

void : 无

示例：

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

uni-app使用plus注意事项

convertCoordinates

静态方法，坐标转换

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">maps</span><span style="color:#ffffff">.</span><span style="color:#98fb98">Map</span><span style="color:#ffffff">.</span><span style="color:#ffffff">convertCoordinates</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> point</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> options</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> successCallback</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> errorCallback </span><span style="color:#ffffff">);</span>
						</code></span></span>

说明：

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

参数：

point: ( Point ) 必选 要转换的坐标
options: ( CoordinateConvertOptions ) 可选 坐标转换的参数
successCallback: ( CoordinateConvertCallback ) 可选 坐标转换成功回调
坐标转换成功时触发，并返回转后的坐标值。
errorCallback: ( ErrorCallback ) 可选 坐标转换失败回调
坐标转换失败时触发，并返回错误信息。

返回值：

void : 无

平台支持：

Android - 2.3+ (支持) :
仅百度地图支持此功能。
iOS - 5.1+ (支持) :
仅百度地图支持此功能。

示例：

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

uni-app使用plus注意事项

geocode

静态方法，地理编码

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">maps</span><span style="color:#ffffff">.</span><span style="color:#98fb98">Map</span><span style="color:#ffffff">.</span><span style="color:#ffffff">geocode</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> address</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> options</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> successCallback</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> errorCallback </span><span style="color:#ffffff">);</span>
						</code></span></span>

说明：

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

参数：

address: ( String ) 必选 要转换的地理位置信息
越详细的地址信息越容易转换，如XX路XX号XX大厦。
options: ( GeocodeOptions ) 可选 地理编码的参数
successCallback: ( GeocodeCallback ) 可选 地理编码转换成功回调
地理编码转换成功时触发，并返回转换后的坐标信息。
errorCallback: ( ErrorCallback ) 可选 地理编码转换失败回调
地理编码转换失败时触发，并返回错误信息。

返回值：

void : 无

示例：

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

uni-app使用plus注意事项

reverseGeocode

静态方法，反向地理编码

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> plus</span><span style="color:#ffffff">.</span><span style="color:#ffffff">maps</span><span style="color:#ffffff">.</span><span style="color:#98fb98">Map</span><span style="color:#ffffff">.</span><span style="color:#ffffff">reverseGeocode</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> point</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> options</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> successCallback</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> errorCallback </span><span style="color:#ffffff">);</span>
						</code></span></span>

说明：

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

参数：

point: ( Point ) 必选 要转换的坐标
options: ( GeocodeOptions ) 可选 地理编码的参数
successCallback: ( GeocodeCallback ) 可选 反向地理编码转换成功回调
反向地理编码转换成功时触发，并返回转换后的地址位置信息。
errorCallback: ( ErrorCallback ) 可选 反向地理编码转换失败回调
反向地理编码转换失败时触发，并返回错误信息。

返回值：

void : 无

示例：

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

uni-app使用plus注意事项

addOverlay

向地图中添加覆盖物

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#98fb98">Boolean</span><span style="color:#ffffff"> mapObj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addOverlay</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> overlay </span><span style="color:#ffffff">);</span>
						</code></span></span>

说明：

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

参数：

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

返回值：

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

示例：

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

uni-app使用plus注意事项

centerAndZoom

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

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> mapObj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">centerAndZoom</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> center</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> zoom </span><span style="color:#ffffff">);</span>
						</code></span></span>

说明：

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

参数：

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

返回值：

void : 无

示例：

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

uni-app使用plus注意事项

clearOverlays

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

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> mapObj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">clearOverlays</span><span style="color:#ffffff">();</span>
						</code></span></span>

说明：

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

参数：

无

返回值：

void : 无

示例：

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

uni-app使用plus注意事项

close

关闭地图控件

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#f0e68c"><strong>void</strong></span><span style="color:#ffffff"> mapObj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">close</span><span style="color:#ffffff">();</span>
						</code></span></span>

说明：

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

参数：

无

返回值：

void : 无

示例：

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#cccccc"><!DOCTYPE HTML></span>
<span style="color:#f0e68c"><strong><html></strong></span>
	<span style="color:#f0e68c"><strong><head></strong></span>
		<span style="color:#f0e68c"><strong><meta</strong></span> <span style="color:#bdb76b"><strong>charset</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"utf-8"</span><span style="color:#f0e68c"><strong>/></strong></span>
		<span style="color:#f0e68c"><strong><meta</strong></span> <span style="color:#bdb76b"><strong>name</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"viewport"</span> <span style="color:#bdb76b"><strong>content</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"initial-scale=1.0, maximum-scale=1.0, user-scalable=no"</span><span style="color:#f0e68c"><strong>/></strong></span>
		<span style="color:#f0e68c"><strong><title></strong></span><span style="color:#ffffff">Map Example</span><span style="color:#f0e68c"><strong></title></strong></span>
		<span style="color:#f0e68c"><strong><script</strong></span> <span style="color:#bdb76b"><strong>type</strong></span><span style="color:#ffffff">=</span><span style="color:#ffa0a0">"text/javascript"</span><span style="color:#f0e68c"><strong>></strong></span>
<span style="color:#87ceeb">// H5 plus事件处理</span>
<span style="color:#f0e68c"><strong>function</strong></span><span style="color:#ffffff"> plusReady</span><span style="color:#ffffff">(){</span>
<span style="color:#ffffff">}</span>
<span style="color:#f0e68c"><strong>if</strong></span><span style="color:#ffffff">(</span><span style="color:#ffffff">window</span><span style="color:#ffffff">.</span><span style="color:#ffffff">plus</span><span style="color:#ffffff">){</span><span style="color:#ffffff">
	plusReady</span><span style="color:#ffffff">();</span>
<span style="color:#ffffff">}</span><span style="color:#f0e68c"><strong>else</strong></span><span style="color:#ffffff">{</span><span style="color:#ffffff">
	document</span><span style="color:#ffffff">.</span><span style="color:#ffffff">addEventListener</span><span style="color:#ffffff">(</span><span style="color:#ffa0a0">'plusready'</span><span style="color:#ffffff">,</span><span style="color:#ffffff"> plusReady</span><span style="color:#ffffff">,</span> <span style="color:#f0e68c"><strong>false</strong></span><span style="color:#ffffff">);</span>
<span style="color:#ffffff">}</span>

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

uni-app使用plus注意事项

getBounds

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

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#98fb98">Bounds</span><span style="color:#ffffff"> mapObj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">getBounds</span><span style="color:#ffffff">();</span>
						</code></span></span>

说明：

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

参数：

无

返回值：

Bounds : 获取到

示例：

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

uni-app使用plus注意事项

getCenter

获取地图中心点位置

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#98fb98">Point</span><span style="color:#ffffff"> mapObj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">getCenter</span><span style="color:#ffffff">();</span>
						</code></span></span>

说明：

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

参数：

无

返回值：

Point : 地图中心点坐标

示例：

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

uni-app使用plus注意事项

getCurrentCenter

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

<span style="color:#474747"><span style="background-color:#333333"><code>
<span style="color:#98fb98">Boolean</span><span style="color:#ffffff"> mapObj</span><span style="color:#ffffff">.</span><span style="color:#ffffff">getCurrentCenter</span><span style="color:#ffffff">(</span><span style="color:#ffffff"> callback </span><span style="color:#ffffff">);</span>
						</code></span></span>

说明：

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

参数：

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

返回值：

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

示例：

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

uni-app使用plus注意事项

低吟~浅唱

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Maps模块管理地图控件，用于在web页面中显示地图控件，提供各种接口操作地图控件，如添加标点、路线等。通过plus.maps可获取地图管理对象

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

扫一扫