html5——地理位置

获取地理位置

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //兼容处理
    if (navigator.geolocation) {
        // successCallback 当获取用户位置成功的回调函数
        // errorCallback 当获取用户位置失败的回调函数
        navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
    } else {
        console.log('sorry,你的浏览器不支持地理定位');
    }

    // 获取地理位置成功的回调函数
    function successCallback(position) {
        // 获取用户当前的经纬度
        // coords坐标
        // 纬度latitude
        var wd = position.coords.latitude;
        // 经度longitude
        var jd = position.coords.longitude;
        console.log("获取用户位置成功！");
        console.log(wd + '----------------' + jd);
    }

    // 获取地理位置失败的回调函数
    function errorCallback(error) {
        console.log(error);
        console.log('获取用户位置失败！')
    }
</script>

</body>
</html>

 

地理坐标抓取

http://api.map.baidu.com/lbsapi/getpoint/index.html

百度API展示

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html{width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
        #l-map{height:300px;width:100%;}
        #r-result{width:100%;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <title>本地搜索的结果面板</title>
</head>
<body>
<div id="l-map"></div>
<div id="r-result"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("l-map");            // 创建Map实例
    map.centerAndZoom(new BMap.Point(116, 39.915), 16);
    var local = new BMap.LocalSearch(map, {
        renderOptions: {map: map, panel: "r-result"}
    });
    local.search("餐饮");
</script>

 

posted @ 2017-12-26 10:29  var_obj  阅读(247)  评论(0)  编辑  收藏  举报