Javascript I'；我在地理定位方面有困难

我试图让这个地理位置脚本工作，但对于我自己，我总是得到“无法检索您的位置”。这是指向网页的链接，该网页的实时结果正是我想要的。我试着用相同的HTML、JS和CSS将JSFIDLE复制到一个空白的JSFIDLE。但是我不能让它工作。我需要API密钥还是什么。如果您需要我详细说明，我非常乐意，谢谢您抽出时间

这是指向实时结果的链接（单击后向下滚动）

HTMl
显示我的位置

JS
函数geoFindMe（）{
var输出=document.getElementById（“out”）；
如果（！navigator.geolocation）{
output.innerHTML=“您的浏览器不支持地理位置”
”；
回来
}
功能成功（职位）{
变量纬度=位置坐标纬度；
var经度=position.coords.longitude；
output.innerHTML='纬度为'+Latitude+'''”
经度为'+Latitude+'''”
；
var img=新图像（）；
img.src=”https://maps.googleapis.com/maps/api/staticmap?center=“+纬度+”、“+经度+”&zoom=13&size=300x300&sensor=false”；
输出。追加子项（img）；
}
函数错误（）{
output.innerHTML=“无法检索您的位置”；
}
output.innerHTML=“定位…
”；
navigator.geolocation.getCurrentPosition（成功，错误）；
}

正在工作

您需要将此代码放在头部（在加载页面之前）

函数geoFindMe（）{
var输出=document.getElementById（“out”）；
如果（！navigator.geolocation）{
output.innerHTML=“您的浏览器不支持地理位置”
”；
回来
}
功能成功（职位）{
变量纬度=位置坐标纬度；
var经度=position.coords.longitude；
output.innerHTML='纬度为'+Latitude+'''”
经度为'+Latitude+'''”
；
var img=新图像（）；
img.src=”https://maps.googleapis.com/maps/api/staticmap?center=“+纬度+”、“+经度+”&zoom=13&size=300x300&sensor=false”；
输出。追加子项（img）；
}
函数错误（）{
output.innerHTML=“无法检索您的位置”；
}
output.innerHTML=“定位…
”；
navigator.geolocation.getCurrentPosition（成功，错误）；
}

你能分享你自己的代码吗？问题的标题应该描述你面临的问题，而不是你试图解决问题时的经历。此外，我们还需要查看相关代码。您使用过哪些浏览器？我在chrome中试用过，使用了第一个链接中的示例，效果很好，但当我复制代码并亲自试用时，什么都没有显示。

HTMl
<p><button onclick="geoFindMe()">Show my location</button></p>
<div id="out"></div>

JS
    function geoFindMe() {
  var output = document.getElementById("out");

  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

    var img = new Image();
    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

    output.appendChild(img);
  }

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  }

  output.innerHTML = "<p>Locating…</p>";

  navigator.geolocation.getCurrentPosition(success, error);
}

function geoFindMe() {
var output = document.getElementById("out");

if (!navigator.geolocation){
output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
return;
}

function success(position) {
var latitude  = position.coords.latitude;
var longitude = position.coords.longitude;

output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

var img = new Image();
img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

output.appendChild(img);
}

function error() {
output.innerHTML = "Unable to retrieve your location";
}

output.innerHTML = "<p>Locating…</p>";

navigator.geolocation.getCurrentPosition(success, error);
}