JavaScript使用onclick和地理位置来检索当前位置

Question

我必须将点击处理程序添加到提供的按钮上，该按钮将使用地理位置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> 

Answer 1

采用

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

代替

Mapping.setPosition(pos);