本文主要是介绍HTML5培训第15节课堂笔记(HTML5+maps,geolocation)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
HTML5培训第15节课堂笔记
1.地理信息定位：
window.οnlοad=function(){
mui.plusReady(function(){
plus.geolocation.getCurrentPosition(function(p){
latitude=p.coords.latitude;
longitude=p.coords.longitude;
varaddress=p.addresses;
},function(e){
console.log(e.message);
},{
provider:"baidu"
});
});
//监听
varwatchID=
plus.geolocation.watchPosition(function(){},function(),{});
plus.geolocation.clearWatch(watchID);
2.打开baidu地图进行导航
var src=new plus.maps.Point(latitude,longitude);
vardst=new plus.maps.Point("31.0242342","109.242432432");
plus.maps.openSysMap(dst,"都江堰xx地",src);
mui.openWindow({
url:"showMap.html",
id:"showMap.html",
extras:{lat:latitude,longi:longitude},
show:{
autoShow:false
}
});
3.跨页面拿值：cur=plus.webview.currentWebview();
latitude=cur.lati;
longitude=cur.longi;
4.显示地图：window.οnlοad=function(){
mui.plusReady(function(){
cur=plus.webview.currentWebview();
latitude=cur.lati;
longitude=cur.longi;
pcenter=newplus.maps.Point(longitude,latitude);
map=newplus.maps.Map("mymap");
map.centerAndZoom(pcenter,16);
plus.nativeUI.closeWaiting();
cur.show();
})
};
mymap指的是相应地图区域div的id值
标记点的作法：
function createMarker()
{
var marker=new plus.maps.Marker(pcenter);
marker.setIcon("imgs/map.jpg");
marker.setLabel("成都东软学院 C7");
var bubble=newplus.maps.Bubble("我在 成都东软学院 C7附近<br/>电话：028-888888");
marker.setBubble(bubble);
map.addOverlay(marker);
}
其他方法： map.showUserLocation(true);
map.getUserLocation(function(p){});
plus.maps.Circle(pcenter,0.5);
完整代码：
getPlus.html
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title></title>
<style>
.mui-content{
margin:0 auto;
text-align: center;
}
.mui-content button{
width:70%;
margin-top:80px;
}
</style>
<scriptsrc="js/mui.min.js"></script>
<linkhref="css/mui.min.css" rel="stylesheet"/>
<scripttype="text/javascript" charset="UTF-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<aclass="mui-action-back mui-icon mui-icon-left-navmui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>
<div class="mui-content">
<button class="mui-btn-primary" id="butnOpenBaidu"/>打开百度</button>
<button class="mui-btn-primary" id="butnOpenInner"/>使用内置地图</button>
</div>
<script>
var latitude;//纬度
var longitude;//经度
window.οnlοad=function(){
mui.plusReady(function(){
plus.geolocation.getCurrentPosition(function(p){//成功回调函数
latitude=p.coords.latitude;
longitude=p.coords.longitude;
varaddress=p.addresses;
},function(e){//失败回调函数
console.log(e.message);
},{//参数配置
provider:"bdidu"//百度
});
//监听
varwatchID=plus.geolocation.watchPosition(function(){
},
function(){
},
{
});
//停止监听
plus.geolocation.clearWatch(watchID);
})
document.getElementById("butnOpenBaidu").addEventListener("tap",function(){
var src=newplus.maps.Point(longitude,latitude);//起点
var dst=newplus.maps.Point("109.5555","31.5885");
plus.maps.openSysMap(dst,"都江堰",src);//打开已经有的地图
})
document.getElementById("butnOpenInner").addEventListener("tap",function(){
mui.openWindow({
url:"showMap.html",
id:"showMap.html",
extras:{
latitude:latitude,
longitude:longitude
},
show:{
autoShow:false
}
})
},false);
}
</script>
</body>
</html>
showMap.html
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title></title>
<scriptsrc="js/mui.min.js"></script>
<linkhref="css/mui.min.css" rel="stylesheet"/>
<style>
#map{
height:800px;
}
</style>
<scripttype="text/javascript" charset="UTF-8">
mui.init();
</script>
</head>
<body>
<!--使用内置地图-->
<headerclass="mui-bar mui-bar-nav">
<h1 class="mui-title">地图显示</h1>
</header>
<div class="mui-content">
<!--装地图区域-->
<divid="map">
</div>
</div>
</body>
<script>
var cur;
var latitude,longitude;
var pcenter;//中心点
var map;
window.οnlοad=function(){
mui.plusReady(function(){
cur=plus.webview.currentWebview();
latitude=cur.latitude;
longitude=cur.longitude;
pcenter=newplus.maps.Point(longitude,latitude);
map=newplus.maps.Map("map");//地图控件
map.centerAndZoom(pcenter,16);//把地图定位到中心,以中心点作为缩放
createMarker();
plus.nativeUI.closeWaiting();//关闭进度条
//窗口显示
cur.show();
})
};
functioncreateMarker(){
var marker=newplus.maps.Marker(pcenter);
marker.setIcon("images/map.jpg");//图标
marker.setLabel("我在成都东软学院附近");
//气泡
var bubble=newplus.maps.Bubble("我在成都东软学院");//一点跳出提示文字支持html标识
marker.setBubble(bubble);
map.addOverlay(marker)//在地图上做一些特殊的东西
}
//map.showUserLocation(true);
//map.getUserLocation(function(p){});//获得当前用户的位置
//plus.maps.Circle(pcenter,0.5);
</script>
</html>
地图插件配置
Mainifest.json sdk配置
获取key参考：
http://ask.dcloud.net.cn/article/29
这篇关于HTML5培训第15节课堂笔记(HTML5+maps,geolocation)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
