html5:地理信息 LBS基于地理的服务和百度地图API的使用

时间 2019-11-10

标签 html5 html 地理信息 lbs 基于服务百度地图 api 使用栏目 HTML5 繁體版

原文原文链接

地理位置请求

单次定位请求getCurrentPosition(请求成功函数，请求失败函数，数据收集方式)
屡次定位请求watchPosition(请求成功函数，请求失败函数，数据收集方式)
关闭更新请求clearWatch ，相似js中的定时器php

navigator.geolocation
单次定位请求  ：getCurrentPosition(请求成功，请求失败，数据收集方式)
    请求成功函数function(position)
        经度 :  position.coords.longitude
        纬度 :  position.coords.latitude
        准确度 :  position.coords.accuracy
        海拔 :  position.coords.altitude
        海拔准确度 :  position.coords.altitudeAcuracy
        行进方向 :  position.coords.heading
        地面速度 :  position.coords.speed
        时间戳 : new Date(position.timestamp)

     请求失败函数function(err)
        失败编号  ：code
        0  :  不包括其余错误编号中的错误
        1  :  用户拒绝浏览器获取位置信息
        2  :  尝试获取用户信息，但失败了
        3  :   设置了timeout值，获取位置超时了
    数据收集 :  json的形式
        enableHighAcuracy  :  更精确的查找，默认false
        timeout  :  获取位置容许最长时间，默认infinity
        maximumAge :  位置能够缓存的最大时间，默认0
屡次定位请求  :  watchPosition(像setInterval)
        移动设备有用，位置改变才会触发
        配置参数：frequency 更新的频率

关闭更新请求  :  clearWatch(像clearInterval)

demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

//LBS : 基于地图信息的应用

window.onload = function(){
    var oInput = document.getElementById('input1');
    var oT = document.getElementById('t1'); 
    var timer = null;   
    oInput.onclick = function(){    
                //通常移动端，手机位置换动。//换成单次试一试getCurrentPosition      
        timer = navigator.geolocation.watchPosition(function(position){         
            oT.value += '经度:' + position.coords.longitude+'\n';
            oT.value += '纬度 :' + position.coords.latitude+'\n';
            oT.value += '准确度 :' + position.coords.accuracy+'\n';
            oT.value += '海拔 :' + position.coords.altitude+'\n';
            oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';
            oT.value += '行进方向 :' + position.coords.heading+'\n';
            oT.value += '地面速度 :' + position.coords.speed+'\n';
            oT.value += '时间戳:' + new Date(position.timestamp)+'\n';                     
        },function(err){            
            //err.code // 失败所对应的编号          
            alert( err.code );          
            navigator.geolocation.clearWatch(timer);            
        },{
            enableHighAcuracy : true,
            timeout : 5000,
            maximumAge : 5000,
            frequency : 1000
        });     
    };  
};

</script>
</head>
<body>
<input type="button" value="请求" id="input1" /><br />
<textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;">
</textarea>
</body>
</html>

结果

百度地图API的使用

地址

http://lbsyun.baidu.com/,http://lbsyun.baidu.com/index.php?title=jspopular找实例html

百度地图apidemo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{ width:400px; height:400px; border:1px #000 solid;}
</style>
<script src="http://api.map.baidu.com/api?v=1.3"></script>
<script>
window.onload = function(){
    var oInput = document.getElementById('input1'); 
    oInput.onclick = function(){        
        navigator.geolocation.getCurrentPosition(function(position){            
            var y = position.coords.longitude;
            var x = position.coords.latitude;
            
            var map = new BMap.Map("div1");         
            var pt = new BMap.Point(y, x);          
            map.centerAndZoom(pt, 14);
            map.enableScrollWheelZoom();
            var myIcon = new BMap.Icon("by.png", new BMap.Size(30,30));
            var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 建立标注
            map.addOverlay(marker2); 
            
            var opts = {
              width : 200,     // 信息窗口宽度
              height: 60,     // 信息窗口高度
              title : "by标题"  // 信息窗口标题
            }
            var infoWindow = new BMap.InfoWindow("软硬件公司", opts);  // 建立信息窗口对象
            map.openInfoWindow(infoWindow,pt); //开启信息窗口                     
        });     
    };  
};
</script>
</head>
<body>
<input type="button" value="请求" id="input1" />
<div id="div1"></div>
</body>
</html>

结果

固然还有不少api，如滚轮缩放，3d图，热力图，本身再改一改，就快实现了。最主要先知道最基本的吧。git