HTML5猎取目前地理位置并在baidu地图上展现的实例
发布时间:09/01 来源:未知 浏览:
关键词:
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.调取baidu地图展现
<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>基于HTML5查寻地理位置并调取baiduAPI展现</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; // 使用baidu地图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> <p id="container" style="width:640px;height:640px"></p></body></html>
本文讲解了HTML5猎取当前地理位置并在baidu地图上展现的实例,更多相关内容请关注百分百源码网。
相关引荐:
通过php 中的自增id来创立独一编号类
关于php 优化页面输出,兼容搜索引擎机器人拜访的实例的讲解
通过php 调取ffmpeg来猎取视频信息
以上就是HTML5猎取当前地理位置并在baidu地图上展现的实例的具体内容,更多请关注百分百源码网其它相关文章!