离线缓存manifest、获取经纬度、获取地图

时间 2020-12-30

一.离线缓存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>