为什么选择百度地图
全部服务产品
开发者频道
定价
登录

文档全面上新

更科技的视觉体验，更高效的页面结构，快前往体验吧！

体验新版
（→‎定位组件）
第2行： 第2行：
 
==定位组件==
 
==定位组件==
 
利用定位组件开发者可以在自己的页面嵌入webapp百度地图样式的定位模块，且通过定位事件获取到定位点的经纬度坐标。
 
利用定位组件开发者可以在自己的页面嵌入webapp百度地图样式的定位模块，且通过定位事件获取到定位点的经纬度坐标。
 +
  
 
'''嵌入定位模块的代码片如下：'''
 
'''嵌入定位模块的代码片如下：'''
第7行： 第8行：
 
<lbs-geo city="北京" enable-modified="false"></lbs-geo>
 
<lbs-geo city="北京" enable-modified="false"></lbs-geo>
 
</pre>
 
</pre>
 +
 
'''运行效果如下：'''
 
'''运行效果如下：'''
  
−
http://api.map.baidu.com/lbsapi/cloud/cms/jsapi/geo.png
+
http://wiki.lbsyun.baidu.com/cms/webcomponent/img/loc1.png
 +
 
  
 
'''利用定位组件获取定位点经纬度坐标代码段如下：'''
 
'''利用定位组件获取定位点经纬度坐标代码段如下：'''
第17行： 第20行：
 
<script>
 
<script>
 
  // 先获取元素
 
  // 先获取元素
−
  var mapElement = document.getElementById('geo');
+
  var lbsGeo = document.getElementById('geo');
−
  mapElement.addEventListener("geostart",function(evt){ //注册事件
+
  //监听定位失败事件 geofail
−
console.log(evt.detail);
+
lbsGeo.addEventListener("geofail",function(evt){  
−
})
+
alert("fail");
 +
});
 +
//监听定位成功事件 geosuccess
 +
lbsGeo.addEventListener("geosuccess",function(evt){
 +
console.log(evt.detail);
 +
    var address = evt.detail.address;
 +
var coords = evt.detail.coords;
 +
var x = coords.lng;
 +
var y = coords.lat;
 +
alert("地址："+address);
 +
alert("地理坐标："+x+','+y);
 +
});
 
</script>
 
</script>
 
</syntaxhighlight>
 
</syntaxhighlight>
第31行： 第45行：
  
  
−
'''完整代码请参考:'''
+
'''定位组件UI的两种模式：'''
 +
 
 +
定位组件分为有UI和无UI两种模式，默认为有UI模式。
 +
 
 +
可以通过在<lbs-geo>标签设置”show-ui”属性选择是否有UI。
 +
 
 +
默认设置为true，有UI模式；设为false，则为无UI模式。
 +
 
 +
 
 +
'''html代码片如下：'''
  
 
<syntaxhighlight lang="html4strict" line start="100" enclose="div">
 
<syntaxhighlight lang="html4strict" line start="100" enclose="div">
 +
<lbs-geo city="北京" enable-modified="false" show-ui="false"></lbs-geo>
 +
</syntaxhighlight>
 +
Script操作同上
  
 +
 +
'''定位组件修改定位结果：'''
 +
 +
如果希望修改定位结果，可以设置enable-modified="true"
 +
运行效果如下：
 +
 +
http://wiki.lbsyun.baidu.com/cms/webcomponent/img/loc2.png
 +
 +
点击“修改”可以重设当前定位结果。效果如下：
 +
 +
http://wiki.lbsyun.baidu.com/cms/webcomponent/img/loc3.png
 +
 +
 +
'''完整代码请参考:'''
 +
 +
<syntaxhighlight lang="html4strict" line start="100" enclose="div">
 
<html>
 
<html>
 
<head>
 
<head>
第46行： 第88行：
 
     <!—定位组件-->
 
     <!—定位组件-->
 
     <lbs-geo id="geo" city="北京" enable-modified="false"></lbs-geo>
 
     <lbs-geo id="geo" city="北京" enable-modified="false"></lbs-geo>
−
    <script>
+
<script>
−
    // 先获取元素
+
// 先获取元素
−
    var mapElement = document.getElementById('geo');
