一、地理位置
百度地图的JavaScript API接口:http://lbsyun.baidu.com/index.php?title=jspopular
demo接口 网址 http://lbsyun.baidu.com/index.php?title=jspopular
获取地理定位的
// 地理定位获取使用方法
// 方法:可以获取位置
// window.navigator.geolocation.getCurrentPosition(成功的函数,失败的函数);
地理定位的两个属性:
position.coords.latitude//纬度
position.coords.longitude//经度
下面例子是地理位置的使用方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地理定位</title>
</head>
<body>
<script>
// 地理定位
// 方法:可以获取位置
// window.navigator.geolocation.getCurrentPosition(成功的函数,失败的函数);
/*
参数1:函数:定位成功后就执行
参数2: 函数:定位失败后执行
有时间获取不到地理位置
*/
window.navigator.geolocation.getCurrentPosition(function (position) {
// 如果获取定位成功,则打印一个对象
console.log(position);
console.log(position.coords.latitude);//打印出当前的维度
console.log(position.coords.longitude);//经度
// 如果获取到经纬度,就可以获取位置
},function(msg){
// 无法获取,此时执行的是这个
console.log(msg);//如果定位失败,请打印失败的相关信息
});
</script>
</body>
</html>
通过百度地图的JavaScript---API去获取接口 查看百度地图的demo,如下获取百度地图以及当前个人的位置:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<!-- 在你的密钥处,填写在百度地图中申请的私钥 -->
<title>设置点的新图标</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 地理定位
window.navigator.geolocation.getCurrentPosition(function (position) {
var lat = position.coords.latitude();//纬度
var lon = position.coords.longitude();//经度
// 百度地图API功能
var map = new BMap.Map("allmap");
// 经纬度---地图中的经纬度
var point = new BMap.Point(lon, lat);
map.centerAndZoom(point, 15);
//创建小狐狸
var pt = new BMap.Point(lon, lat);//小狐狸的经纬度
var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker2); // 将标注添加到地图中
},function (msg) {
console.log(msg);
});
</script>
更多效果,,百度地图的JavaScript API接口: 网址 http://lbsyun.baidu.com/index.php?title=jspopular (需要把经纬度换下即可实现效果)
// 获取实时地理信息
window.navigator.geolocation.watchPosition(function (position) {
// 成功时执行
console.log(position.coords.accuracy);//精确位置
var aa = position.coords.accuracy;//精确位置
},function(msg) {
// 失败时执行
console.log(msg);
});
本地存储 (localStorage,sessionStorage)、cookie(浏览器)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>本地存储</title>
</head>
<body>
<script>
// sessionStorage
/*设置值:属性名字和值*/
window.sessionStorage.setItem('name','lxs');
window.sessionStorage.setItem('age','222');
// 数据已经存储
// 获取数据:出入属性名字,得到该属性的值
var name = window.sessionStorage.getItem('name');
var age = window.sessionStorage.getItem('age');
console.log(name+','+age);
window.sessionStorage.removeItem('age');
// 数据共享:同一个窗口数据共享
// 清空数据
window.sessionStorage.clear();
</script>
</body>
</html>
//给键,通过 removeItem移除这个键对应的值
window.sessionStorage.removeItem('age');
localstorage的用法与sessionStorage一样