无法加载谷歌地图
[英]Not able to load google map
问题描述
我正在尝试显示在Google Map上使用geolocation API获取的用户位置。但是地图没有加载。我在做什么错？
$(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>
4 个解决方案
解决方案1
1 2012-01-22 11:13:34
这是我的小提琴 ，我改变了几件事：
- 首先，我将Alert更改为Console.log，这很重要，因为它是一种非阻塞性的日志记录方式，Alert会停止脚本执行并且不可靠。
- 我删除了google map脚本标记，并将其动态添加到document.ready处理程序的页面中，还添加了一个回调函数“＆callback = trackLocation” ，从Google加载的JSON-P脚本将使用该名称运行该函数，执行时。
- 我将函数trackLocation（）直接附加到窗口对象，因此可以从Google加载的脚本中找到它。
- 我将map_canvas的高度更改为500px，而不是100％，似乎在拉伸地图时出现问题。 我的第一个Google搜索给了我： http : //forum.jquery.com/topic/google-map-not-stretching-properly-when-width-set-to-100，您可以对此进行更多研究。
祝您的地图好运！
解决方案2
1 已采纳 2012-01-22 11:14:26
看看这个jsFiddle 。 这与您之间的唯一区别是删除了静态js引用并添加了CSS。 没有该CSS，地图似乎不会显示。 我在使用Maps Api时从未遇到过此问题，也许我只是不加思索地添加了此CSS。
该CSS取自文档上的HelloWorld教程 。
解决方案3
1 2012-01-22 13:23:18
您是否尝试过在html中的.js之前调用googlemap.js？
解决方案4
0 2013-03-22 11:03:45
我正在像这样加载Google Maps API：
function mapsjsready()
{
// mapsjs ready!
}
$(document).ready( function() {
var mapsjs = document.createElement( 'script' );
mapsjs.type = "text/javascript";
mapsjs.async = true;
mapsjs.src = "https://maps.googleapis.com/maps/api/js?sensor=false";
mapsjs.id = "mapsjs";
mapsjs.onload = mapsjsready;
// Only for IE 6 and 7
mapsjs.onreadystatechange = function()
{
if( this.readyState == 'complete' )
{
mapsjsready();
}
}
document.body.appendChild( mapsjs );
});
但是它突然停止工作了。
我发现添加回调参数以某种方式解决了问题：
function mapsjsready()
{
// mapsjs ready!
}
function mapsjsloaded()
{
// mapsjs loaded!
}
$(document).ready( function() {
var mapsjs = document.createElement( 'script' );
mapsjs.type = "text/javascript";
mapsjs.async = true;
mapsjs.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=mapsjsloaded";
mapsjs.id = "mapsjs";
mapsjs.onload = mapsjsready;
// Only for IE 6 and 7
mapsjs.onreadystatechange = function()
{
if( this.readyState == 'complete' )
{
mapsjsready();
}
}
document.body.appendChild( mapsjs );
});
我不明白为什么，但是添加回调参数解决了我的问题。
无法通过Angular.js加载Google Map URL
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.