(→定位组件) |
(→定位组件) |
||
第5行: | 第5行: | ||
'''嵌入定位模块的代码片如下:''' | '''嵌入定位模块的代码片如下:''' | ||
− | < | + | <source> |
<lbs-geo city="北京" enable-modified="false"></lbs-geo> | <lbs-geo city="北京" enable-modified="false"></lbs-geo> | ||
− | </ | + | </source> |
'''运行效果如下:''' | '''运行效果如下:''' | ||
第25行: | 第25行: | ||
lbsGeo.addEventListener("geofail",function(evt){ | lbsGeo.addEventListener("geofail",function(evt){ | ||
alert("fail"); | alert("fail"); | ||
− | + | }); | |
//监听定位成功事件 geosuccess | //监听定位成功事件 geosuccess | ||
lbsGeo.addEventListener("geosuccess",function(evt){ | lbsGeo.addEventListener("geosuccess",function(evt){ | ||
第41行: | 第41行: | ||
利用定位组件获取定位经纬度主要有以下两步: | 利用定位组件获取定位经纬度主要有以下两步: | ||
− | 1. 首先获取到定位组件的DOM对象,我们这里通过ID来获取 | + | 1.首先获取到定位组件的DOM对象,我们这里通过ID来获取 |
− | 2. 给定位组件DOM对象注册事件 | + | 2.给定位组件DOM对象注册事件 |
第97行: | 第97行: | ||
//监听定位失败事件 geofail | //监听定位失败事件 geofail | ||
lbsGeo.addEventListener("geofail",function(evt){ | lbsGeo.addEventListener("geofail",function(evt){ | ||
− | + | alert("fail"); | |
− | + | }); | |
//监听定位成功事件 geosuccess | //监听定位成功事件 geosuccess | ||
lbsGeo.addEventListener("geosuccess",function(evt){ | lbsGeo.addEventListener("geosuccess",function(evt){ |
2014年12月16日 (二) 16:51的版本
定位组件
利用定位组件开发者可以在自己的页面嵌入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>