数据科学与编程

一.访客ip信息提示

项目需要获取每一个用户的gps位置，如果用户禁止了获取位置权限，则根据用户IP获取用户的位置。
首先说使用HTML5进行GPS定位，使用 Geolocation（地理定位）的getCurrentPosition() 方法来获得用户的位置。getCurrentPosition(successCallback，errorCallback，positionOptions)方法含三个参数。

第一个参数successCallback表示调用getCurrentPosition函数成功以后的回调函数，该函数带有一个参数，对象格式，表示获取到的用户位置数据。该对象包含两个属性 coords 和 timestamp。其中 coords 属性包含以下7个值：

accuracy：精确度;

latitude：纬度;

longitude：经度;

altitude：海拔;

海拔高度的精确度;

heading：朝向;

speed：速度。

第二个参数errorCallback表示调用getCurrentPosition函数失败以后的回调函数，同样带有一个对象格式的参数。message：错误信息和 code：错误代码。其中错误代码包含以下四个值：

UNKNOW_ERROR：表示不包括在其它错误代码中的错误，这里可以在 message 中查找错误信息;

PERMISSION_DENIED：表示用户拒绝浏览器获取位置信息的请求;

POSITION_UNAVALIABLE：表示网络不可用或者连接不到卫星;

TIMEOUT：表示获取超时。注：必须在options中指定了timeout值时才有可能发生这种错误;

第三个参数为一个对象，用来设置一些属性

enableHighAcuracy【Boolean】：表示是否启用高精确度模式，启用则浏览器在获取位置信息时可能需要耗费更多的时间;

timeout ：表示浏览需要在指定的时间内获取位置信息（毫秒）;

maximumAge ：表示浏览器重新获取位置信息的时间间隔（毫秒）;

<script type="text/javascript">
function getUserIP(onNewIP) { //  onNewIp - your listener function for new IPs
      //compatibility for firefox and chrome
      var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || 
window.webkitRTCPeerConnection;
      var pc = new myPeerConnection({
         iceServers: []
     }),
     noop = function() {},
     localIPs = {},
     ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
     key;
 
     function iterateIP(ip) {
         if (!localIPs[ip]) onNewIP(ip);
         localIPs[ip] = true;
    }
 
      //create a bogus data channel
     pc.createDataChannel("");
 
     // create offer and set local description
     pc.createOffer().then(function(sdp) {
         sdp.sdp.split('\n').forEach(function(line) {
             if (line.indexOf('candidate') < 0) return;
             line.match(ipRegex).forEach(iterateIP);
         });
         
         pc.setLocalDescription(sdp, noop, noop);
     }).catch(function(reason) {
         // An error occurred, so handle the failure to connect
     });
 
     //sten for candidate events
     pc.onicecandidate = function(ice) {
         if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) 
return;
         ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
     };
}
 
// Usage
 
getUserIP(function(ip){
     alert("ip! :" + ip);
});

</script>

function getUserIP(onNewIP) { // onNewIp - your listener function for new IPs

//compatibility for firefox and chrome

var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection ||

window.webkitRTCPeerConnection;

var pc = new myPeerConnection({

iceServers: []

}),

noop = function() {},

localIPs = {},

ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,

key;

function iterateIP(ip) {

if (!localIPs[ip]) onNewIP(ip);

localIPs[ip] = true;

}

//create a bogus data channel

pc.createDataChannel("");

// create offer and set local description

pc.createOffer().then(function(sdp) {

sdp.sdp.split('\n').forEach(function(line) {

if (line.indexOf('candidate') < 0) return;

line.match(ipRegex).forEach(iterateIP);

});

pc.setLocalDescription(sdp, noop, noop);

}).catch(function(reason) {

// An error occurred, so handle the failure to connect

});

//sten for candidate events

pc.onicecandidate = function(ice) {

if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex))

return;

ice.candidate.candidate.match(ipRegex).forEach(iterateIP);

};

}

// Usage

getUserIP(function(ip){

alert("ip! :" + ip);

});

</script>

二.引入高德地图

首先注册高德地图开发者账号，建立应用，获取key
完整代码：

<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地图显示</title>
    <style>
        /* 设置容器样式，可根据自身需求设置，我这里就直接铺满了 */
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
 
<body>
    <!-- 为地图创建容器 -->
    <div id="container"></div>
    <!-- 加载地图JSAPI脚本 -->
    <script src="https://webapi.amap.com/maps?v=1.4.11&key=这里请输入你获取到的Key值"></script>
    <script>
        var map = new AMap.Map('container', {
            resizeEnable: true, //是否监控地图容器尺寸变化
            zoom: 11, //初始化地图层级
            center: [116.397428, 39.90923] //初始化地图中心点（地图的坐标）
        });
    </script>
</body>
 
</html>

<!doctype html>

<html>

<head>

<style>

/* 设置容器样式，可根据自身需求设置，我这里就直接铺满了 */

html,

body,

#container {

width: 100%;

height: 100%;

}

</style>

</head>

<body>

var map = new AMap.Map('container', {

resizeEnable: true, //是否监控地图容器尺寸变化

zoom: 11, //初始化地图层级

center: [116.397428, 39.90923] //初始化地图中心点（地图的坐标）

});

</script>

</body>

</html>

打赏赞

api 地图

本站上原创文章未经作者许可，不得用于商业用途，仅做学习交流使用，本站免责声明。转载请注明出处，否则保留追究法律责任的权利。《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
数据科学与编程 » 网站登录提示及引入高德api

分享到：

一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

发表评论取消回复

投稿请登录

回复时间

相关推荐

发表评论 取消回复

提供最优质的博文资源集合

投稿请登录

回复时间

发表评论取消回复