HTML5+ 地图操作--编程之路,记录点滴,认真生活

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

// 设置目标位置坐标点和其实位置坐标点
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 );

2、Map(id,options): 创建Map对象

<button type="button" onclick="showMap();">test</button>
<style type="text/css">
#map { width: 100%; line-height: 200px; text-align: center; background: #FFFFFF;}
</style>
<div id="map">地图加载中...</div>
<script type="text/javascript">
function showMap(){
 var map = new plus.maps.Map("map");
}
</script>

MapOptions 地图对象的参数

说明：设置地图对象初始化显示时使用的属性参数。

属性：

center: (Point 类型 )地图的中心位置
未设置则使用地图的默认中心点（由地图供应商确定）。

zoom: (Number 类型 )地图的缩放级别
有效范围为1-22，默认值为12，设置无效的值则使用默认值。

type: (MapType 类型 )地图的视图类型
可设置普通街道视图、卫星视图，默认值为普通街道视图。

traffic: (Boolean 类型 )地图的是否显示交通信息
true表示显示地图的交通信息图层，false则不显示，默认值为false。

zoomControls: (Boolean 类型 )是否显示地图的内置缩放控件
true表示显示地图的内置缩放控件，false则不显示，默认值为false。

position: (String 类型 )地图控件在Webview窗口的布局模式
可取值： "static" - 地图控件在页面中正常布局模式，如果页面存在滚动条则随窗口内容滚动； "absolute" - 地图控件在页面中绝对布局模式，如果页面存在滚动条不随窗口内容滚动；默认值为"static"。注意：布局模式并不影响地图控件在窗口中的位置及大小，如果构造时传入的DOM元素位置及大小发生变化，可通过resize方法更新。

完整示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<style type="text/css">
*{margin:0px; padding:0px; font-size:14px;}
#footer{background:#FFFFFF; height:64px; width:100%;

 padding:12px; position:fixed; z-index:10; left:0px;

bottom:0px; line-height:30px;}
#goto{width:58px; height:58px;

 background:url(img/dh.png) no-repeat center center #51C332;

background-size:80% 80%; position:fixed; z-index:11; right:15px;

 bottom:15px;

 border-radius:58px;}
</style>
</head>
<body>
<div id="map" style="width:100%; height:500px;"></div>
<div id="footer">
    [当前位置]<br />
    <span id="address"></span>
</div>
<div id="goto" onclick="goto();"></div>
<script type="text/javascript">
var map, center, address;
function showMap(){
    plus.nativeUI.showWaiting();
    //创建地图
    map = new plus.maps.Map('map');
    //设置缩放级别
    map.setZoom(18);
    //开启用户位置显示
    map.showUserLocation(true);
    //获取用户位置信息
    map.getUserLocation( function(state, point){
        console.log(JSON.stringify(point));
        locationPos = point;
        center = new plus.maps.Point(point.longitude, point.latitude);
        //设置地图中心点
        map.setCenter(center);
        //在周围设置图标 "latitude":34.2337,"longitude":108.903271,
        var bike1 = new plus.maps.Point(point.longitude+0.0001, point.latitude+0.0003);
        var bike1Icon = new plus.maps.Marker(bike1);
        bike1Icon.setIcon('img/bike.png');
        var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
        bike1Icon.setBubble(bubble);
        map.addOverlay(bike1Icon);
        
        var bike1 = new plus.maps.Point(point.longitude - 0.0001, point.latitude - 0.0003);
        var bike1Icon = new plus.maps.Marker(bike1);
        bike1Icon.setIcon('img/bike.png');
        var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
        bike1Icon.setBubble(bubble);
        map.addOverlay(bike1Icon);
    });
    //获取用户地址信息
    plus.geolocation.getCurrentPosition(function(p){
        plus.nativeUI.closeWaiting();
        console.log(JSON.stringify(p));
        address =  p.address.poiName;
        document.getElementById('address').innerHTML = address;
    }, function(){
        
    });
    
}
document.addEventListener('plusready', function(){
    var winHeight = document.documentElement.clientHeight;
    document.getElementById('map').style.height = (winHeight - 88)+'px';
    showMap();
});
function goto(){
    plus.maps.openSysMap(center, address, center);
}
</script>
</body>
</html>