宜信同城网交流论坛技术专版技术专区Maps模块管理地图控件，用于在web页面中显示地图控件，提供各种接口操作地图控件，如 ...方法： openSysMap: 调用系统第三方程序进行导航create: 创建Map对象getMapById: 查找已经创建的Map ...

admin 发表于 2023-2-16 18:54:51

Maps模块管理地图控件，用于在web页面中显示地图控件，提供各种接口操作地图控件，如 ...

<div id="article_content" class="article_content clearfix">
 <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
 <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-6e43165c0a.css">
 <div id="content_views" class="htmledit_views">
 <div id="content" style="margin-left:auto;">
<h2 style="margin-left:.8em;">方法：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.openSysMap">openSysMap</a>: 调用系统第三方程序进行导航</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.create">create</a>: 创建Map对象</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.getMapById">getMapById</a>: 查找已经创建的Map对象</li></ul>
<h2 style="margin-left:.8em;">对象：</h2>
<ul><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Map">Map</a>: 地图控件对象</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.MapStyles">MapStyles</a>: 地图控件对象的参数</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.GeocodeOptions">GeocodeOptions</a>: 地理编码转换的参数</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.CoordinateConvertOptions">CoordinateConvertOptions</a>: 地图坐标转换的参数</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Point">Point</a>: Point对象用于表示地图元素的坐标</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Bounds">Bounds</a>: 地理区域</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.MapType">MapType</a>: 地图视图类型</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Overlay">Overlay</a>: 地图覆盖物基类对象</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Marker">Marker</a>: 地图上显示的标点对象</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Bubble">Bubble</a>: 地图上显示的气泡对象</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Circle">Circle</a>: 地图上显示的圆圈对象</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Polyline">Polyline</a>: 地图上显示的折线对象</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Polygon">Polygon</a>: 地图上显示的多边形对象</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Search">Search</a>: 地图检索对象</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.SearchPolicy">SearchPolicy</a>: 检索策略类型</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.SearchPoiResult">SearchPoiResult</a>: 保存位置检索、周边检索和范围检索返回的结果</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.SearchRouteResult">SearchRouteResult</a>: 保存位置检索、周边检索和范围检索返回的结果</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Position">Position</a>: 检索结果的位置点</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Route">Route</a>: 地图中的路线对象</li></ul>
<h2 style="margin-left:.8em;">回调方法：</h2>
<ul><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.GeocodeCallback">GeocodeCallback</a>: 地理编码转换成功的回调函数</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.CoordinateConvertCallback">CoordinateConvertCallback</a>: 坐标转换成功的回调函数</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.DistanceCalculateCallback">DistanceCalculateCallback</a>: 距离计算成功的回调函数</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.AreaCalculateCallback">AreaCalculateCallback</a>: 地理区域面积计算成功的回调函数</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.UserLocationCallback">UserLocationCallback</a>: 获取用户当前位置信息成功回调</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.ClickEventHandler">ClickEventHandler</a>: 用户点击地图回调事件</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.StatusChangedEventHandler">StatusChangedEventHandler</a>: 地图状态变化回调事件</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.OverlayClickEventHandler">OverlayClickEventHandler</a>: 用户点击地图覆盖物回调事件</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.OverlayDragEventHandler">OverlayDragEventHandler</a>: 用户拖拽覆盖物回调事件</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.PoiSearchCallback">PoiSearchCallback</a>: 兴趣点检索完成事件</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.RouteSearchCallback">RouteSearchCallback</a>: 线路检索完成事件</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.SuccessCallback">SuccessCallback</a>: 地图操作成功回调函数</li><li><ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.ErrorCallback">ErrorCallback</a>: 地图操作失败的回调函数</li></ul>
<h2 style="margin-left:.8em;">权限：</h2>
permissions
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
{
// ...
"permissions":{
// ...
"Maps": {
"description": "地图"
}
}
}
</code></code></pre>
<h1 style="margin-left:0;">openSysMap</h1>
调用系统第三方程序进行导航
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
plus.maps.openSysMap( dst, des, src );
</code></code></pre>
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>dst: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Point">Point</a> ) 必选 导航目的地坐标 要求使用WGS-84坐标系值，即GPS获取的值。 </li><li>des: ( String ) 必选 导航目的地描述 要求使用WGS-84坐标系，即GPS获取的值。 </li><li>src: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Point">Point</a> ) 必选 导航起始地描述 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
// 设置目标位置坐标点和其实位置坐标点
var dst = new plus.maps.Point(116.39131928,39.90793074); // 天安门 
var src = new plus.maps.Point(116.335,39.966); // 大钟寺
// 调用系统地图显示 
plus.maps.openSysMap( dst, "天安门", src );
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">create</h1>
创建Map对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
Map plus.maps.create(id, styles);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
调用此方法创建后并不会显示，需要调用Webview窗口的append方法将其添加到Webview窗口后才能显示。注意：此时需要通过styles参数的top/left/width/height属性设置控件的位置及大小。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>id: ( String ) 必选 地图控件对象的全局标识 可用于通过plus.maps.getMapById()方法查找已经创建的地图控件对象。 </li><li>styles: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.MapStyles">MapStyles</a> ) 可选 地图控件的显示参数 设置Map控件的位置及大小等。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Map">Map</a> : Map地图控件对象
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var map = null;
// 创建地图控件
function createMap() {
if(!map){
map = plus.maps.create('map', {
top:'100px',
left:'0px',
width: '100%',
height: '200px',
position: 'static'
});
plus.webview.currentWebview().append(map);
}
}
</script>
<style type="text/css">
*{
-webkit-user-select: none;
}
html,body{
margin: 0px;
padding: 0px;
height: 100%;
}
</style>
</head>
<body>
<button onclick="createMap()">创建地图控件</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">getMapById</h1>
查找已经创建的Map对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
Map plus.maps.getMapById(id);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
调用此方法查找指定id的Map对象，如果不存在则返回null。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>id: ( String ) 必选 Map对象的全局标识 如果存在多个相同标识的Map对象，则返回第一个查找到的Map对象。如果不存在指定标识的Map对象，则返回null。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
<ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map">Map</a> : Map地图控件对象
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var map = null;
// 创建地图控件
function createMap() {
if(!map){
map = plus.maps.create('map', {
top:'100px',
left:'0px',
width: '100%',
height: '200px',
position: 'static'
});
plus.webview.currentWebview().append(map);
}
}
// 查找地图控件
function findMap() {
var b = plus.maps.getMapById('map');
if(b){
console.log('find success!');
alert('success');
} else {
console.log('find failed!');
alert('failed');
}
}
</script>
<style type="text/css">
*{
-webkit-user-select: none;
}
html,body{
margin: 0px;
padding: 0px;
height: 100%;
}
</style>
</head>
<body>
<button onclick="createMap()">创建地图控件</button>
 
