HTML5 Geolocation 简单示例不起作用
Posted
技术标签:
【中文标题】HTML5 Geolocation 简单示例不起作用【英文标题】：HTML5 Geolocation simple example not working 【发布时间】：2017-02-20 08:03:12 【问题描述】：在一个非常简单的示例中，我试图获取用户设备的坐标并在网页的谷歌地图上绘制相同的坐标。该示例很简单并且必须运行，但是我发现了一个错误。有人可以帮忙解决吗？
x = navigator.geolocation;
x.getCurrentPosition(success, failure);
function success(position)
var lat = position.coords.latitude;
var long = position.coords.longitude;
document.getElementById('para1').innerhtml = lat;
document.getElementById('para2').innerHTML = long;
var coords = new google.maps.LatLng(lat, long );
var mapOptions =
zoom: 15,
center: coords,
mapTypeId: google.maps.MapTypeId.ROADMAP
var map = new google.maps.Map(document.getElementById('mapDiv'), mapOptions);
function failure()
alert ("It did not work");
<body>
<p id="para1"></p>
<p id="para2"></p>
<div id="mapDiv" style="width:500px;height:500px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.googlemap/1.5/jquery.googlemap.min.js"></script>
</body> 错误：
参考：https://www.youtube.com/watch?v=obOa8fdJ9aQ
【问题讨论】：
您是否在 HTTPS 下运行？如果您在 Chrome 中检查控制台，您会看到以下消息：getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS
不，“ReferenceError: google is not defined”这就是我得到的全部！ ;(
那是因为您需要包含 Google Maps JS API：developers.google.com/maps/documentation/javascript
【参考方案1】：
尝试以下两件事：
-
添加此脚本以防它仍然显示错误，谷歌搜索没有密钥的 googlemap 脚本
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=[KEY]" type="text/javascript"></script>
-
我在使用 ajax 时遇到了很多问题。代码总是在得到响应之前先编译。因此，请确保等待 ajax 响应，然后控件应该转到下一行。使用等待方法进行测试..解决问题后将其删除。
【讨论】：
【参考方案2】：我尝试了这个脚本而不是来自 cdnjs 的脚本，并且代码运行良好：
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" ></script>
我不知道为什么，但这解决了这个问题！ ;(
【讨论】：
这是因为您使用的库是为了更轻松地通过 jQuery 与 Google Map 进行交互，而不是创建 Map。您仍然需要使用 Google API 来执行此操作。以上是关于HTML5 Geolocation 简单示例不起作用的主要内容，如果未能解决你的问题，请参考以下文章
html5-geolocation : navigator.geolocation.watchPosition 连续回调