html怎么设置地图(HTML5获取当前地理位置并在百度地图上展示的实例)
类别:Web前端 浏览量:1949
时间:2021-10-26 11:48:43 html怎么设置地图
HTML5获取当前地理位置并在百度地图上展示的实例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.jpg" alt="html怎么设置地图(HTML5获取当前地理位置并在百度地图上展示的实例)" border="0" />
到此这篇关于HTML5获取当前地理位置并在百度地图上展示的实例的文章就介绍到这了,更多相关HTML5获取地理位置并展示内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- 数组循环遍历展示vue(Vue中foreach数组与js中遍历数组的写法说明)
- html怎么设置地图(HTML5获取当前地理位置并在百度地图上展示的实例)
- 前端树结构数据很多怎么展示(amazeui树节点自动展开折叠面板并选中第一个树节点的实现)
- vue在html里面怎么展示图片(v-html渲染组件问题)
- html5播放视频的元素(HTML5在手机端实现视频全屏展示方法)
- vue获取图片并展示(vue卡片式点击切换图片组件使用详解)
- thinkphp 多维度展示数据(Thinkphp自定义生成缩略图尺寸的方法)
- react代码展示(教你如何从 html 实现一个 react)
- 图片如何存放在mysql中(将图片保存到mysql数据库并展示在前端页面的实现代码)
- css设置隐藏左右边框(CSS 实现元素较宽不能被完全展示时将其隐藏的方法)
- 息烽 这个村 治垃圾 有招 人人争当卫生模范(息烽这个村治垃圾)
- 今天要吃什么(今天要吃什么菜)
- 三杨之一 南杨 杨溥 安贞履节,酿醴调羹,宰相之气(三杨之一南杨杨溥)
- 今天会下雨吗(今天会下雨吗小说)
- 追连续剧,品古今联4 明代三杨,联妙诗佳(追连续剧品古今联4)
- 三杨 共辅四朝帝王,构建明帝国内阁行政圈(三杨共辅四朝帝王)
热门推荐
- nginx启动报错连接失败(宝塔面板Nginx环境中出现404 Not Found的解决方法)
- sql server事务回滚(SQL Server 添加Delete操作回滚日志方式)
- mysql5.5.36版本介绍(WDCP控制面板升级mysql为5.7.11的方法)
- python怎样看字符unicode编码(Python3中编码与解码之Unicode与bytes的讲解)
- 5.6以上版本mysql数据复制(MySQL5.7并行复制原理及实现)
- SQL Server变量
- 宝塔面板如何通过ip访问网站(宝塔面板301重定向使用教程)
- jquery filter方法
- docker容器是怎么进行通信的(Docker容器间通信与外网通信的操作)
- pythonmatplotlib怎么用(Python matplotlib画图与中文设置操作实例分析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9