HTML5获取当前地理位置并在百度地图上展示的实例


Posted in HTML / CSS onJuly 10, 2020

1.HTML5获取当前地理位置

HTML5 Geolocation API(地理位置应用程序接口)可以获取当前地理位置,手机端使用GPS,电脑则根据网络定位

检查浏览器是否支持HTML5 Geolocation API

<script type="text/javascript">
if(navigator.geolocation){
    alert('浏览器支持GeoLocation!');
}else{
    alert('浏览器不支持GeoLocation!');
}
</script>

提供了3个调用方法

// 获取用户当前位置
void getCurrentPosition(onSuccess, onError, options);

// 持续获取用户当前位置,showLocation表示回调方法
int watchPosition(showLocation, onError, options);

// 取消监控, watchId 为watchPosition返回值
void clearWatch(watchId);

onSuccess 成功后回调方法(必选)
onError 失败回调方法(可选)
options 其他参数(可选)

options = {
    enableHighAccuracy, // boolean,是否要求高精度的地理信息
    timeout,            // 最大等待时间,默认0毫秒
    maximumAge          // 应用程序缓存时间
}

2.调用百度地图展示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>  
<title>基于HTML5查找地理位置并调用百度API展示</title> 
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>  
<script type="text/javascript">

    // 调用HTML5 GeoLocation API获取地理位置
    function getLocation(){

        document.getElementById('container').innerHTML = '正在搜寻中,请稍候。。。';

        var options = {
            enableHighAccuracy:true, 
            maximumAge:1000
        }

        if(navigator.geolocation){
            //浏览器支持geolocation
            navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
        }else{
            //浏览器不支持geolocation
            alert('浏览器不支持GeoLocation!');
        }
    }

    // 获取成功
    function onSuccess(position){

        // 经度
        var longitude =position.coords.longitude;

        // 纬度
        var latitude = position.coords.latitude;

        // 使用百度地图API创建地图实例  
        var map =new BMap.Map("container");

        // 创建一个坐标
        var point =new BMap.Point(longitude,latitude);

        // 地图初始化,设置中心点坐标和地图级别  
        map.centerAndZoom(point, 16);

        // 设置标注的图标,可自己定义图标
        var icon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {  
            offset: new BMap.Size(10, 25),              // 定位图标尺寸  
            imageOffset: new BMap.Size(0, 0 - 11 * 25)  // 设置图片偏移  
        }); 

        // 设置标注的经纬度
        var marker = new BMap.Marker(new BMap.Point(longitude,latitude),{icon:icon});

        // 把标注添加到地图上
        map.addOverlay(marker);

        // 设置点击事件
        marker.addEventListener("click", function(){
            alert("经度:" + longitude + ", 纬度:" + latitude);
        });
    }

    // 获取失败
    function onError(error){
        switch(error.code){
            case 1:
                alert("位置服务被拒绝");
            break;

            case 2:
                alert("暂时获取不到位置信息");
            break;

            case 3:
                alert("获取信息超时");
            break;

            case 4:
                alert("未知错误");
            break;
        }
    }

    window.onload = getLocation;
</script>
</head>
<body>
   <div id="container" style="width:640px;height:640px"></div>
</body>
</html>

HTML5获取当前地理位置并在百度地图上展示的实例

HTML5获取当前地理位置并在百度地图上展示的实例

到此这篇关于HTML5获取当前地理位置并在百度地图上展示的实例的文章就介绍到这了,更多相关HTML5获取地理位置并展示内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
浅析两列自适应布局的3种思路
May 03 HTML / CSS
CSS3 Backgrounds属性相关介绍
May 11 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
使用css3实现的windows8开机加载动画
Dec 09 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 #HTML / CSS
HTML5图片层叠的实现示例
Jul 07 #HTML / CSS
HTML5 层的叠加的实现
Jul 07 #HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 #HTML / CSS
html5启动原生APP总结
Jul 03 #HTML / CSS
HTML5开发动态音频图的实现
Jul 02 #HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 #HTML / CSS
You might like
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
php实现zip文件解压操作
2015/11/03 PHP
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
查看Django和flask版本的方法
2018/05/14 Python
python将txt文件读取为字典的示例
2018/12/22 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
python里dict变成list实例方法
2019/06/26 Python
基于python plotly交互式图表大全
2019/12/07 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
优秀村官事迹材料
2014/01/10 职场文书
运动会方阵解说词
2014/02/12 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
带病坚持工作事迹
2014/05/03 职场文书
励志演讲稿大全
2014/08/21 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL