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 相关文章推荐
使用css3绘制出各种几何图形
Aug 17 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 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数据流应用的简单例子
2012/06/01 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
python素数筛选法浅析
2018/03/19 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
详解Python3 pickle模块用法
2019/09/16 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
甲方资料员岗位职责
2013/12/13 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
2014年党建工作总结
2014/11/11 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
护理自荐信
2019/05/14 职场文书