基于百度地图的HTML5地理位置定位实例

使用HTML5 canvas做地图

使用 HTML5 canvas 做地图（ 3）图片加载平移放大缩小终于开始可以写代码了，手都开始痒了。

这里的代码仅仅是在 chrome 检测过，我可以肯定的是 IE10 以下浏览器是行不通，我一直在考虑，是不是使用 IE 禁止看我的篇博客，就是这群使用 IE 的人，给我加了很多工作量。

一个地图的基本动作，无非就是加载数据，平移，放大与缩小。

这篇博客主要是通过一张图片的方式来模拟一下。

我这里认为大家都稍微了解甚至熟悉 canvas 的一些 API，就不具体说，每一个参数代表什么意思了。

1 <!DOCTYPE html> 2 <html> 3 <head> 4 5 6 7 8 9 10 11 12 13 14 15 </head> 16 <body> 17 18 19 </body> 20 </html> 1 2 3 4<meta charset='utf-8'> <title>图片加载平移放大缩小示例</title> <style> html,body{ margin:0px; padding:0px; } canvas{ border: 1px solid #000; } </style><canvas id="canvas" width="800" height="800"></canvas> <script type="text/javascript" src="main.js"></script>var canvas,context; function int(){ canvas=document.getElementById('canvas'); context=canvas.getContext('2d');5}图片加载创建一个图片对象之后，图片不能马上绘制到 canvas 上面，因为图片还没有加载完成。

cordova+vue+webapp使用html5获取地理位置的方法

cordova+vue+webapp使⽤html5获取地理位置的⽅法1.在HTML5中使⽤Geolocation.getCurrentPosition()⽅法来获取地理位置。

语法：navigator.geolocation.getCurrentPosition(success, error, options)参数：success: 成功得到位置信息时的回调函数，使⽤Position 对象作为唯⼀的参数。

error: 获取位置信息失败时的回调函数，使⽤ PositionError 对象作为唯⼀的参数，这是⼀个可选项。

options:⼀个可选的PositionOptions 对象,包含以下3个参数。

enableHighAccuracy 是⼀个Boolean值，⽤来表明应⽤是否使⽤其最⾼精度来表⽰结果，默认为false。

timeout 是⼀个正的long值，表明的是设备必须在多长时间（单位毫秒）内返回⼀个位置，默认是Infinity。

maximumAge 是⼀个正的long值，表明可以返回多长时间（即最长年龄，单位毫秒）内的可获取的缓存位置。

如果设置为 0,说明设备不能使⽤⼀个缓存位置，⽽且必须去获取⼀个真实的当前位置。

如果设置为 Infinity ，那么不管设置的最长年龄是多少，设备都必须返回⼀个缓存位置。

默认值：02.success - 成功得到位置信息时的回调函数navigator.geolocation.getCurrentPosition(function(position)) {// 获取成功时的的处理//参数position是地理位置对象}position中返回的信息如下图：accuracy 获取到的纬度或者经度的精度(以⽶为单位)altitude 当前地理位置的海拨⾼度（不能获取为null）altitudeAccurancy 获取到的海拨⾼度的经度(以⽶为单位)heading 设备移动的⽅向（以度为单位）latitude 当前地理位置的纬度longitude 当前地理位置的经度speed 设备的前进速度(以⽶/秒为单位，不能获取时为null)timestamp 获取地理位置信息时的时间3.error - 获取位置信息失败时的回调函数navigator.geolocation.getCurrentPosition(function(position){// 获取成功时的的处理；//参数position是地理位置对象},function(error)) {// 获取失败时的的处理；}error中返回的信息如下图code属性有以下值：- 1 地理位置信息的获取失败，因为该页⾯没有获取地理位置信息的权限。

JS使用百度地图API自动获取地址和经纬度操作示例

JS使⽤百度地图API⾃动获取地址和经纬度操作⽰例本⽂实例讲述了JS使⽤百度地图API⾃动获取地址和经纬度操作。

分享给⼤家供⼤家参考，具体如下：在实际⼯作中我们经常会遇到这样的问题，但是当我们去看百度API的时候往往⼜达不到我们的要求。

故此，本篇博⽂讲述如何使⽤百度地图API⾃动获取地址和经纬度：1、HTML代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>点击地图获取地址和经纬度map，address，lng，lat</title><meta name="robots" content="noindex, nofollow"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><script type="text/javascript" src="/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script></head><body><div class="main-div"><form method="post" action="" name="theForm" enctype="multipart/form-data" onsubmit="return validate()"><table cellspacing="1" cellpadding="3" width="100%"><tr><td class="label">经度</td><td><input type="text" name="lng" id="lng" value=""/></td></tr><tr><td class="label">纬度</td><td><input type="text" name="lat" id="lat" value=""/></td></tr><tr><td class="label">地址</td><td><input type='text' value='' name='sever_add' id='sever_add' readonly><input type='button' value='点击显⽰地图获取地址经纬度' id='open'></td></tr></table></form><div id='allmap' style='width: 50%; height: 50%; position: absolute; display: none'></div></div></body></html>2、JS代码如下<script type="text/javascript">function validate() {var sever_add = document.getElementsByName('sever_add')[0].value;if (isNull(sever_add)) {alert('请选择地址');return false;}return true;}//判断是否是空function isNull(a) {return (a == '' || typeof(a) == 'undefined' || a == null) ? true : false;}document.getElementById('open').onclick = function () {if (document.getElementById('allmap').style.display == 'none') {document.getElementById('allmap').style.display = 'block';} else {document.getElementById('allmap').style.display = 'none';}}var map = new BMap.Map("allmap");var geoc = new BMap.Geocoder(); //地址解析对象var markersArray = [];var geolocation = new BMap.Geolocation();var point = new BMap.Point(116.331398, 39.897445);map.centerAndZoom(point, 12); // 中⼼点geolocation.getCurrentPosition(function (r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {var mk = new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);map.enableScrollWheelZoom(true);}else {alert('failed' + this.getStatus());}}, {enableHighAccuracy: true})map.addEventListener("click", showInfo);//清除标识function clearOverlays() {if (markersArray) {for (i in markersArray) {map.removeOverlay(markersArray[i])}}}//地图上标注function addMarker(point) {var marker = new BMap.Marker(point);markersArray.push(marker);clearOverlays();map.addOverlay(marker);}//点击地图时间处理function showInfo(e) {document.getElementById('lng').value = e.point.lng;document.getElementById('lat').value = t;geoc.getLocation(e.point, function (rs) {var addComp = rs.addressComponents;var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber; if (confirm("确定要地址是" + address + "?")) {document.getElementById('allmap').style.display = 'none';document.getElementById('sever_add').value = address;}});addMarker(e.point);}</script>将js代码放⼊到html中，我们可以得到效果图如下：更多关于JavaScript相关内容还可查看本站专题：《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。

php利用百度地图API进行IP定位和GPS定位

php利⽤百度地图API进⾏IP定位和GPS定位最近在做⼀个⼿机端的webapp地图应⽤，⽽核⼼内容当然是定位了，但是定位的话有⼏种⽅式，IP定位,GPS定位，基站定位（这个貌似webapp⽤不了），那么剩下核⼼的gps定位和ip定位了，我们知道，html5有定位API，但是该API拿到的GPS数据是硬件坐标，⽆法直接显⽰在地图上。

后来上百度LBS云看到有地图IP定位API和GPS坐标转换API，地址：百度地图API的调⽤需要申请KEY，这⾥就不具体介绍了，直接贴上本⼈写了两个关键⽅法，为了⽅便前台调⽤，返回数据采⽤以下格式{address: "北京市海淀区西⼆旗北路",province: "北京市",city: "北京市",street: "西⼆旗北路",street_number: "",city_code: 131,lng: 116.3207676804,lat: 40.064084055578}核⼼类<?php/*** @author xialei <xialeistudio@>*/class map{private static $_instance;const REQ_GET = 1;const REQ_POST = 2;/*** 单例模式* @return map*/public static function instance(){if (!self::$_instance instanceof self){self::$_instance = new self;}return self::$_instance;}/*** 执⾏CURL请求* @author: xialei<xialeistudio@>* @param $url* @param array $params* @param bool $encode* @param int $method* @return mixed*/private function async($url, $params = array(), $encode = true, $method = self::REQ_GET){$ch = curl_init();if ($method == self::REQ_GET){$url = $url . '?' . http_build_query($params);$url = $encode ? $url : urldecode($url);curl_setopt($ch, CURLOPT_URL, $url);}else{curl_setopt($ch, CURLOPT_URL, $url);curl_setopt($ch, CURLOPT_POST, true);curl_setopt($ch, CURLOPT_POSTFIELDS, $params);}curl_setopt($ch, CURLOPT_REFERER, '百度地图referer');curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53'); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);$resp = curl_exec($ch);curl_close($ch);return $resp;}/*** ip定位* @param string $ip* @return array* @throws Exception*/public function locationByIP($ip){//检查是否合法IPif (!filter_var($ip, FILTER_VALIDATE_IP)){throw new Exception('ip地址不合法');}$params = array('ak' => '百度地图API KEY','ip' => $ip,'coor' => 'bd09ll'//百度地图GPS坐标);$api = '/location/ip';$resp = $this->async($api, $params);$data = json_decode($resp, true);//有错误if ($data['status'] != 0){throw new Exception($data['message']);}//返回地址信息return array('address' => $data['content']['address'],'province' => $data['content']['address_detail']['province'],'city' => $data['content']['address_detail']['city'],'district' => $data['content']['address_detail']['district'],'street' => $data['content']['address_detail']['street'],'street_number' => $data['content']['address_detail']['street_number'],'city_code' => $data['content']['address_detail']['city_code'],'lng' => $data['content']['point']['x'],'lat' => $data['content']['point']['y']);}/*** GPS定位* @param $lng* @param $lat* @return array* @throws Exception*/public function locationByGPS($lng, $lat){$params = array('coordtype' => 'wgs84ll','location' => $lat . ',' . $lng,'ak' => '百度地图API KEY','output' => 'json','pois' => 0);$resp = $this->async('/geocoder/v2/', $params, false); $data = json_decode($resp, true);if ($data['status'] != 0){throw new Exception($data['message']);}return array('address' => $data['result']['formatted_address'],'province' => $data['result']['addressComponent']['province'],'city' => $data['result']['addressComponent']['city'],'street' => $data['result']['addressComponent']['street'],'street_number' => $data['result']['addressComponent']['street_number'],'city_code'=>$data['result']['cityCode'],'lng'=>$data['result']['location']['lng'],'lat'=>$data['result']['location']['lat']);}}。

使用HTML5地理位置定位到城市的方法及注意事项

使⽤HTML5地理位置定位到城市的⽅法及注意事项介绍本⽂将简述⼀下如何通过HTML5和百度地图开放平台提供的API来实现对浏览器的定位，同时记录了遇到的问题和解决⽅案。

实现效果为显⽰出⽤户所在的省市，即： XXX省 XXX市。

实现思路利⽤HTML5 提供的API获取到⽤户的经纬度信息，再将⽤户的经纬度信息传到百度地图开放平台，百度地图开放平台根据提供的坐标信息返回当前的省市。

兼容性及依赖兼容性：Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 都⽀持Geolocation（地理定位）.依赖：不依赖于任何库和框架HTML5 API使⽤HTML5 Geolocation API的getCurrentPosition() ⽅法能够获取⽤户的经纬度信息。

getCurrentPosition() 常⽤参数有两个，⼀个是成功时执⾏，⼀个时错误处理。

如果getCurrentPosition()运⾏成功，则向第⼀个参数中规定的函数返回⼀个coordinates对象，⽤于提供位置信息。

coordinates对象属性如下：属性描述titude⼗进制数的纬度coords.longitude⼗进制数的经度coords.accuracy位置精度coords.altitude海拔，海平⾯以上以⽶计coords.altitudeAccuracy位置的海拔精度coords.heading⽅向，从正北开始以度计coords.speed速度，以⽶/每秒计timestamp响应的⽇期/时间其中，latitude、longitude 以及 accuracy 属性是固定返回的属性，其他属性在可⽤状态下才会⼀起返回。

如果getCurrentPosition()运⾏失败，则向第⼆个参数中规定的函数返回⼀个error对象，⽤于提供错误信息。

属性描述code 1: PERMISSION_DENIED,⽤户不允许地理定位2: POSITION_UNAVAILABLE,⽆法获取当前位置3:TIMEOUT,操作超时message返回相应的错误信息下例是⼀个简单的地理定位实例，可返回⽤户位置的经度和纬度: function getLocation(){if (navigator.geolocation){navigator.geolocation.getCurrentPosition(showPosition, showError);}else{console.log("该浏览器不⽀持获取地理位置。

HTML5基础扩展——地理位置、本地存储、缓存

HTML5基础扩展——地理位置、本地存储、缓存HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的web开发，HTML5是比较火的。

因此这几款扩展功能，感觉更多是从手机，平板等角度出发的。

一，地理定位：首先看一下地理位置的定位的几种形式：IP地址，GPS（Global Positioning System ），Wifi，GSM（Global System for Mobile Communication ）/CDMA（Code Division Multiple Access）。

一般手机都是通过GPS进行定位的，相对准确。

好看一下HTML5如何实现地理位置：1. 实现基于浏览器（无需后端支持）获取用户的地理位置技术2. 精确定位用户的地理位置( 精度最高达10m之内，依赖设备)3. 持续追踪用户的地理位置（实时位置）4. 与Google Map、或者Baidu Map 交互呈现位置信息。

HTML5提供Geolocation API,用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是“允许”or “拒绝”。

它提供的方法：1、getCurrentPosition //当前位置2、watchPosition //监视位置3、clearWatch //清除监视看一下参数：getCurrentPosition(success,error,option)方法最多可以有三个参数：第一个参数是成功获取位置信息的回调函数，它是方法唯一必须的参数；第二个参数用于捕获获取位置信息出错的情况，第三个参数是配置项。

看一个例子吧：综上为简单的地理定位了解，由于只是学习，了解的比较浅显。

更多资料可以网络搜索，非常多的，很容易的帮助我们实现了手机定位的功能开发。

html5定位并在百度地图上显示的示例

html5定位并在百度地图上显⽰的⽰例在开发移动端 web 或者webapp时，使⽤百度地图 API 的过程中，经常需要通过⼿机定位获取当前位置并在地图上居中显⽰出来，这就需要⽤到html5的地理定位功能。

复制代码代码如下:navigator.geolocation.getCurrentPosition(callback);在获取坐标成功之后会执⾏回调函数 callback; callback ⽅法的参数就是获取到的坐标点；然后可以初始化地图，设置控件、中⼼点、缩放等级，然后给地图添加point的overlay：复制代码代码如下:var map = new BMap.Map("mapDiv");//mapDiv为放地图的 div 的 idmap.addControl(new BMap.NavigationControl());map.addControl(new BMap.ScaleControl());map.addControl(new BMap.OverviewMapControl());map.centerAndZoom(point, 15);//point为坐标点，15为地图缩放级别，最⼤级别是 18var pointMarker = new BMap.Marker(point);map.addOverlay(pointMarker);复制代码代码如下:BMap.Convertor.translate(gpsPoint, 0, callback);//gpsPoint：转换前坐标，第⼆个参数为转换⽅法，0表⽰gps坐标转换成百度坐标，callback回调函数，参数为新坐标点例⼦的详细代码如下：（引⽤中的ak是申请的key）复制代码代码如下:<!DOCTYPE html><html lang="zh-cn"><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">*{height: 100%; //设置⾼度，不然会显⽰不出来}</style><script src="/jquery-1.11.0.min.js"></script><script type="text/javascript" src="/api?v=2.0&ak=··············"></script><script type="text/javascript" src="/map/jsdemo/demo/convertor.js"></script><script>$(function(){navigator.geolocation.getCurrentPosition(translatePoint); //定位});function translatePoint(position){var currentLat = titude;var currentLon = position.coords.longitude;var gpsPoint = new BMap.Point(currentLon, currentLat);BMap.Convertor.translate(gpsPoint, 0, initMap); //转换坐标}function initMap(point){//初始化地图map = new BMap.Map("map");map.addControl(new BMap.NavigationControl());map.addControl(new BMap.ScaleControl());map.addControl(new BMap.OverviewMapControl());map.centerAndZoom(point, 15);map.addOverlay(new BMap.Marker(point))}</script></head><body><div id="map"></div></body></html>本⼈开发过程中觉得电脑的定位速度有点慢，经常⽆法获取坐标导致地图⽆法显⽰，建议⽤⼿机测试，定位较快。

HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码

HTML5页⾯直接调⽤百度地图API获取当前位置直接导航⽬的地的实现代码我是应⽤在微信中，⾃定义菜单，菜单直接链接到这个HTML5页⾯，获取当前位置后，页⾯中定好⽬的地，这样打开页⾯后直接进⼊导航页⾯可以省下先发送位置信息后，点确定再出导航，省⼀步，<!DOCTYPE html><html lang="zh-cmn-Hans"><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"><title>HTML5页⾯直接调⽤百度地图API,获取当前位置，直接导航⽬的地</title><script type="text/javascript" src="/api?v=2.0&ak=wDYEcxgRRheZwyC9jpN1Tt7fzr2zjosZ"></script><script src="/jquery/1.11.1/jquery.min.js"></script><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅⿊";}</style></head><body><div id="allmap"></div></body></html><script type="text/javascript">var map = new BMap.Map("allmap");var point = new BMap.Point(116.709684,39.89778);map.centerAndZoom(point, 16);map.enableScrollWheelZoom();var myIcon = new BMap.Icon("myicon.png",new BMap.Size(30,30),{anchor: new BMap.Size(10,10)});var marker=new BMap.Marker(point,{icon: myIcon});map.addOverlay(marker);var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){if(this.getStatus() == BMAP_STATUS_SUCCESS){var mk = new BMap.Marker(r.point);map.addOverlay(mk);//map.panTo(r.point);//地图中⼼点移到当前位置var latCurrent = t;var lngCurrent = r.point.lng;//alert('我的位置：'+ latCurrent + ',' + lngCurrent);location.href="/direction?origin="+latCurrent+","+lngCurrent+"&destination=39.89778,116.709684&mode=driving&region=北京&output=html"; }else {alert('failed'+this.getStatus());}},{enableHighAccuracy: true})map.addOverlay(marker);var licontent="<b>健龙森⽻⽑球馆</b><br>";licontent+="<span><strong>地址：</strong>北京市通州区滨河中路108号</span><br>";licontent+="<span><strong>电话：</strong>(010)81556565 / 6969</span><br>";var opts = {width : 200,height: 80,};var infoWindow = new Window(licontent, opts);marker.openInfoWindow(infoWindow);marker.addEventListener('click',function(){marker.openInfoWindow(infoWindow);});</script>总结以上所述是⼩编给⼤家介绍的HTML5页⾯直接调⽤百度地图API获取当前位置直接导航⽬的地的实现代码，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

HTML5实现获取地理位置信息并定位功能

HTML5实现获取地理位置信息并定位功能HTML5提供了地理位置定位功能（Geolocation API），能确定用户位置，我们可以借助HTML5的该特性开发基于地理位置信息的应用。

本文结合实例给大家共享如何用法HTML5，借助百度、谷歌地图接口来猎取用户精确的地理位置信息。

源码下载：点此下载如何用法HTML5地理位置定位功能定位功能（Geolocation）是HTML5的新特性，因此惟独在支持HTML5的现代扫瞄器上运行，特殊是手持设备如iphone，地理定位越发精确。

首先我们要检测用户设备扫瞄器是否支持地理定位，假如支持则猎取地理信息。

注重这个特性可能侵害用户的隐私，除非用户同意，否则用户位置信息是不行用的，所以我们在拜访该应用时会提醒是否允许地理定位，我们固然挑选允许即可。

复制代码代码如下:function getLocation(){if (navigator.geolocation){navigator.geolocation.getCurrentPosition(showPosition,show Error);}else{alert("扫瞄器不支持地理定位。

");}}上面的代码可以知道，假如用户设备支持地理定位，则运行getCurrentPosition() 办法。

假如getCurrentPosition()运行胜利，则向参数showPosition中规定的函数返回一个coordinates对象，getCurrentPosition() 办法的其次个参数showError用于处理错误，它规定当猎取用户位置失败时运行的函数。

我们先来看函数showError()，它规定猎取用户地理位置失败时的一些错误代码处理方式：复制代码代码如下:function showError(error){switch(error.code) {case error.PERMISSION_DENIED:alert("定位失败,用户否决哀求地理定位"); break; case error.POSITION_UNAVAILABLE:alert("定位失败,位置信息是不行用"); break;case error.TIMEOUT:alert("定位失败,哀求猎取用户位置超时"); break;case error.UNKNOWN_ERROR:alert("定位失败,定位系统失效");break;}}我们再来看函数showPosition(),调用coords的latitude和longitude即可猎取到用户的纬度和经度。

echarts geoselected示例

echarts geoselected示例Echarts Geoselected示例：地理位置选择器的应用Echarts是一款功能强大的数据可视化库，提供了丰富多样的图表类型和可定制的配色方案，使数据展示变得更加生动直观。

其中之一的Geoselected示例，是一种基于地理位置选择器的应用，可以帮助用户在地图上进行区域的选择和筛选。

本文将一步一步回答关于Echarts Geoselected示例的问题，从介绍基本概念开始，到具体实现和应用实例。

第一部分：基本概念和背景知识1.1 什么是Echarts？Echarts是百度前端开发团队开发的一款数据可视化库，它基于JavaScript语言，使用HTML5和Canvas进行绘图。

Echarts具有丰富多样的图表类型和可定制的配色方案，可以帮助用户直观地展示和分析数据。

1.2 什么是Geoselected示例？Geoselected示例是Echarts中的一个应用示例，它提供了一个地理位置选择器，可以帮助用户在地图上进行区域的选择和筛选。

用户可以通过该示例选择特定的区域，并实时查看该区域的数据。

第二部分：实现步骤2.1 数据准备要使用Geoselected示例，首先需要准备好相应的数据。

这些数据可以是地理位置相关的数据，比如某个区域的销售额、人口等信息，或者其他与地理位置有关的统计数据。

2.2 创建地图使用Echarts的地图类型，创建一个地图容器，并设置好相应的风格和坐标系。

地图容器可以是一个div元素，通过设置相应的CSS样式，来实现自定义的地图展示效果。

2.3 添加地图数据将准备好的地理位置数据添加到地图中。

通过Echarts提供的API接口，设置地图上每个区域的名称、坐标和相关数据。

这样，地图上就会显示出对应区域的数据信息。

2.4 添加选择器使用Echarts提供的Geoselected示例，可以添加地理位置选择器。

通过设置选择器的位置、样式和功能，可以让用户在地图上进行区域的选择和筛选。

基于百度地图的HTML5地理定位技术应用实践

基于百度地图的HTML5地理定位技术应用实践作者：季耀君来源：《成都工业学院学报》2018年第04期摘要：HTML5新功能和新特性，为推动跨平台Web应用服务增添了新鲜活力。

地理定位是HTML5的重要特性，HTML5定义了一系列API编程接口和规范，能够为用户提供全面的地理定位服务。

通过阐述HTML5地理位置定位技术原理，利用HTML5提供的Geolocation、getCurrentPosition、Watchposition 3个API实现了用户位置的获取、定位与持续追踪，通过HTML5和Baidu Map实现位置信息的交互，说明HTML5地理定位技术的实现过程。

关键词：Html5;跨平台;地理定位技术;Baidu Map API;Google Map API中图分类号：TP393文献标志码：A文章编号：2095-5383（2018）04-0019-04HTML5规范了在Web浏览器中使用JavaScript的地理定位Geolocation API，使得大多数Web用户都可以在桌面和移动环境中使用地理位置定位服务。

Geolocation API定义了只与主机设备相关高层次的位置信息接口，比如纬度和经度，API本身是不可知的基础位置信息源。

位置信息的常见来源包括IP、GPS、RFID、GSM / CDMA cell IDs等。

API的设计是为了允许一次性位置请求和重复位置的更新及显式查询缓存位置的能力来保证API返回设备的实际位置，位置信息用经纬度坐标表示。

1地理定位技术的应用现状近年来，地理定位技术成为网络技术热门话题，获取用户位置对于建立更好的用户体验非常关键。

之前检索用户位置信息，往往是通过用户设备的IP地址对其位置进行粗略估计，而现在能使用地理定位API的方式降低操作难度，提升定位的准确性[1]。

地理位置Geolocation 是 HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能开发出基于位置信息的应用。

HTML地理位置定位

HTML地理位置定位最近公司项⽬需要做⼀个类似微信朋友圈的互动交友功能,需要显⽰⽤户位置信息,因此在⽹上查了部分资料,记下demo供以后查看学习:(⽤到了百度api来实现定位功能)<!DOCTYPE html><html><head><meta charset="utf-8"><title>地理位置测试</title><script type="text/javascript" src="/api?v=1.3"></script><script type="text/javascript" src="/map/jsdemo/demo/convertor.js"></script><script type="text/javascript" src="jquery.1.10.1.min.js"></script><script type="text/javascript">var gpsPoint;var baiduPoint;var baiduAddress;function getLocation() {//获取GPS坐标if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showMap, handleError, { enableHighAccuracy: true, maximumAge: 1000 });} else {alert("您的浏览器不⽀持使⽤HTML 5来获取地理位置服务");}}function showMap(value) {var longitude = value.coords.longitude;var latitude = titude;gpsPoint = new BMap.Point(longitude, latitude);BMap.Convertor.translate(gpsPoint, 0, translateCallback);}translateCallback = function (point) {baiduPoint = point;var geoc = new BMap.Geocoder();geoc.getLocation(baiduPoint, getCityByBaiduCoordinate);}function getCityByBaiduCoordinate(rs) {baiduAddress = rs.addressComponents;var address = baiduAddress.city + baiduAddress.district + baiduAddress.street + baiduAddress.streetNumber;$("#showdiv").html(address);}function handleError(value) {switch (value.code) {case 1:alert("位置服务被拒绝");break;case 2:alert("暂时获取不到位置信息");break;case 3:alert("获取信息超时");break;case 4:alert("未知错误");break;}}function init() {getLocation();}window.onload = init;</script></head><body><div id="showdiv"></div></body></html>。

网页嵌入百度地图和使用百度地图api自定义地图的详细步骤

在网页中插入百度地图如果想在自己的网页上面加入百度地图的话，可以用百度地图的api.具体使用方法如下：第一步：进入百度创建地图的网站/lbsapi/creatmap/，搜索出自己要展示的位置，如下图所第二步：设置地图，大家可以对网站显示地图的宽高进行设置，其余选项不动。

第三步：添加标注。

点击第一个图标后，在右侧找到自己的位置，单击鼠标左键可定位。

标记图标处可更换图标形状第四步：获取代码。

将代码贴到你的网页里就OK了。

另附上谷歌地图的使用方式要在自己的网页中嵌入地图，常用的方法可以归纳为以下几种：1、最简单的方法 ——使用谷歌地图主页的"链接"如果你只需要在自己的页面上显示某个特定范围的地图，比如你的公司所在地，但是不需要在地图上添加任何额外登录谷歌地图主页，定位你需要显示的范围后，点击地图左上角的“链接”，会出现一个信息框，给出两个输入框，其实，这段嵌入代码就是一个iframe的声明，所以，虽然地图主页提供一个自定义地图并预览的功能，但是只能自2、最精简的方法 ——使用谷歌静态地图如果你需要显示某个特定范围的地图，而且需要在地图上加上一些标记、折线。

但是，你并不在乎你网页上的地图所谓静态地图，意思就是你在页面上嵌入的其实只是一个GIF图片，这个GIF图片是你通过URL从谷歌动态获取的，要在你的页面上使用这样的静态地图，只需要使用一个img标签，把这个标签的src属性指定为谷歌静态地图的url就看一个简单的静态地图URL：/staticmap?center=39.915175,116.389332&zoom=14&size=500在这个URL中，你可以编辑center、zoom、size这些参数来指定地图的中心点、缩放级别、地图大小等等，当然，严格来说，谷歌静态地图也是谷歌地图API的一种，所以，使用静态地图是需要你的谷歌地图API密钥的，如果你之3、最自由的方法 --使用谷歌地图API如果上面两种方式都不能满足你的需求，那么，就来试试谷歌地图API吧。

基于Geolocation API的Html5地理位置追踪定位的实现

作者：梁莉菁
作者机构：萍乡学院
出版物刊名：萍乡学院学报
页码： 97-101页
年卷期： 2014年第6期
主题词： html5 Geolocation 百度地图API Google Maps API
摘要：随着移动网络时代的到来,基于地理位置定位的位置服务类Web应用显得越来越重要,Html5作为新一代的网页设计的技术标准,它提供了Geolocation API接口,能便捷地实现地理位置的定位与跟踪,并允许用户将所得到的位置信息与Google Map及百度地图的开放平台相结合,获取指定位置相关的周边地图信息及商业信息,这一功能可以帮助开发者开发基于位置服务的各种应用程序。

Vue使用百度地图实现城市定位

Vue使⽤百度地图实现城市定位本⽂实例为⼤家分享了Vue使⽤百度地图实现城市定位的具体代码，供⼤家参考，具体内容如下Vue项⽬运⾏环境：Vue 2.0，Vue Cli 3.0步骤⼀：登录百度地图开放平台在控制台---->应⽤管理---->我的应⽤下⾯创建⼀个应⽤。

⽬的是获取 ak步骤⼆：在public⽂件夹的index.html⽂件中导⼊百度地图，拼上你的ak步骤三：在项⽬的根⽬录中创建vue.config.js⽂件如果有vue.config.js⽂件的话，直接添加以下代码即可。

vue.config.js⽂件在VueCli 3.0之后就不再默认创建了，有⽤到这个⽂件的时候，需要我们⼿动创建。

module.exports = {configureWebpack: {externals: {'BMap': 'BMap' // 百度地图配置}}}步骤四：接下来就是具体的代码实现了。

接下来会介绍两种实现⽅案。

⽅式⼀（推荐使⽤）：单独封装js⼯具⽂件实现地址获取。

1、在src⽂件夹下新建util⽂件夹，然后在util⽂件夹中新建getUserLocation.js⽂件。

注：这个util⽂件夹，可以存放所有⾃⼰封装的⼯具js⽂件，不单单是getUserLocation.js这⼀个定位相关的⽂件。

代码和截图如下：// 获取当前城市const getCurrentCityName = function() {return new Promise((resolve, reject) => {let myCity = new BMap.LocalCity();myCity.get((result) => {let geoc = new BMap.Geocoder();geoc.getLocation(result.center, (rs) => {// rs 中携带着所有的定位信息，这⾥只获取了城市(city)和所在的区(district)let addComp = rs.addressComponents;let result = addComp.city + addComp.district;resolve(result);});}, {enableHighAccuracy: true});});}export default getCurrentCityName;在组件中引⼊并调⽤上述⽂件中封装的⽅法⽅式⼀：引⼊⼯具⽂件页⾯通过locationMsg属性即可显⽰位置信息，例如：北京市丰台区⽅式⼆：直接在组件中进⾏定位。

关于百度地图jsapi的getCurrentPosition定位不准确的解决方法

关于百度地图jsapi的getCurrentPosition定位不准确的解决⽅法很久之前帮⼤叔解决了⼀个gps坐标转换为百度地图坐标的问题。

今天⼤叔⼜给我讲百度地图定位不准。

我查了⼀下api，⽤了官⽅给出的这样⼀组函数。

1//创建查询对象2var geolocation = new BMap.Geolocation();34//调⽤getCurrentPosition函数5 geolocation.getCurrentPosition(function (position) {67//如果查询成功8if (this.getStatu() == 'BMAP_STATU_SUCCESS') {910//根据point对象创建标记遮挡物，并添加到地图中11var marker = new BMap.Marker(position.point);12 map.addOverlay(marker);1314//将地图中⼼设置为获得的当前位置15 map.panTo(position.point)16 }17 })我⾃⼰试的完全不⾏，和实际地址偏差很⼤，偏差有⼏公⾥，这肯定是不⾏的。

所以我在⽹上查资料知道了百度地图的定位都是有偏移量的。

当然我最终的解决⽅案并⾮通过这个api然后去掉偏移量，我是⽤另⼀种⽅法。

也就是⽤html5⾃带的定位。

之前我给⼤叔解决的问题就是把gps坐标转换为百度地图坐标，所以我就想html5的定位获取的是不是gps坐标。

事实证明这是可以的。

也就是说，不使⽤百度⾃⾝提供的api，⽽使⽤html5的api，并把得到的结果去⽤百度的转换坐标的api去转换⼀下。

这话说着听绕⼝的。

1、调⽤navigator.geolocation.getCurrentPosition(callback); 函数2、注册回调函数，在回调函数中调⽤百度的坐标转换的api，这个api⼤叔知道，我没有细查，只知道能通过url去请求并注册⼀个回调，但是BMap提供了⼀个这样的函数，我这⾥先假设是convgps(x,y,from,to,callback);这⼏个参数是什么意思呢x:经度y:纬度from:要转换的坐标类型，百度官⽹有1为国际gps坐标，2为国际gps⽶度坐标，这个可以去官⽹看，取值范围是1-7to:要转换成的坐标类型，只能是5或者6，5为百度地图坐标，6为百度地图⽶度坐标(别问我什么是⽶度坐标，我不知道...)callback:回调当然这⾥只是假设是这样的。

HTML5 地理定位总结

HTML5 地理定位目录1、定位用户的位置 (1)2、HTML5 - 使用地理定位 (1)3、处理错误和拒绝 (2)4、给定位置的信息 (3)5、getCurrentPosition() 方法 - 返回数据 (3)6、Geolocation 对象 - 其他有趣的方法 (4)1、定位用户的位置HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

2、HTML5 -使用地理定位请使用 getCurrentPosition() 方法来获得用户的位置。

实例解析:2.1检测是否支持地理定位2.2如果支持，则运行 getCurrentPosition() 方法。

如果不支持，则向用户显示一段消息。

2.3如果getCurrentPosition() 运行成功，则向参数showPosition中规定的函数返回一个 coordinates 对象showPosition() 函数获得并显示经度和纬度3、处理错误和拒绝getCurrentPosition() 方法的第二个参数用于处理错误。

它规定当获取用户位置失败时运行的函数：4、给定位置的信息地理定位对于给定位置的信息同样很有用处。

可用于:4.1更新本地信息4.2显示用户周围的兴趣点4.3交互式车载导航系统 (GPS)5、getCurrentPosition() 方法-返回数据T若成功，则 getCurrentPosition() 方法返回对象。

始终会返回 latitude、longitude 以及 accuracy 属性。

如果可用，则会返回其他下面的属性。

6、Geolocation 对象-其他有趣的方法watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。

clearWatch() - 停止 watchPosition() 方法。

HTml5网页使用百度地图为什么显示不全

HTml5网页使用百度地图为什么显示不全HTml5网页使用百度地图为什么显示不全百度地图手机网页版正式改版，Android及iOS系统的手机使用者可以使用基于webkit核心的浏览器访问。

作为一款高阶机上轻量化的基于位置的生活资讯搜寻产品，百度地图手机网页版的此次改版，加强了本地化生活搜寻服务，不再仅是一款帮助使用者出行的工具，预示百度手机网页版地图向生活搜寻服务转型。

值得一提的是，此次改版能够为使用者节省大幅流量。

此本版适用于支援HTML5标准的系统或浏览器，推荐在iPhone/iPadiOS4.0、Android2.3及更高版本上浏览。

与此前版本相比，新版本地图在功能、效能、使用体验等多方面都进行了革新。

开启地图首页，原本全流量的地图页面变成了轻量的生活类local search，方便使用者一键直达搜寻结果。

新版本还新增加了位置条功能，从而弥补了浏览器定位失败率高的问题。

面对使用者对位置资讯的深度化需求，新版地图还与多家生活类垂直网站合作，汇聚了各个网站的深度资讯，从而极大提高了使用者的决策效率。

以搜寻“酒店”为例，和去哪儿以及到到网合作后，使用者直接可以在搜寻结果页里看到评级、参考价、图片、评论等深度资讯，从而更快更好的找到所需。

据悉，百度地图后续还将陆续推出餐饮、休闲娱乐、医疗、房产等多个类别的深度资讯，最大程度的满足使用者的本地化生活搜寻需求。

在基本功能方面，新版地图保留了旧版的“路况”和“测距”等实用功能，并且优化了公交、驾车等检索功能，图释也更加的清晰明了。

值得一提的是，为了满足不同手机使用者的需求，新版地图还推出了高低分屏两个版本，高屏版本采用了最新的高清底图，视觉效果更好。

面对不断更新升级的百度地图，业内评论认为，百度拥有网际网路行业最领先的技术实力，并且充满行业的敏锐性。

面对着如火如荼的HTML5技术，无论是此前的地图API还是此次的手机网页版，百度地图都走在了行业的前列。

这种用技术和市场驱动产品的研发模式，无疑能够更加良好的满足使用者的个性化、深度化需求。