HTML5 Geolocation 简单示例不起作用答案

【问题标题】：HTML5 Geolocation simple example not workingHTML5 Geolocation 简单示例不起作用
【发布时间】：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

标签： javascript jquery html geolocation

【解决方案1】：

尝试以下两件事：

添加此脚本以防它仍然显示错误，谷歌搜索没有密钥的 googlemap 脚本

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;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 来执行此操作。