❤在没有学习之前一直认为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>
❤ 真是不好用语言来表达啊，只能上代码了，没耐心的可能都看不下去了，留下给自己以后看也是很不错的，哈哈！