没有match的答案？试试对话大模型
（→定位组件） |
|||
| 第19行： | 第19行： | ||
<lbs-geo id="geo" city="北京" enable-modified="false"></lbs-geo> | <lbs-geo id="geo" city="北京" enable-modified="false"></lbs-geo> | ||
<script> | <script> | ||
| − | + | // 先获取元素 | |
| − | + | var lbsGeo = document.getElementById('geo'); | |
| − | + | //监听定位失败事件 geofail | |
lbsGeo.addEventListener("geofail",function(evt){ | lbsGeo.addEventListener("geofail",function(evt){ | ||
| − | + | alert("fail"); | |
}); | }); | ||
//监听定位成功事件 geosuccess | //监听定位成功事件 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; | var y = coords.lat; | ||
| − | + | alert("地址："+address); | |
| − | + | alert("地理坐标："+x+','+y); | |
}); | }); | ||
</script> | </script> | ||
| 第88行： | 第88行： | ||
<!—定位组件--> | <!—定位组件--> | ||
<lbs-geo id="geo" city="北京" enable-modified="false"></lbs-geo> | <lbs-geo id="geo" city="北京" enable-modified="false"></lbs-geo> | ||
| − | + | <script> | |
| − | + | // 先获取元素 | |
| − | + | var lbsGeo = document.getElementById('geo'); | |
| − | + | //监听定位失败事件 geofail | |
lbsGeo.addEventListener("geofail",function(evt){ | lbsGeo.addEventListener("geofail",function(evt){ | ||
alert("fail"); | alert("fail"); | ||
}); | }); | ||
//监听定位成功事件 geosuccess | //监听定位成功事件 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; | var y = coords.lat; | ||
| − | + | alert("地址："+address); | |
| − | + | alert("地理坐标："+x+','+y); | |
}); | }); | ||
</script> | </script> | ||
2014年12月16日 (二) 15:47的版本
定位组件
利用定位组件开发者可以在自己的页面嵌入webapp百度地图样式的定位模块，且通过定位事件获取到定位点的经纬度坐标。
嵌入定位模块的代码片如下：
<lbs-geo city="北京" enable-modified="false"></lbs-geo>
运行效果如下：
利用定位组件获取定位点经纬度坐标代码段如下：
- <lbs-geo id="geo" city="北京" enable-modified="false"></lbs-geo>
- <script>
- // 先获取元素
- var lbsGeo = document.getElementById('geo');
- //监听定位失败事件 geofail
- 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>
利用定位组件获取定位经纬度主要有以下两步：
1. 首先获取到定位组件的DOM对象，我们这里通过ID来获取
2. 给定位组件DOM对象注册事件
定位组件UI的两种模式：
定位组件分为有UI和无UI两种模式，默认为有UI模式。
可以通过在<lbs-geo>标签设置”show-ui”属性选择是否有UI。
默认设置为true，有UI模式；设为false，则为无UI模式。
html代码片如下：
- <lbs-geo city="北京" enable-modified="false" show-ui="false"></lbs-geo>
Script操作同上
定位组件修改定位结果：
如果希望修改定位结果，可以设置enable-modified="true" 运行效果如下：
点击“修改”可以重设当前定位结果。效果如下：
完整代码请参考:
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
- <title>定位组件</title>
- <script src="http://api.map.baidu.com/components?ak=yourak&v=1.0">
- </script>
- </head>
- <body>
- <!—定位组件-->
- <lbs-geo id="geo" city="北京" enable-modified="false"></lbs-geo>
- <script>
- // 先获取元素
- var lbsGeo = document.getElementById('geo');
- //监听定位失败事件 geofail
- 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>
- </body>
- </html>