<button onclick="findMap()">查找地图控件</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">Map</h1>
地图控件对象
<h2 style="margin-left:.8em;">构造：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.Map%28domId,%20styles%29">Map(domId, styles)</a>: 创建Map对象</li></ul>
<h2 style="margin-left:.8em;">方法：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.calculateArea">calculateArea</a>: 静态方法，计算面积</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.calculateDistance">calculateDistance</a>: 静态方法，计算距离</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.convertCoordinates">convertCoordinates</a>: 静态方法，坐标转换</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.geocode">geocode</a>: 静态方法，地理编码</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.reverseGeocode">reverseGeocode</a>: 静态方法，反向地理编码</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.addOverlay">addOverlay</a>: 向地图中添加覆盖物</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.centerAndZoom">centerAndZoom</a>: 设置地图初始中心点和缩放级别</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.clearOverlays">clearOverlays</a>: 清除地图中所有覆盖物对象</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.close">close</a>: 关闭地图控件</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.getBounds">getBounds</a>: 获取当前地图可视范围的地理区域</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.getCenter">getCenter</a>: 获取地图中心点位置</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.getCurrentCenter">getCurrentCenter</a>: 获取当前地图显示的地图中心点位置</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.getMapType">getMapType</a>: 获取地图的显示类型</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.getUserLocation">getUserLocation</a>: 获取用户的当前位置信息</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.getZoom">getZoom</a>: 获取地图的缩放级别</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.hide">hide</a>: 隐藏地图控件</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.isShowUserLocation">isShowUserLocation</a>: 获取是否显示用户位置</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.isShowZoomControls">isShowZoomControls</a>: 获取是否显示地图内置缩放控件</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.isTraffic">isTraffic</a>: 获取是否打开地图交通信息图层</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.removeOverlay">removeOverlay</a>: 从地图中删除覆盖物对象</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.reset">reset</a>: 重置地图</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.resize">resize</a>: 重设地图控件大小</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.setCenter">setCenter</a>: 设置地图的中心点</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.setMapType">setMapType</a>: 设置地图的视图类型</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.setStyles">setStyles</a>: 设置地图控件的配置参数</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.setTraffic">setTraffic</a>: 是否打开地图交通信息图层</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.setZoom">setZoom</a>: 设置地图的缩放级别</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.show">show</a>: 显示地图控件</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.showUserLocation">showUserLocation</a>: 显示用户位置</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.showZoomControls">showZoomControls</a>: 设置是否显示地图内置缩放控件</li></ul>
<h2 style="margin-left:.8em;">事件：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.onclick">onclick</a>: 用户点击地图事件</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Map.onstatuschanged">onstatuschanged</a>: 地图状态改变事件</li></ul>
<h1 style="margin-left:0;">Map(domId, styles)</h1>
创建Map对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
var ptObj = new plus.maps.Map(id, styles);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
创建Map地图控件对象，并指定其在Webview窗口中关联div或object标签的id号。此时styles参数中的left/top/width/height属性值被忽略，通过DOM标签来确定Map对象的位置及大小。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>domId: ( String ) 必选 关联到Webview中DOM节点的标识 系统将查找到此id的DOM节点，并将Map地图控件对象的位置和大小与其保持一致。 </li><li>styles: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.MapStyles">MapStyles</a> ) 可选 地图控件的显示参数 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
Map : Map地图控件对象
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready", plusReady, false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded", function(){
em=document.getElementById("map");
plusReady();
},false);
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 0px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
<div id="map">地图加载中...</div>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">calculateArea</h1>
静态方法，计算面积
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void plus.maps.Map.calculateArea( bounds, successCallback, errorCallback );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
计算指定地理区域的面积，单位为平方米。注：此功能仅百度地图支持，高德地图暂不支持此功能。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>bounds: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Bounds">Bounds</a> ) 必选 要计算的地理区域 </li><li>successCallback: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.AreaCalculateCallback">AreaCalculateCallback</a> ) 可选 计算地理区域面积成功回调 地理区域面积计算成功时触发，并返回计算的面积值。 </li><li>errorCallback: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.ErrorCallback">ErrorCallback</a> ) 可选 计算面积失败回调 地理区域面积计算失败时触发，并返回错误信息。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 获取当前地图显示的地理区域面积
function calculateArea(){
var bounds = map.getBounds();
plus.maps.Map.calculateArea( bounds, function(event){
var area = event.area;// 计算后的面积值
alert("Area:"+area);
}, function(e){
alert("Failed:"+JSON.stringify(e));
} );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
计算面积 
<button onclick="calculateArea()">获取地理区域面积</button>
<div id="map">地图加载中...</div>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">calculateDistance</h1>
静态方法，计算距离
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void plus.maps.Map.calculateDistance( pointStart, pointEnd, successCallback, errorCallback );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
计算从pointStart坐标点到pointEnd坐标的实际直线距离，单位为米（m）。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>pointStart: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Point">Point</a> ) 必选 起点的坐标 </li><li>pointEnd: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Point">Point</a> ) 可选 终点的坐标 </li><li>successCallback: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.DistanceCalculateCallback">DistanceCalculateCallback</a> ) 可选 计算距离成功回调 距离计算成功时触发，并返回计算的距离值。 </li><li>errorCallback: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.ErrorCallback">ErrorCallback</a> ) 可选 计算距离失败回调 距离计算失败时触发，并返回错误信息。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
var point1 = new plus.maps.Point(116.351442,39.972614);
var point2 = new plus.maps.Point(116.340788,39.973319)
plus.maps.Map.calculateDistance(point1,point2,function(event){
var distance = event.distance;// 转换后的距离值
alert("Distance:"+distance);
},function(e){
alert("Failed:"+JSON.stringify(e));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
计算距离 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">convertCoordinates</h1>
静态方法，坐标转换
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void plus.maps.Map.convertCoordinates( point, options, successCallback, errorCallback );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
将第三方坐标系坐标转换成当前地图的坐标系坐标。转换成功通过successCallback返回，转换失败则通过errorCallback返回。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>point: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Point">Point</a> ) 必选 要转换的坐标 </li><li>options: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.CoordinateConvertOptions">CoordinateConvertOptions</a> ) 可选 坐标转换的参数 </li><li>successCallback: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.CoordinateConvertCallback">CoordinateConvertCallback</a> ) 可选 坐标转换成功回调 坐标转换成功时触发，并返回转后的坐标值。 </li><li>errorCallback: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.ErrorCallback">ErrorCallback</a> ) 可选 坐标转换失败回调 坐标转换失败时触发，并返回错误信息。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - 2.3+ (支持) : 仅百度地图支持此功能。 </li><li>iOS - 5.1+ (支持) : 仅百度地图支持此功能。 </li></ul>
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
var point = new plus.maps.Point(116.3447905236,39.9663258208);
plus.maps.Map.convertCoordinates(point,{},function(event){
var point = event.coord;// 转换后的坐标值
var coordType = event.coordType; // 转换后的坐标系类型
alert("Success:"+JSON.stringify(event));
},function(e){
alert("Failed:"+JSON.stringify(e));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
坐标转换 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">geocode</h1>
静态方法，地理编码
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void plus.maps.Map.geocode( address, options, successCallback, errorCallback );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
将地理位置信息转换为坐标点。转换成功通过successCallback返回，转换失败则通过errorCallback返回。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>address: ( String ) 必选 要转换的地理位置信息 越详细的地址信息越容易转换，如XX路XX号XX大厦。 </li><li>options: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.GeocodeOptions">GeocodeOptions</a> ) 可选 地理编码的参数 </li><li>successCallback: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.GeocodeCallback">GeocodeCallback</a> ) 可选 地理编码转换成功回调 地理编码转换成功时触发，并返回转换后的坐标信息。 </li><li>errorCallback: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.ErrorCallback">ErrorCallback</a> ) 可选 地理编码转换失败回调 地理编码转换失败时触发，并返回错误信息。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
plus.maps.Map.geocode("海淀区大钟寺地铁站",{city:"北京"},function(event){
var address = event.address;// 转换后的地理位置
var point = event.coord;// 转换后的坐标信息
var coordType = event.coordType; // 转换后的坐标系类型
alert("Coord:"+JSON.stringify(point));
},function(e){
alert("Failed:"+JSON.stringify(e));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
地理编码 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">reverseGeocode</h1>
静态方法，反向地理编码
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void plus.maps.Map.reverseGeocode( point, options, successCallback, errorCallback );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
将坐标点转换为地理位置信息。转换成功通过successCallback返回，转换失败则通过errorCallback返回。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>point: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Point">Point</a> ) 必选 要转换的坐标 </li><li>options: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.GeocodeOptions">GeocodeOptions</a> ) 可选 地理编码的参数 </li><li>successCallback: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.GeocodeCallback">GeocodeCallback</a> ) 可选 反向地理编码转换成功回调 反向地理编码转换成功时触发，并返回转换后的地址位置信息。 </li><li>errorCallback: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.ErrorCallback">ErrorCallback</a> ) 可选 反向地理编码转换失败回调 反向地理编码转换失败时触发，并返回错误信息。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
var point = new plus.maps.Point(116.347496,39.970191);
plus.maps.Map.reverseGeocode(point,{},function(event){
var address = event.address;// 转换后的地理位置
var point = event.coord;// 转换后的坐标信息
var coordType = event.coordType; // 转换后的坐标系类型
alert("Address:"+address);
},function(e){
alert("Failed:"+JSON.stringify(e));
});
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
反向地理编码 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">addOverlay</h1>
向地图中添加覆盖物
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
Boolean mapObj.addOverlay( overlay );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
此方法用于向地图中添加覆盖物。支持各种从maps.Overlay对象继承的各种覆盖物对象； 如果添加不支持的对象则直接返回false； 同一覆盖物对象只能添加到地图中一次，已在地图中的覆盖物再次添加时则返回false。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>overlay: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Overlay">Overlay</a> ) 必选 在地图中要添加覆盖物 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
Boolean : 添加成功返回true，失败返回false。
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 添加标点
var marker=null;
function addMarker(){
if(marker){return;}
marker=new plus.maps.Marker(new plus.maps.Point(116.347496,39.970191));
marker.setIcon("/logo.png");
marker.setLabel("HBuilder");
var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
marker.setBubble(bubble);
map.addOverlay(marker);
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
向地图中添加覆盖物 
<button onclick="addMarker()">添加标点</button>
<div id="map">地图加载中...</div>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">centerAndZoom</h1>
设置地图初始中心点和缩放级别
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void mapObj.centerAndZoom( center, zoom );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
用于设置地图的初始中心点和缩放级别，通常在创建地图后立即调用。默认中心点为天安门，默认缩放级别为12； 该方法设置的中心点和缩放级别可通过reset()方法恢复； 如果在地图显示后调用将改变地图的中心点和缩放级别并立即更新，并将初始值更新。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>center: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Point">Point</a> ) 必选 地图初始化的中心点坐标 </li><li>zoom: ( Number ) 必选 地图初始化的缩放级别 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 0px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
<div id="map">地图加载中...</div>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">clearOverlays</h1>
清除地图中所有覆盖物对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void mapObj.clearOverlays();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
此方法用于清除地图中所有覆盖物对象。清除地图中的覆盖物对象后会自动更新地图视图。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.347496,39.970191), 18 );
addMarker();
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 添加标点
var markers=[],i=0;
function addMarker(){
var marker=new plus.maps.Marker(new plus.maps.Point(116.347496+0.001*i,39.970191+0.001*i));
marker.setIcon("/logo.png");
marker.setLabel("HBuilder");
var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
marker.setBubble(bubble);
map.addOverlay(marker);
markers.push(marker);
i++;
}
// 清除所有标点
function clearMarker(){
map.clearOverlays();
markers=[];
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
清除地图中所有覆盖物对象 
<button onclick="addMarker()">添加标点</button>
<button onclick="clearMarker()">清除标点</button> 
<div id="map">地图加载中...</div>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">close</h1>
关闭地图控件
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void mapObj.close();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
关闭地图控件将会销毁地图使用的资源，不可再使用。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}

