使用HTML/JavaScript查找地理位置

我正在嘗試使用TheNewBoston的視頻來編碼具有「獲取位置」按鈕的網站，並將拉起用戶位置的Google地圖。但是，每次我點擊我的網站上的「獲取位置」時，都不會發生任何事情。我正在玩弄代碼，並且能夠讓地圖出現一次，但我無法再次獲得該結果，也不知道我是如何運作的。不知道我做錯了什麼？使用HTML/JavaScript查找地理位置

這裏是我的代碼：

<!DOCTYPE html> 
<html lang="en-US"> 

<head> 
    <title>Location Retriever</title> 
</head> 

<body> 
    <a href="#" id="get_location">Get Location</a> 
    <div> id="map"> 
    <iframe id="google_map" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com"> 
    </div> 

    <script> 

    var c = function(pos) { 
     var lat = pos.coords.latitude, 
     var long = pos.coords.longitude, 
     var coords = lat + ', ' + long; 

     document.getElementById('google_map').setAttribute('src','https://maps.google.com' + coords + '&z=60&output=embed'); 
    } 

    document.getElementById('get_location').onclick = function() { 
     navigator.geolocation.getCurrentPosition(c); 
     return false; 
    } 

    </script>

來源

2016-11-12 hoshicchi

使用Chrome Web的瀏覽器嗎？如果是這樣，請確保您使用'https：//'而不是'http：//'，因爲谷歌現在只允許在啓用ssl的頁面上定位。更好的方式是使用firefox – Viney

是的，您也可以在版本之前使用較舊的chrome版本50會工作 – Viney

@Novice - 謝謝！我已經在Firefox和Safari上打開了該網站，但不幸的是，我仍然沒有太大區別。我點擊「獲取位置」，但沒有任何反應。 – hoshicchi

我已經在你的代碼中的一些變化一些標籤沒有關閉/結束，已經調整了網址，以及你給不工作的網址，

<!DOCTYPE html> 
 
<html lang="en-US"> 
 

 
<head> 
 
<title>Location Retriever</title> 
 
</head> 
 

 
<body> 
 
    <a href="#" id="get_location">Get Location</a> 
 
    <div id="map"> 
 
    <iframe id="google_map" 
 
    width="600" 
 
    height="450" 
 
    frameborder="0" style="border:0px" allowfullscreen> 
 
</iframe> 
 
    </div> 
 

 
<script> 
 

 
    var c = function(pos) { 
 
    var lat = pos.coords.latitude, 
 
    long = pos.coords.longitude, 
 
    coords = lat + ', ' + long; 
 

 
document.getElementById('google_map').setAttribute('src','https://maps.google.com/maps/@' + coords + '&z=60'); 
 

 
} 
 

 
document.getElementById('get_location').onclick = function() { 
 

 
navigator.geolocation.getCurrentPosition(c); 
 
return false; 
 

 
} 
 

 
</script> 
 
</body> 
 
</html>

如果您在IE中檢查：

您將在iframe中看到「頁面未顯示」錯誤，並且會有鏈接導航到地圖。

在谷歌瀏覽器：

會有在控制檯的錯誤消息：「拒絕在該框架中顯示‘https://www.google.com/maps/@12.9732528,%2080.1971449&z=60’，因爲它設置‘X-框架 - 選項’到‘SAMEORIGIN’。」

來源

2016-11-12 03:37:11 GraveyardQueen

您將無法使用maps.google.com。您在控制檯中得到的錯誤是：Refused to display 'https://www.google.com/maps' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.我想你可能想什麼，看看是https://developers.google.com/maps/documentation/embed/

你也有一些小的代碼的問題，我有固定的你有什麼：

<!DOCTYPE html> 
<html lang="en-US"> 

<head> 
<title>Location Retriever</title> 
</head> 

<body> 
    <a href="#" id="get_location">Get Location</a> 
    <div id="map"> 
    <iframe id="google_map" width="425" height="350" frameborder="0" 
    scrolling="no" marginheight="0" marginwidth="0" 
    src="https://maps.google.com"></iframe> 
    </div> 

    <script> 
    var c = function(pos) { 
     var lat = pos.coords.latitude, 
      long = pos.coords.longitude, 
      coords = lat + ', ' + long; 

    document.getElementById('google_map').src = 'https://maps.google.com' + coords + '&z=60&output=embed'; 

    } 

    document.getElementById('get_location').onclick = function() { 
     navigator.geolocation.getCurrentPosition(c); 
     return false; 
    } 
    </script> 
</body> 
</html>

來源

2016-11-12 03:37:46

使用HTML/JavaScript查找地理位置

回答

相關問題