geolocation 相关问题

地理定位是对象的真实世界地理位置的识别，例如手机或连接到互联网的计算机终端。有关W3C Geolocation API的问题，请使用[w3c-geolocation]。

div 已损坏，写在其外部。我怀疑这是响应时间问题，但我无法修复它。如果我将 jQuery 按钮效果和 div 一起删除，我就能够... div 已损坏，<p> 写在其外部。我怀疑这是响应时间问题，但我无法修复它。如果我将 jQuery 按钮效果和 div 一起删除，我就可以很好地显示位置。我更喜欢将脚本放在标题中，但欢迎任何解决方案。 $(document).ready(function() { var banner = $("#banner-message"); var button = $("button"); // handle click and add class button.on("click", () => { banner.toggleClass("alt"); }); }); // Beregn afstand mellem 2 punkter function distance(lon1, lat1, lon2, lat2) { var R = 6371; // Radius of the earth in km var dLat = (lat2 - lat1).toRad(); // Javascript functions in radians var dLon = (lon2 - lon1).toRad(); var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) * Math.sin(dLon / 2) * Math.sin(dLon / 2); var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); var d = R * c; // Distance in km return d; } /** Converts numeric degrees to radians */ if (typeof(Number.prototype.toRad) === "undefined") { Number.prototype.toRad = function() { return this * Math.PI / 180; } } window.navigator.geolocation.getCurrentPosition(function(pos) { console.log(pos); console.log( distance(pos.coords.longitude, pos.coords.latitude, 9.318893232332728, 56.53058705206541) ); }); // Check if the browser supports geolocation if ("geolocation" in navigator) { // Get the user's current position navigator.geolocation.getCurrentPosition( function(position) { let latitude = position.coords.latitude; let longitude = position.coords.longitude; let accuracy = position.coords.accuracy; document.body.innerHTML += "<div id=\"banner-message\">"; document.body.innerHTML += "<p>Geolocation test</p>"; document.body.innerHTML += "<p>Latitude: " + latitude + "</p>"; document.body.innerHTML += "<p>Longitude: " + longitude + "</p>"; document.body.innerHTML += "<p>Accuracy indenfor: " + accuracy + " meter</p>"; const Afstand = distance(longitude, latitude, 9.418893232332728, 56.93058705206541); document.body.innerHTML += "<p>Afstand: " + Math.round(Afstand * 1000) + " meter</p>"; document.body.innerHTML += "<button>Change coloring</button>"; document.body.innerHTML += "</div>"; //SLEEP er her fordi der ikke er en WAIT funktion i Javascript ! function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } //Check om accuracy er under 200 meter - ellers refresh siden efter 7 sekunder. /* if (Math.round(Afstand*1000) > 200) { sleep(7000).then(() => { location.reload(); }); } */ }, function(error) { console.error("Error getting location: " + error.message); } ); } else { alert("Geolocation is not supported by your browser"); } body { background: #FFE0AF; padding: 20px; font-family: Helvetica; } #banner-message { background: #F7F7F0; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } button { background: #BAF1BE; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #banner-message.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #banner-message.alt button { background: #FFBFBF; color: #000; } 工作示例让我们从真正的 MRE 开始，而不是整个代码 function f(){ document.body.innerHTML = '<div>'; document.body.innerHTML += '<span>Hello</span>'; document.body.innerHTML += '</div>'; } div { background-color: lightgreen; } body { background-color: red; } <body> <button onclick='f()'>GO</button> CSS部分是看span是否在div中：如果是，背景应该是绿色的。如果 hello 是红色背景，那么它不在 div 中。确实不是。为了理解为什么会这样，让我们考虑一个更简单的f function f(){ document.body.innerHTML='<div>Unclosed'; } 您所看到的：绿色背景上的unclosed。如果你检查 dom，你会看到一个关闭的 <div>Unclosed</div>。因为一旦您将 <div> 添加到 innerHTML，它所做的就是创建一个 <div></div>。有一个隐含的结束。然后当您添加 <span>Hello</span> 时，它会将其添加到 div 之后。然后添加单个</div>没有效果。 innerHTML 中不能包含部分 HTML。引擎将为您完成。另一种看待它的方式 function f(){ let div=document.getElementById('outer'); let pre=document.getElementById('code'); pre.textContent = '----\nInit\n' + div.innerHTML+'\n\n'; div.innerHTML = '<div>'; pre.textContent += '----\nAfter div\n'+div.innerHTML+'\n\n'; div.innerHTML += '<b>Hello</b>'; pre.textContent += '----\nAfter hello\n'+div.innerHTML+'\n\n'; div.innerHTML += '</div>'; pre.textContent += '----\nAfter /div\n'+div.innerHTML+'\n\n'; } #outer { background-color: red; } #outer div { background-color: lightgreen; } pre { background-color: yellow; } <button onclick='f()'>GO</button> <div id=outer></div> <pre id=code></pre> 这次，我添加了一个（黄色）pre，显示 div#outer 内容代码（我更改了 innerHTML 的 div#outer 而不是 body，以便能够保留我的 pre。你可以看到，正如我所说，只要添加 <div>，代码就变成 <div></div>。因此 <b>Hello</b> 位于该 div 之外（但当然位于 #outer div 内，代表您的情况下的 body），并且位于红色背景解决方案嗯，恕我直言，最好的解决方案是使用 dom 操作代码而不是构建 html。但如果您需要/想要像这样处理 HTML，则不应该逐步执行。您必须一次性更改innerHTML。如果需要，可以使用另一个变量来累积你想要的内容，然后将其放入innerHTML function f(){ let s='<div>'; s+='<span>Hello</span>'; s+='</div>'; document.body.innerHTML = s; } 例如，纠正我最后的代码 function f(){ let div=document.getElementById('outer'); let pre=document.getElementById('code'); pre.textContent = '----\nInit\n' + div.innerHTML+'\n\n'; let s = '<div>'; pre.textContent += '----\nAfter div\n'+div.innerHTML+'\n\n'; s += '<b>Hello</b>'; pre.textContent += '----\nAfter hello\n'+div.innerHTML+'\n\n'; s += '</div>'; pre.textContent += '----\nAfter /div\n'+div.innerHTML+'\n\n'; div.innerHTML = s; pre.textContent += '----\nAfter innerHTML←s\n'+div.innerHTML+'\n\n'; } #outer { background-color: red; } #outer div { background-color: lightgreen; } pre { background-color: yellow; } <button onclick='f()'>GO</button> <div id=outer></div> <pre id=code></pre> 这次，Hello处于绿色背景，因为它位于div内部。在我们自己添加 Hello 和显式 </div> 之前，没有发生该 div 的隐式关闭。

javascript geolocation

回答 1 投票 0

PHP 和 WordPress 中基于位置的 (GeoIP) 重定向

我是 WordPress 开发新手。我正在尝试在我的 WordPress 网站中创建基于位置的重定向。这个想法是根据......将用户从通用页面发送到与他相关的特定页面......

php wordpress geolocation ip-address cloudflare

回答 1 投票 0

传单地图：使用 navigator.geolocation.watchPosition 更新标记？

我正在尝试使用传单地图来显示用户在地图上的当前位置。类似于实时 GPS 跟踪。这是我当前的代码： var watchID; var geoLoc; 有趣...

javascript geolocation leaflet

回答 2 投票 0

Flutter：如何获得高精度定位？

未来 mylocation() 异步{ 位置position =等待Geolocator().getCurrentPosition(desiredAccuracy:LocationAccuracy.bestForNavigation); 返回位置； } 我想要得到我的