“webcomponent

2015年1月16日 (五) 18:08的最后版本

定位组件

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

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

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

修改后刷新界面的属性：city，show-ui，enable-modified

运行效果如下：

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

<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>

文档全面上新

2015年1月16日 (五) 18:08的最后版本

定位组件