var map=null;
// 显示地图
function showMap(){
map||(map=new plus.maps.Map('map'),
map.centerAndZoom(new plus.maps.Point(116.3977,39.906016), 12));
map.show();
}
// 关闭地图
function closeMap(){
map&&(map.close(),map=null);
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
关闭地图控件 
<button onclick="showMap()">显示地图</button>
<button onclick="closeMap()">关闭地图</button>
<div id="map">地图加载中...</div>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">getBounds</h1>
获取当前地图可视范围的地理区域
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
Bounds mapObj.getBounds();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
当旋转或俯视时，是当前地图可视范围的最大外接矩形地理区域。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
<ahref="https://blog.csdn.net/qq_40575646/article/details/122824730#plus.maps.Bounds">Bounds</a> : 获取到
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 获取当前地图显示的地理区域
function getCurrentBounds(){
alert( JSON.stringify(map.getBounds()) );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
获取当前地图显示的地理区域 
<button onclick="getCurrentBounds()">获取地理区域</button>
<div id="map">地图加载中...</div>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">getCenter</h1>
获取地图中心点位置
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
Point mapObj.getCenter();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
此方法用于获取设置的地图中心点位置（centerAndZoom/setCenter）。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.Point">Point</a> : 地图中心点坐标
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 获取地图的中心点
function getCenter(){
var center = map.getCenter();
alert( JSON.stringify(center) );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
获取地图中心点 
<button onclick="getCenter()">GetCenter</button>
<div id="map">地图加载中...</div>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">getCurrentCenter</h1>
获取当前地图显示的地图中心点位置
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
Boolean mapObj.getCurrentCenter( callback );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
此方法用于获取当前地图显示的地图中心点位置，获取成功后通过callback回调返回。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>callback: ( <ahref="https://www.html5plus.org/doc/zh_cn/maps.html#plus.maps.UserLocationCallback">UserLocationCallback</a> ) 必选 获取当前地图显示的地图中心点位置完成后执行的通知操作结果方法，在回调函数中返回的point信息为当前地图中心点坐标 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
Boolean : 执行获取操作成功则返回true，一定会执行通知结果方法；否则返回false。
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Map Example</title>
<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
// 确保DOM解析完成
if(!em||!window.plus||map){return};
map = new plus.maps.Map("map");
map.centerAndZoom( new plus.maps.Point(116.3977,39.906016), 12 );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
em=document.getElementById("map");
plusReady();
},false);
// 获取当前地图显示的地图中心点位置
function getCurrentCenter(){
map.getCurrentCenter( function ( state, point ){
if( 0 == state ){
alert( JSON.stringify(point) );
}else{
alert( "Failed!" );
}
} );
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 100px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
</style>
</head>
<body>
获取当前地图显示的地图中心点位置 
<button onclick="getCurrentCenter()">获取中心位置</button>
<div id="map">地图加载中...</div>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;"></h1>
<h1 style="margin-left:0;"></h1>
</div>
<div style="margin-left:auto;">

</div>
 </div>
 </div>
 <div id="treeSkill"></div>

页: [1]

宜信同城网交流论坛's Archiver

Maps模块管理地图控件，用于在web页面中显示地图控件，提供各种接口操作地图控件，如 ...