我试图在谷歌地图上显示使用地理定位 API 获得的用户位置。但 map 未加载。我做错了什么？
$(document).ready(function(){
trackLocation()
})
//Track the user's location with high accuracy
function trackLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
successFunction,
errorFunction,
{enableHighAccuracy : true,
timeout:1000 * 10 * 100,
maximumAge:0
}
)
}
}
function successFunction(position){
plotMap(position)
}
function errorFunction(error){
alert(error)
}
function plotMap(position){
var location = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude)
alert('created locaction')
var plotOptions = {
center: location,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
alert('created options')
var map = new google.maps.Map(document.getElementById('map_canvas'),plotOptions)
alert('created map')
}
html 是
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="{{STATIC_URL}}jquery.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}javascript_posted_above.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
Hi
<div id="map_canvas" style="width:100%; height:100%;"></div>
</body>
</html>
最佳答案
看看这个 jsFiddle 。这和你的唯一区别是删除了静态 js 引用并添加了 CSS。如果没有该 CSS， map 将不会显示。我在使用Maps Api时从未遇到过这个问题，也许我只是不假思索地添加了这个CSS。
CSS 取自 HelloWorld tutorial在文档上。
关于javascript - 无法加载谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8960293/