Question

在一个非常简单的例子中，我试图获取用户设备的坐标，并在网页上的谷歌地图上绘制相同的内容。示例很简单，必须运行，但是我发现错误。有人可以帮忙解决吗？

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

Answer 1

尝试以下两件事：

添加此脚本，但仍显示错误，google for googlemap脚本无键

ContextTypeName

使用ajax时遇到了很多问题。在得到响应之前，代码总是先编译。因此，请确保等待ajax响应，然后控件应转到下一行。使用wait方法测试..并在解决问题后将其删除。

Answer 2

我尝试使用这个脚本而不是cdnjs中的脚本，代码运行得非常好：

<script src="http://maps.googleapis.com/maps/api/js?sensor=false" ></script>

我不知道为什么，但这解决了这个问题！ ;（

HTML5 Geolocation简单示例不起作用

2 个答案: