显示地图，同时通过ajax/php从数据库检索坐标

Showing a map, while retrieving coordinates from a db through ajax/php

本文关键字：php 数据库 坐标 检索 ajax 地图 显示      更新时间：2023-09-26

我必须从数据库中检索特定位置的坐标，然后显示以它们为中心的地图。我的解决方案似乎不工作，因为它试图打开一个地图没有坐标

function readyf() {
var map;
var info;
var lat;
var lon;
function initialize() {
    $.ajax({
        method: "POST",
        //dataType: "json", //type of data
        crossDomain: true, //localhost purposes
        url: "getLocation.php", //Relative or absolute path to file.php file
        //data: {order: ordering},
        success: function (response) {
            console.log(response);
            info = JSON.parse(response);
            lat = info[0].lat;
            lon = info[0].lon;
            console.log(lat);
        },
        error: function (request, error) {
            console.log("Error");
        }
    });
    console.log(lat);
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(lat, lon)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

}

您需要将映射初始化移动到成功回调中。否则，AJAX请求开始，地图被初始化，然后然后您的成功回调将使用坐标触发。

function readyf() {
    var map;
    var info;
    var lat;
    var lon;
    function initialize() {
        $.ajax({
            method: "POST",
            //dataType: "json", //type of data
            crossDomain: true, //localhost purposes
            url: "getLocation.php", //Relative or absolute path to file.php file
            //data: {order: ordering},
            success: function (response) {
                console.log(response);
                info = JSON.parse(response);
                lat = info[0].lat;
                lon = info[0].lon;
                console.log(lat);
                var mapOptions = {
                    zoom: 8,
                    center: new google.maps.LatLng(lat, lon)
                };
                map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
            },
            error: function (request, error) {
                console.log("Error");
            }
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
}
相关文章：