Question

我试图在谷歌地图上显示使用地理定位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>

Answer 1

这里是my fiddle，我改变了一些事情：

首先，我将Alert更改为Console.log，这很重要因为它是一种非阻碍的日志记录方式，所以警报会停止脚本执行并且不可靠。
我删除了google地图脚本标记，并将其动态添加到document.ready处理程序中的页面，我还添加了一个回调函数“＆amp; callback = trackLocation”，JSON-P来自Google的加载脚本将在执行时运行具有该名称的函数。
我将函数trackLocation（）直接附加到window对象，因此可以通过从Google加载的脚本找到它。
我将map_canvas的高度更改为500px而不是100％，这似乎是拉伸地图的问题。我的第一次谷歌搜索给了我：http://forum.jquery.com/topic/google-map-not-stretching-properly-when-width-set-to-100你可以用它做更多的研究。

祝你的地图好运！

Answer 2

看看这个jsFiddle。这与你的唯一区别是删除了静态js引用并添加了CSS。没有CSS，地图似乎不会显示。我在使用Maps Api时从未遇到过这个问题，也许我只是不假思索地添加了这个CSS。

CSS取自文档上的HelloWorld tutorial。

Answer 3

您是否尝试在html中的.js之前调用googlemap.js？

Answer 4

我正在加载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 );
});

我不明白为什么，但添加回调参数解决了我的问题。

无法加载谷歌地图

4 个答案: