无法将我的纬度或经度附加到 html 文档？

Posted 2023-05-08

【中文标题】无法将我的纬度或经度附加到 html 文档？

【英文标题】：Can't append my latitude or longitude to html document?

【发布时间】：2016-10-08 02:45:40

【问题描述】：

我正在使用 openweather api 来显示用户所在城市的天气。我首先使用地理定位功能来查找用户的纬度和经度。然后将该数据传递到变量 api 中。由于某种原因，纬度和经度不会附加到 div id 数据中，api 似乎也不起作用。

这里是codepen的链接：http://codepen.io/sibraza/pen/VjYwWK?editors=1111

这里是 javascript：

$(document).ready(function()  
 var lat;
 var long; 

  if (navigator.geolocation) 
  navigator.geolocation.getCurrentPosition(function(position) 

    lat = position.coords.latitude; 
    long = position.coords.longitude; 


  var api='http://api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&appid=(The API Key Was Removed in the question)';

  $.getJSON(api,function(data)
 var city= data.name; 

  console.log(api);
  console.log(city);
  );

  );



);

【问题讨论】：

尽量不要使用javascipt关键字“long”作为变量名。改用“lon”。 javascripter.net/faq/reserved.htm

api 在演示中返回unauthorized 状态。

JSON data not being returned - JQuery AJAX的可能重复

@charlietfl API 密钥被省略。

【参考方案1】：

`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);
`

和 HTML

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

`

https://jsfiddle.net/api/mdn/

【讨论】：

这里不做解释。这如何解决 OP 的问题