html5中利用google map,处理当前位置相关应用
2016-07-02 14:41
393 查看
1 html页面
2 js文件
<!DOCTYPE html> <html> <head> <title>location.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=GBK"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> <p id="demo">点击这个按钮,获得您的坐标:</p> <button onclick="getLocation()">试一下</button><br> <button onclick="getLocationWithError()">试一下(含错误判断)</button><br> <button onclick="getLocationOnMap()">在地图上展现当前位置</button><br> <button onclick="getLocationOnMapCanMove()">在地图上展现当前位置(可以拖拽,放大缩小)</button><br> <button onclick="getLocationOnMapCanRun()">在地图上展现当前位置(支持目标移动,如汽车移动)</button><br> <div id="mapholder"></div> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="js/location.js"></script> </body> </html>
2 js文件
var locationX;// 经度 var locationY;// 纬度 function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { // x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { var x = document.getElementById("demo"); var xxx = "Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; x.innerHTML = xxx; // 如下方法取不到全局变量 // locationX = position.coords.longitude; // locationY = position.coords.latitude; // alert(locationY); } // ==含错误判断=== function getLocationWithError() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError); } else { // x.innerHTML = "Geolocation is not supported by this browser."; } } function showError(error) { var x = document.getElementById("demo"); switch (error.code) { case error.PERMISSION_DENIED: x.innerHTML = "用户没允许使用本地位置" break; case error.POSITION_UNAVAILABLE: x.innerHTML = "无法获取当前位置" break; case error.TIMEOUT: x.innerHTML = "The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML = "An unknown error occurred." break; } } //=======把经纬度放在地图上显示(展现在页面上),======= function getLocationOnMap(){ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPositionInMap, showError); } } function showPositionInMap(position) { var latlon=position.coords.latitude+","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />"; } //=======当前位置,在google地图显示,并能拖拽,放大缩小========== function getLocationOnMapCanMove(){ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPositionCanMove, showError); } } function showPositionCanMove(position) { lat=position.coords.latitude; lon=position.coords.longitude; latlon=new google.maps.LatLng(lat, lon) mapholder=document.getElementById('mapholder') mapholder.style.height='250px'; mapholder.style.width='500px'; var myOptions={ center:latlon,zoom:14, mapTypeId:google.maps.MapTypeId.ROADMAP, mapTypeControl:false, navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} }; var map=new google.maps.Map(document.getElementById("mapholder"),myOptions); var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); } //=========在地图上展现当前位置(支持目标移动,如汽车移动)===== function getLocationOnMapCanRun(){ if (navigator.geolocation) { navigator.geolocation.watchPosition(showPositionCanMove, showError); //停止监视的话,用clearWatch } }
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- 谷歌正式开始补偿Nexus 6P重启门和电池门用户:最高赔400美元
- 每日安全资讯:谷歌发现 G Suite 漏洞,部分密码明文存储长达十四年
- 每日安全资讯:命案侦破过程揭示 Google 能够跟踪全世界的手机
- html5 web数据存储
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证(升级版)
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 关于前端的思考与感悟
- 新时代编辑神器:Atom
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的