html5实现地图上定位导航路线方法如下：
1.先通过百度拾取坐标系统获得点位的坐标。
http://api.map.baidu.com/lbsapi/getpoint/index.html
2.在网页的<head>中插入百度API引用脚本。
<script type="text/javascript" src="http://api.map.baidu.com/api
key=&v=1.1&services=true"></script>
3.在网页的</body>之后</html>之前插入地图显示代码。
4.设置显示地图的div的id为“dituContent”，即添加 id="dituContent"
由于jqm的div的高度都是根据内容自由放大的，所以为了地图能正常显示，还需要
增加一个高度值，一般情况600px就可以，完成。
html5 导航路线效果：
调用核心代码：
<script type="text/javascript">
//默认地理位置设置为上海市浦东新区
var x=121.48789949,y=31.24916171
window.onload = function() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition)
document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser."
// 百度地图API功能
var map = new BMap.Map("container")
var point = new BMap.Point(x,y)
map.centerAndZoom(point,12)
var geolocation = new BMap.Geolocation()
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point)
map.addOverlay(mk)
map.panTo(r.point)
}
else {
alert('failed'+this.getStatus())
}
},{enableHighAccuracy: true})
return
}
alert("当前的浏览器不支持获取地理位置！")
}
function showPosition(position){
x=position.coords.latitude
y=position.coords.longitude
}
</script>
运行效果如下：
首页代码index.html
//script代码，参数分别是，本页地址，本页名称，跳转页地址function redirect(u, n, g){
location.href = g + '?url=' + u + '&pn=' + encodeURI(n)
}
//html代码，这里向下一个页面传的是本页的页面名称和地址
<a href="#" onClick="redirect('index.html', '首页', 'product.html')">产品</a>
产品页代码product.html
//script代码function GetRequest() {
var url = location.search //获取url中"?"符后的字串
var theRequest = new Object()
if (url.indexOf("?") != -1) {
var str = url.substr(1)
strs = str.split("&")
for(var i = 0 i < strs.length i ++) {
theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1])
}
}
return theRequest
}
var param = GetRequest()
window.onload = function(){
//一般来说，当前所在页面不需要加链接
document.getElementById('d').innerHTML = '<a href="'+ param.url +'">'+ decodeURI(param.pn) +'</a> -> 产品页'
}
//html代码，导航所在容器
<div id="d"></div>
其他页面大致相同
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）