无法将navigator.geolocation存储在react.js中的变量中

Question

我正在尝试将Better Doctor API用于学校项目。

这是API调用的网址：

var resource_url =' https: //api.betterdoctor.com/2016-03-01/doctors?location='+ 坐标 +'，'+距离+'＆skip = 0＆limit = 10＆user_key ='+ api_key;

坐标的格式必须为“ xx.xxx，-xx.xxx”（无空格），为经纬度值。 我想使用navigator.geolocation函数自动获取用户的位置并将其存储在变量坐标中，而不是对特定坐标进行硬编码。

我这样做的方式是返回未定义的坐标。 我在下面的示例中将其注释掉。 我对javascript和响应都相当陌生，所以如果问题含糊或措辞不佳，请原谅。 谢谢。 这是我所拥有的：

---

 var api_key = 'CODE_SAMPLES_KEY_9d3608187'; var coordinates = "40.7128,-74.006"; //NY City coordinates var distance = 30; //Want to toggle this //var coordinates = getLocation(); Doesn't work //getLocation() is defined below function showPosition(position) { console.log("Position: " + String(position.coords.latitude).slice(0, 6) + "," + String(position.coords.longitude).slice(0, 7)); return String(position.coords.latitude).slice(0, 6) + "," + String(position.coords.longitude).slice(0, 7); } function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { alert("Geolocation is not supported by this browser."); } } var resource_url = 'https://api.betterdoctor.com/2016-03-01/doctors?location=' + coordinates + ',' + distance + '&skip=0&limit=10&user_key=' + api_key; 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

##

Answer 1

您没有获得地理位置信息的可能原因有两个。

1. getCurrentPosition()不再适用于不安全的来源（HTTP站点）。 如果您的JavaScript代码在HTTP站点而不是HTTPS上运行，则getCurrentPosition()将静默失败。
2. getCurrentPosition()只能由用户手势事件（单击某些东西等）调用。 如果在页面加载后自动调用getLocation() ，它将无法正常工作。

我认为这两个限制都是出于安全考虑。

对于您的代码段，这是jsfiddle中的一个有效示例。