利用html5属性获取客户端经纬度坐标值，并在百度地图中展现位置

时间：2016-04-06 23:29:34

分类：优秀文章

很多朋友会接触到地图相关的开发，例如我们使用帝国cms开发商店模型。在国内由于google服务很难访问到，所以用到最多的还是百度地图api，首先我们使用前要去百度api申请appkey，申请链接：http://lbsyun.baidu.com/

接着我们使用js在地图中加入坐标点标注，这里的详细参数或者进阶用法，大家可以查阅百度地图api相关说明和示例。

折叠JavaScript 代码
  1. //在百度 map中显示地址  cmsdx.com  2016-04-06  
  2. var map = new BMap.Map("map_canvas");          // 创建地图实例    
  3. var point = new BMap.Point(longitudeP , latitudeP);  // 创建点坐标    
  4. map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别    
  5. var marker = new BMap.Marker(point);      
  6. map.addOverlay(marker);   

参数解释：其中的longitudeP表示经度，latitudeP表示纬度，很多地方也会用lon和lat来表示，这里不细说。map_canvas是html代码中设置的地图容器ID，可以看下面的源码。

页面完整源码：

折叠XML/HTML 代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />    
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
  6. <title>利用html5获取经纬度并在百度地图中展现 cmsdx.com</title>  
  7. <!--加载百度 map api-->  
  8. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=8827ee39511568ac0705d037d67b2624"></script>    
  9. </head>  
  10.   
  11. <body>  
  12. <span id="support">将下面的经纬度输入谷歌地图：</span>  
  13. <div id="show">  
  14. 纬度：<span id="latitude"></span><br />  
  15. 经度：<span id="longitude"></span><br />  
  16. 准确度：<span id="accuracy"></span>  
  17. </div>  
  18. <script type="text/javascript">  
  19. var doc = document,  
  20.     latitude = doc.getElementById('latitude'),  
  21.     longitude = doc.getElementById('longitude'),  
  22.     accuracy = doc.getElementById('accuracy'),  
  23.     support = doc.getElementById('support'),  
  24.     showDiv = doc.getElementById('show');  
  25. function lodeSupport(){  
  26.     if(navigator.geolocation){  
  27.         support.innerHTML = '将下面的经纬度输入谷歌地图(纬度 经度)查看自己位置：';  
  28.         showDiv.style.display = 'block';  
  29.         navigator.geolocation.getCurrentPosition(updataPosition);  
  30.     }else{  
  31.         support.innerHTML = '对不起，浏览器不支持！';  
  32.         showDiv.style.display = 'none';  
  33.     }  
  34. }  
  35. function updataPosition(position){  
  36.     var latitudeP = position.coords.latitude,  
  37.         longitudeP = position.coords.longitude,  
  38.         accuracyP = position.coords.accuracy;  
  39.     latitude.innerHTML = latitudeP;  
  40.     longitude.innerHTML = longitudeP;  
  41.     accuracy.innerHTML = accuracyP;  
  42.     //在百度 map中显示地址  
  43.     var map = new BMap.Map("map_canvas");          // 创建地图实例    
  44.     var point = new BMap.Point(longitudeP , latitudeP);  // 创建点坐标    
  45.     map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别    
  46.     var marker = new BMap.Marker(point);      
  47.     map.addOverlay(marker);   
  48.   
  49.       
  50. }  
  51. window.addEventListener('load', lodeSupport , true);  
  52. </script>  
  53. <div id="map_canvas" style="width:500px; height:500px;"></div>  
  54. </body>  
  55. </html>  

使用效果：

 

折叠XML/HTML 代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />    
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
  6. <title>利用html5获取经纬度并在百度地图中展现 cmsdx.com</title>  
  7. <!--加载百度 map api-->  
  8. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=8827ee39511568ac0705d037d67b2624"></script>    
  9. </head>  
  10.   
  11. <body>  
  12. <span id="support">将下面的经纬度输入谷歌地图：</span>  
  13. <div id="show">  
  14. 纬度：<span id="latitude"></span><br />  
  15. 经度：<span id="longitude"></span><br />  
  16. 准确度：<span id="accuracy"></span>  
  17. </div>  
  18. <script type="text/javascript">  
  19. var doc = document,  
  20.     latitude = doc.getElementById('latitude'),  
  21.     longitude = doc.getElementById('longitude'),  
  22.     accuracy = doc.getElementById('accuracy'),  
  23.     support = doc.getElementById('support'),  
  24.     showDiv = doc.getElementById('show');  
  25. function lodeSupport(){  
  26.     if(navigator.geolocation){  
  27.         support.innerHTML = '将下面的经纬度输入谷歌地图(纬度 经度)查看自己位置：';  
  28.         showDiv.style.display = 'block';  
  29.         navigator.geolocation.getCurrentPosition(updataPosition);  
  30.     }else{  
  31.         support.innerHTML = '对不起，浏览器不支持！';  
  32.         showDiv.style.display = 'none';  
  33.     }  
  34. }  
  35. function updataPosition(position){  
  36.     var latitudeP = position.coords.latitude,  
  37.         longitudeP = position.coords.longitude,  
  38.         accuracyP = position.coords.accuracy;  
  39.     latitude.innerHTML = latitudeP;  
  40.     longitude.innerHTML = longitudeP;  
  41.     accuracy.innerHTML = accuracyP;  
  42.     //在百度 map中显示地址  
  43.     var map = new BMap.Map("map_canvas");          // 创建地图实例    
  44.     var point = new BMap.Point(longitudeP , latitudeP);  // 创建点坐标    
  45.     map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别    
  46.     var marker = new BMap.Marker(point);      
  47.     map.addOverlay(marker);   
  48.   
  49.       
  50. }  
  51. window.addEventListener('load', lodeSupport , true);  
  52. </script>  
  53. <div id="map_canvas" style="width:500px; height:500px;"></div>  
  54. </body>  
  55. </html>  

 

实际效果：

QQ图片20160406233938.jpg

分享

相关文章

相关推荐

为帝国CMS用户提供动力

Copyright © 2016 CmsDX.com All Rights Reserved.