Question

我有一个小应用程序，我不断从数据库下载地理坐标并在地图中显示，同时上传地理位置坐标。我写的代码和数据正在上传和下载完全正常。但地图本身根本不显示。这是我的代码：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en&key=MY-API-KEY" async defer></script>

<script>


if ("geolocation" in navigator) 
{
    request_location();

} 

// Requesting location from user
function request_location()
{
    // Will repeat the process in two minutes
    setTimeout(request_location, 500 * 1000);

    // Get location info from browser and pass it to updating function
    navigator.geolocation.getCurrentPosition(update_location);
}

// Sending location to server via POST request
function update_location(position)
{
    // For simplicity of example we'll 
    // send POST AJAX request with jQuery
    $.post( "functions.php?action=update_geolocation", { latitude: position.coords.latitude, longitude: position.coords.longitude });



}

function updatemap(lat_coordinates, long_coordinates)
{


        var map = new google.maps.Map(document.getElementById('mapholder'), 
            {
            zoom: 4,
                center: {lat: lat_coordinates, lng: long_coordinates},
        });

        var marker = new google.maps.Marker({
            position: {lat: lat_coordinates, lng: long_coordinates},
                map: map,
                title: 'Hello World!'
                    });

 }


setInterval(function update_map(){

        jQuery.ajax({
            url: "http://dev.radiumenterprises.co.uk/viitgo/provider/rest.php/geolocation",
            type: "GET",

            contentType: 'application/json; charset=utf-8',
            success: function(resultData) {

                            console.log(resultData);
                            console.log(resultData.latitude);
                            console.log(resultData.longitude);

                            var lat_coordinates = parseFloat(resultData.latitude)
                            var long_coordinates = parseFloat(resultData.longitude)

                            updatemap(lat_coordinates, long_coordinates); 


            },
            error : function(jqXHR, textStatus, errorThrown) {
            },

        });

    }, 3000);

    </script>
    <div style="height:100%; width:100%;">
    <div style="margin: 0;padding: 0;height: 100%;" id="mapholder"></div>
    </div>

有没有人看到我出错的地方，我唯一的问题是地图本身没有显示。我已经尝试了很多解决方案，但无法弄清楚是什么导致它。任何建议将受到高度赞赏。提前谢谢。

Answer 1

似乎您对/rest.php/geolocation的请求超时，因此永远不会调用updatemap。

如果请求对您有效，请检查您的mapholder div的维度。它似乎有0高。

Answer 2

用于渲染地图的js代码似乎是正确的。

检查lat_coordinates，lng_coordinates是否正确。

另外尝试在$（document）.ready（function（）{}）中添加js，或者确保在html代码之后呈现js。

当呈现js时，DOM元素不可用。

在javascript

2 个答案: