html5重置坐标,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对象test

#map { width: 100%; line-height: 200px; text-align: center; background: #FFFFFF;}

地图加载中...

function showMap(){

var map = new plus.maps.Map("map");

}

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方法更新。

完整示例

*{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;}

[当前位置]

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

}

课程图标