时间戳

首页 > 解决方案 > Javascript 使用 onclick 和 geolocation 来检索当前位置

javascript - Javascript 使用 onclick 和 geolocation 来检索当前位置

问题描述

我必须向提供的按钮添加一个单击处理程序，该按钮将使用地理定位 api 检索用户当前位置。这是我的代码，我正在尝试使用地理位置将用户的当前位置设置为地图，但由于某些原因该按钮不起作用。谁能指出我做错了什么并帮助我？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
    <style>
        #mapid { height: 600px; }
    </style>

    <script>
        const Mapping = {
            map : null,
            initializeMap : () => {
                Mapping.map = L.map('mapid').setView([51.505, -0.09], 13);
                L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
                    subdomains: ['a','b','c']
                }).addTo( Mapping.map );
            },
            resetLocation : ({lat,lon}) => {
                Mapping.map.setView([lat,lon], 13);
            }
        }

        window.onload = () => {
            Mapping.initializeMap();

            userCode();
        }

        function userCode() {
            // JS CODE START
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    let pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    Mapping.setPosition(pos);
                    Mapping.open(Mapping.map);
                    Mapping.map.setPosition(pos);
                })
                }

            // JS CODE END

        }

    </script>
</head>
<body>

<!-- HTML CODE GOES HERE-->
<button onclick="userCode()">Get Location</button>

<div id="mapid" style="width: 600px; height: 400px;"></div>

</body>
</html>

标签： javascriptgeolocation

解决方案

利用

Mapping.resetLocation({lat:pos.lat,lon:pos.lng});

代替

Mapping.setPosition(pos);

推荐阅读