❤在没有学习之前一直认为IT行业工资高,很多人都说前端容易学,没基础的人都可以考虑去学。 今天我深刻的认识到了并不是这样的,--前端只是门槛低,如果深入的也是非常难学的。 ----刚学习的那股子劲,试着找回来,加油加油,不说丧气话,博客还是要认真的完成! 每天写才会有进步下去。
❤ 学前端,应该知道你的工作中会有高德地图这种包含定位的项目。
**01 - 地理定位**
♡ 地理定位:获取到你当前设备所在的经纬度
❤ 问题1:为什么通过经纬度就能获取到你现在的地理定位呢 ?
解答:因为只有经纬度才能确定你在地球上的某一个具体位置。
❤问题2:怎样获取到位置?
解答:
1、GPS定位:你的设备必须要有GPS模块,连接卫星可以定位到,这种定位是最精确,越精确越耗电。
2、wifi定位:其实本质上查的是你当前使用软件的服务器,服务器上去查数据库看你现在的wifi注册在哪个位置。
♡例子:A这个人在星巴克连接wifi了,刚好又打开了百度地图,百度地图会拿到这个星巴克wifi的路由器mac地址(设备的身份证)和当前这个手机定位到的地址,存到服务器上,下一次B来到星巴克连wifi,哪怕它没有GPS模块,百度地图也能知道它在哪。
♡ wifi定位还可以辅助让你的定位更精确,你关掉wifi打开地图软件会提示你开启wifi能更精确的获得位置, 哪怕你不连wifi,你只要开启wifi,也能让位置更精确。
❤问题3:为什么wifi开启没有连接wifi都能获取你的地理位置呢?
3、网络基站定位:至少你的设备要上网,上网后会有个IP地址,通过IP地址去查你这个设备在哪,这种精度是最低的(查的不是电信,而是查的某些软件的服务器)
获取的是基站的地址,所以误差会有,比较大。
❤问题4:为什么电影里都是知道IP地址也就是网络基站定位,为什么能够准确找到犯人呢?
❤在电影里面只要知道IP地址就能抓到你,是因为警察直接找运营商,运营商知道我给某个设备分的IP地址是什么,每一天给你分配IP的时候都有记录, 分配到哪个人的账户上。
代码中获取定位:需要注意一点,谷歌不支持,需要使用IE并且允许地理权限才能获取。
//H5中新增的高级API,专门用来获取地理位置
//这个方法就能获取到当前的地理位置
//当获取到地理位置后,这个传入的回调函数就会被调用
//位置信息会在这个回调函数的形参里面
navigator.geolocation.getCurrentPosition(function (loc) {
// console.log(loc);
console.log("纬度是:" + loc.coords.latitude + "经度是:"+ loc.coords.longitude);
});
**普及知识: **
latitude [地理] 纬度
longitude [地理] 经度
**02-地图的基本用法**
❤建议去http://lbsyun.baidu.com/ 百度地图开放平台回去免费的插件,里面很详细的,在案例中是可以直接使用的。
<style type="text/css">
body,
html,
#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>
<!-- 导入地图的API -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Xzz7xTrI6dI6mywicfmwq7q9oQPuMjbR"></script>
<title>地图展示</title>
</head>
<body>
<!-- 把这个div变成显示成地图的盒子 -->
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
// 说人话:下面这句话的意思是把allmap这个div变成地图
var map = new BMap.Map("allmap"); // 创建Map实例
//获取当前位置
navigator.geolocation.getCurrentPosition(function (loc) {
//设置地图的中心点坐标
//最高是19
var point = new BMap.Point(loc.coords.longitude, loc.coords.latitude);
map.centerAndZoom(point, 18);
// 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
// 添加右上角的按钮
map.addControl(new BMap.MapTypeControl({
mapTypes: [
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]
}));
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
map.setCurrentCity("北京");
// 设置地图显示的城市 此项是必须设置的
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
});
</script>
**03-本地存储**
♡ 本地存储:localStorage 把数据存在浏览器,但是可以不用经过服务器,没有有效期(只要自己不删就一直在)。
♡ cookie:也可以存在浏览器,首先要经过服务器,而且有有效期,而且访问时会自动把cookie发送过去
注意:本地存储:如果用 localStorage 存的是一个复杂类型,那么在存的时候会调用这个复杂类型的 toString 方法,如果要存复杂类型,记得先把复杂类型转成 JSON 字符串取出来的时候再把 JSON 字符串转成 JS 数据。
<body>
<input type="button" value="存储" id="btn1">
<input type="button" value="读取" id="btn2">
<input type="button" value="删除" id="btn3">
<input type="button" value="存数组" id="btn4">
<input type="button" value="存对象" id="btn5">
<input type="button" value="取数组" id="btn6">
<input type="button" value="取对象" id="btn7">
<input type="button" value="清空" id="btn8">
</body>
<script>
//存储
document.getElementById('btn1').onclick = function () {
//参数1:key,参数2:value
localStorage.setItem("name", "jack");
}
//读取
document.getElementById('btn2').onclick = function () {
//参数:key
var res = localStorage.getItem("name");
console.log(res);
}
//删除
document.getElementById('btn3').onclick = function () {
//根据key来删除
localStorage.removeItem('age');
}
//存数组
document.getElementById('btn4').onclick = function () {
var nums = [10, 20, 30, 40, 50];
//先把数组转成JSON字符串
var json = JSON.stringify(nums);
localStorage.setItem('arr', json);
}
//存对象
document.getElementById('btn5').onclick = function () {
var obj = { name: "jack", age: 16 };
var json = JSON.stringify(obj);
localStorage.setItem('obj',json);
}
//取数组
document.getElementById('btn6').onclick = function () {
var res = localStorage.getItem('arr');
var arr = JSON.parse(res);
console.log(arr);
}
//取对象
document.getElementById('btn7').onclick = function () {
var res = localStorage.getItem('obj');
// console.log(res);
var obj1 = JSON.parse(res);
console.log(obj1);
}
document.getElementById('btn8').onclick = function(){
//清除所有
localStorage.clear();
}
</script>
案例1: 仿照百度的搜索框,搜索的记录会显示在下方。
<body>
<input type="text" placeholder="请输入内容" id="words">
<input type="button" value="搜索" id="search">
<ul id="history"></ul>
</body>
</html>
<script>
//找到文本框
var words = document.getElementById('words');
//找到ul
var ul = document.getElementById('history');
//声明一个数组,应该取出上一次的内容
var res = localStorage.getItem('history');
var arr;
if (res) {
//证明原来有值,就取出来
arr = JSON.parse(res);
for( var i = 0; i < arr.length; i++ ){
//每次循环都创一个li
var li = document.createElement('li');
li.innerHTML = arr[i];
ul.appendChild(li);
}
}else{
//如果是第一次访问就实例化成空数组
arr = [];
}
//搜索的点击事件
document.getElementById('search').onclick = function () {
//拿到输入的内容,存到本地存储里面
//应该用数组来存,不然的话每次都会覆盖
//先把输入的内容存到数组里
arr.push(words.value);
//先转成JSON
var jsonStr = JSON.stringify(arr);
localStorage.setItem('history', jsonStr);
// location = "http://www.itcast.cn";
}
</script>
**04-sessionStorage 存储**
❤ sessionStorage 和 session 没有半毛钱关系(就像雷锋 和 雷峰塔一样,一点关系都没有)。
1、session是存在服务器的,浏览器会存sessionid,但是sessionStorage不用经过服务器,它就是把数据存在浏览器,只是它无法永久保存,网页一关就没了
2、sessionStorage可以理解为是localStoraged的短命版本,因为存储、取值、删除都是一样一样的。
<body>
<input type="button" value="保存" id="btn1">
<input type="button" value="读取" id="btn2">
<input type="button" value="删除" id="btn3">
<input type="button" value="清空" id="btn4">
</body>
</html>
<script>
document.getElementById('btn1').onclick = function(){
//保存
sessionStorage.setItem('name','jack');
}
document.getElementById('btn2').onclick = function(){
//读取
var res = sessionStorage.getItem('name');
console.log(res);
}
document.getElementById('btn3').onclick = function(){
//删除
sessionStorage.removeItem('name');
}
document.getElementById('btn4').onclick = function(){
//清空
sessionStorage.clear();
}
</script>
❤ 真是不好用语言来表达啊,只能上代码了,没耐心的可能都看不下去了,留下给自己以后看也是很不错的,哈哈!