+
var lbsGeo = document.getElementById('geo');
−
mapElement.addEventListener("geostart",function(evt){ //注册事件
+
//监听定位失败事件 geofail
−
console.log(evt.detail);
+
lbsGeo.addEventListener("geofail",function(evt){  
−
})  
+
alert("fail");
 +
});
 +
//监听定位成功事件 geosuccess
 +
lbsGeo.addEventListener("geosuccess",function(evt){
 +
console.log(evt.detail);
 +
    var address = evt.detail.address;
 +
var coords = evt.detail.coords;
 +
var x = coords.lng;
 +
var y = coords.lat;
 +
alert("地址："+address);
 +
alert("地理坐标："+x+','+y);
 +
});
 
</script>
 
</script>
 
</body>
 
</body>
 
</html>
 
</html>
−
 
−
 
 
</syntaxhighlight>
 
</syntaxhighlight>

2014年12月16日 (二) 15:10的版本

定位组件

利用定位组件开发者可以在自己的页面嵌入webapp百度地图样式的定位模块，且通过定位事件获取到定位点的经纬度坐标。


嵌入定位模块的代码片如下： 

<lbs-geo city="北京" enable-modified="false"></lbs-geo>

运行效果如下：

loc1.png


利用定位组件获取定位点经纬度坐标代码段如下：

  1. <lbs-geo id="geo" city="北京" enable-modified="false"></lbs-geo>
  2. <script>
  3.  // 先获取元素
  4.  var lbsGeo = document.getElementById('geo');
  5.  //监听定位失败事件 geofail    
  6. lbsGeo.addEventListener("geofail",function(evt){
  7.                 alert("fail");
  8.         });
  9. //监听定位成功事件 geosuccess
  10.         lbsGeo.addEventListener("geosuccess",function(evt){
  11.                 console.log(evt.detail);
  12.      var address = evt.detail.address;
  13.                 var coords = evt.detail.coords;
  14.                 var x = coords.lng;
  15.                 var y = coords.lat;
  16.                 alert("地址："+address);
  17.                 alert("地理坐标："+x+','+y);
  18.         });
  19. </script>

利用定位组件获取定位经纬度主要有以下两步：

1. 首先获取到定位组件的DOM对象，我们这里通过ID来获取

2. 给定位组件DOM对象注册事件


定位组件UI的两种模式：

定位组件分为有UI和无UI两种模式，默认为有UI模式。

可以通过在<lbs-geo>标签设置”show-ui”属性选择是否有UI。

默认设置为true，有UI模式；设为false，则为无UI模式。


html代码片如下：

  1. <lbs-geo city="北京" enable-modified="false" show-ui="false"></lbs-geo>

Script操作同上


定位组件修改定位结果：

如果希望修改定位结果，可以设置enable-modified="true" 运行效果如下：

loc2.png

点击“修改”可以重设当前定位结果。效果如下：

loc3.png


完整代码请参考:

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  5. <title>定位组件</title>
  6. <script src="http://api.map.baidu.com/components?ak=yourak&v=1.0">
  7. </script>
  8. </head>
  9. <body>
  10.     <!—定位组件-->
  11.     <lbs-geo id="geo" city="北京" enable-modified="false"></lbs-geo>
  12.  <script>
  13.  // 先获取元素
  14.  var lbsGeo = document.getElementById('geo');
  15.  //监听定位失败事件 geofail    
  16. lbsGeo.addEventListener("geofail",function(evt){
  17.                 alert("fail");
  18.         });
  19. //监听定位成功事件 geosuccess
  20.         lbsGeo.addEventListener("geosuccess",function(evt){
  21.                 console.log(evt.detail);
  22.      var address = evt.detail.address;
  23.                 var coords = evt.detail.coords;
  24.                 var x = coords.lng;
  25.                 var y = coords.lat;
  26.                 alert("地址："+address);
  27.                 alert("地理坐标："+x+','+y);
  28.         });
  29. </script>
  30. </body>
  31. </html>
取自“http://lbsyun.baidu.com/index.php?title=webcomponent/guide/geo&oldid=2814”

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误，或对此文档有更好的建议，请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消