離線快取manifest、獲取經緯度、獲取地圖
阿新 • • 發佈：2018-12-11
一.離線快取manifest
作用：伺服器開啟執行一次後，斷開伺服器也能顯示資訊
1.建立demo.manifest檔案編輯的內容如下，放在同級目錄或則其他可訪問的位置即可
程式碼：
CACHE MANIFEST
#v1.0.0
CACHE:
img/1.png
demo14.html
2.建立HTML在html標籤引入檔案manifest="demo.manifest"
程式碼：
<!DOCTYPE html> <html lang="en" manifest="demo.manifest"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="img/1.png"> </body> </html>
二.獲取經緯度
作用：電腦需要開啟定位，谷歌可能不行
效果圖：
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 經緯度 --> <button id="btn3">查詢</button> </body> <script> /*經緯度*/ var d = document.getElementById("btn3"); d.onclick = function () { //獲取經緯度 window.navigator.geolocation.getCurrentPosition( //成功方法 function (position) { //輸出經緯度的值 alert(position.coords.longitude); alert(position.coords.latitude); }//失敗方法 , function (err) { alert(err) }, { //引數設定，超時時間,允許精度 timeout: 20000, enableHignAccuracy: true, maxinumAge: 0 }); }; </script> </html>
三.獲取地圖
1.使用百度
作用：可以在下面網頁輸入地址後獲取相應程式碼，複製帶自己的HTML中即可使用
參考地址：
http://api.map.baidu.com/lbsapi/creatmap/
2.自寫
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- 地圖 --> <input type="button" value="請求" id="input1"> <textarea id="text" style="width: 400px;height: 400px;border: 1px solid"></textarea> </body> <script src="http://api.map.baidu.com/api?v=2.0&ak=sYEOaTU5ho6GLqcdOt2XLSQlYh82IjjF"></script> <script> /*地圖*/ var dd = document.getElementById("input1"); var text = document.getElementById("text"); dd.onclick = function () { window.navigator.geolocation.getCurrentPosition( function (position) { var map = new BMap.Map("text"); map.centerAndZoom(new BMap.Point(113.3208, 23.1287), 20);//前面是經緯度，後面最大圖例(1-20) map.addControl(new BMap.MapTypeControl());//新增控制類 map.setCurrentCity("廣州");//所在城市 map.enableScrollWheelZoom(true);//能否放大 } ); }; </script> </html>