jquery GoogleMap无法从MySQL数据库加载点

bjg7j2ky  于 2023-02-03  发布在  jQuery
关注(0)|答案(1)|浏览(121)

我正在遵循this教程,通过表单窗口在谷歌Map上放置标记,并将其保存到数据库中。一切都很好,但Map加载时没有从数据库中加载标记。在我的main.php文件(包含所有html)中,我运行了这个函数来在Map上放置标记。

//############### Create Marker Function ##############
function create_marker(MapPos, MapTitle, MapDesc,  InfoOpenDefault, DragAble, Removable, iconPath)
{                 

    //new marker
    var marker = new google.maps.Marker({
        position: MapPos,
        map: map,
        draggable:DragAble,
        animation: google.maps.Animation.DROP,
        title:"Hello World!",
        //icon: iconPath
    });

    //Content structure of info Window for the Markers
    var contentString = $('<div class="marker-info-win">'+
    '<div class="marker-inner-win"><span class="info-content">'+
    '<h1 class="marker-heading">'+MapTitle+'</h1>'+
    MapDesc+ 
    '</span><button name="remove-marker" class="remove-marker" title="Remove Marker">Remove Marker</button>'+
    '</div></div>');    

    //Create an infoWindow
    var infowindow = new google.maps.InfoWindow();
    //set the content of infoWindow
    infowindow.setContent(contentString[0]);

    //Find remove button in infoWindow
    var removeBtn   = contentString.find('button.remove-marker')[0];
    var saveBtn     = contentString.find('button.save-marker')[0];

    //add click listner to remove marker button
    google.maps.event.addDomListener(removeBtn, "click", function(event) {
        remove_marker(marker);
    });

    if(typeof saveBtn !== 'undefined') //continue only when save button is present
    {
        //add click listner to save marker button
        google.maps.event.addDomListener(saveBtn, "click", function(event) {
            var mReplace = contentString.find('span.info-content'); //html to be replaced after success
            var mName = contentString.find('input.save-name')[0].value; //name input field value
            var mDesc  = contentString.find('textarea.save-desc')[0].value; //description input field value
            var mType = contentString.find('select.save-type')[0].value; //type of marker

            if(mName =='' || mDesc =='')
            {
                alert("Please enter Name and Description!");
            }else{
                save_marker(marker, mName, mDesc, mType, mReplace); //call save marker function
            }
        });
    }

    //add click listner to save marker button        
    google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker); // click on marker opens info window 
    });

    if(InfoOpenDefault) //whether info window should be open by default
    {
      infowindow.open(map,marker);
    }
}

在我的map_process. php文件(处理数据库请求的文件)中,我有以下内容:

<?php
//PHP 5 +

// database settings 
$db_username = 'user4321';
$db_password = '4321';
$db_name = 'test';
$db_host = 'localhost';

//mysqli
$mysqli = new mysqli($db_host, $db_username, $db_password, $db_name);

if (mysqli_connect_errno()) 
{
    header('HTTP/1.1 500 Error: Could not connect to db!'); 
    exit();
}

################ Save & delete markers #################
if($_POST) //run only if there's a post data
{
    //make sure request is comming from Ajax
    $xhr = $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'; 
    if (!$xhr){ 
        header('HTTP/1.1 500 Error: Request must come from Ajax!'); 
        exit(); 
    }

    // get marker position and split it for database
    $mLatLang   = explode(',',$_POST["latlang"]);
    $mLat       = filter_var($mLatLang[0], FILTER_VALIDATE_FLOAT);
    $mLng       = filter_var($mLatLang[1], FILTER_VALIDATE_FLOAT);

    //Delete Marker
    if(isset($_POST["del"]) && $_POST["del"]==true)
    {
        $results = $mysqli->query("DELETE FROM markers WHERE lat=$mLat AND lng=$mLng");
        if (!$results) {  
          header('HTTP/1.1 500 Error: Could not delete Markers!'); 
          exit();
        } 
        exit("Done!");
    }

    $mName      = filter_var($_POST["name"], FILTER_SANITIZE_STRING);
    $mAddress   = filter_var($_POST["address"], FILTER_SANITIZE_STRING);
    $mType      = filter_var($_POST["type"], FILTER_SANITIZE_STRING);

    $results = $mysqli->query("INSERT INTO markers (name, address, lat, lng, type) VALUES ('$mName','$mAddress',$mLat, $mLng, '$mType')");
    if (!$results) {  
          header('HTTP/1.1 500 Error: Could not create marker!'); 
          exit();
    } 

    $output = '<h1 class="marker-heading">'.$mName.'</h1><p>'.$mAddress.'</p>';
    exit($output);
}

################ Continue generating Map XML #################

//Create a new DOMDocument object
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers"); //Create new element node
$parnode = $dom->appendChild($node); //make the node show up 

// Select all the rows in the markers table
$results = $mysqli->query("SELECT * FROM markers WHERE 1");
if (!$results) {  
    header('HTTP/1.1 500 Error: Could not get markers!'); 
    //console.log("This an error");
    exit();
} 

//set document header to text/xml
header("Content-type: text/xml"); 

// Iterate through the rows, adding XML nodes for each
while($obj = $results->fetch_object())
{
  $node = $dom->createElement("marker");  
  $newnode = $parnode->appendChild($node);   
  $newnode->setAttribute("name",$obj->name);
  $newnode->setAttribute("address", $obj->address);  
  $newnode->setAttribute("lat", $obj->lat);  
  $newnode->setAttribute("lng", $obj->lng);  
  $newnode->setAttribute("type", $obj->type);   
}

echo $dom->saveXML();

?>

现在,我似乎找不到为什么它没有首先加载标记的原因。考虑到我所有其他的命名都是正确的,上面的代码中是否有任何一个是错误的。
编辑:我在控制台得到一个500(内部服务器错误),但我不认为这是问题,因为我有另一个Map,我正在测试,正确加载保存的点。的格式是'GET' serveraddress/mapprocess.php (500 internal server error)。不确定这是否有帮助,但在保存标记(这是成功的)我得到XHR finished loading: GET "severaddress/mapprocess.php"作为响应。
你知道为什么这个不能加载标记吗?或者我应该去哪里找。

y4ekin9u

y4ekin9u1#

我知道它可能会晚,但它不工作的原因是因为数据,即经度和纬度正在返回的mysql可能是字符串格式和谷歌MapAPI期望浮点值的经度和纬度,因此转换接收到的值为浮点使用parseFloat()在Javascript中。

相关问题