Javascript-使用mySQL,Php和JS,如何请求Dans使用我数据库中的数据？

我想做的是：当用户在选择字段中选择位置时,功能newMark()在google.maps上放置一个标记；

我现在实现的目标：显示地图,将选择区域及其所有位置保存在数据库中.

我有一个数据库,该数据库具有一个名为Step的表,其列名为namePlace,Latitude,Longitude.

这是我目前的代码：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
    <title>Carte dynamique des Itinéraires</title>
    <Meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <Meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">     

        function initialiser() {
            var latlng = new google.maps.LatLng(46.779231, 6.659431);
            //objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant
            //de définir des options d'affichage de notre carte
            var options = {
                center: latlng,
                zoom: 3,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            //constructeur de la carte qui prend en paramêtre le conteneur HTML
            //dans lequel la carte doit s'afficher et les options
            var carte = new google.maps.Map(document.getElementById("carte"), options);


        }

        function newMark(lat, lng){
        var mark = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: carte)})
        }
        var sel = document.getElementById("namePlace");


        sel.onchange = function() {
        var lat = this[this.selectedindex].getAttribute("dtlat");
        var lon = this[this.selectedindex].getAttribute("dtlon");
        newMark(parseFloat(lat), parseFloat(lon));
        }

    </script>
</head>

<body onl oad="initialiser()">   
    <div id="carte" style="width:100%; height:100%"></div>
    <div>
    <form>
        <label for="namePlace"><p><u> Nom etape : </p></u></label> 
        <p>
        <select name="namePlace" id="namePlace">
        <option value="">Selectionnez un lieu</option>
        <?PHP
        include("connexion.PHP");
        $con = connect_LIF4();
        $req2 = "SELECT * FROM etape";
        $result2 = MysqLi_query($con, $req2);
        while ($donnees = MysqLi_fetch_array($result2))
        {     
               echo'<option value="'.$donnees['NomLieu'].'" dtlat="'.$donnees['Latitude'].'" dtlon="'.$donnees['Longitude'].'">'.
                $donnees['NomLieu'].'</option>';                
        }
        ?>              
        </select></p>
        </form>
    </div>
</body>

这是带有将字段添加到html标签的解决方案的输出代码：

<!DOCTYPE HTML>
<html>
<head>
    <title>PROJET LIF4</title>
    <Meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <Meta name="description" content="" />
    <Meta name="keywords" content="" />
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/style1.css" />
        <link rel="stylesheet" href="css/style2.css" />
</head>
<body class="homepage">
        <div id="header-wrapper" class="wrapper">
            <div id="header">
                <nav id="nav">
<ul>
    <li><a href="index.PHP">Page d'accueil</a></li>
    <li><a href="itineraire.PHP">Choisir un itineraire</a></li>
    <li><a href="carte.PHP">Carte</a></li>
    <li><a href="avis.PHP">Avis</a></li>
</ul>
</nav>
                    <div id="logo">
                        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
    <title>Carte dynamique des Itinéraires</title>
    <Meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- Elément Google Maps indiquant que la carte doit être affiché en plein écran et
    qu'elle ne peut pas être redimensionnée par l'utilisateur -->
    <Meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Inclusion de l'API Google MAPS -->
    <!-- Le paramètre "sensor" indique si cette application utilise détecteur pour déterminer la position de l'utilisateur -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function initialiser() {
            var latlng = new google.maps.LatLng(46.779231, 6.659431);
            //objet contenant des propriétés avec des identificateurs prédéfinis dans Google Maps permettant
            //de définir des options d'affichage de notre carte
            var options = {
                center: latlng,
                zoom: 3,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            //constructeur de la carte qui prend en paramêtre le conteneur HTML
            //dans lequel la carte doit s'afficher et les options
            var carte = new google.maps.Map(document.getElementById("carte"), options);


        }
        function newMark(lat, lng){
        var mark = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: carte})
        }
        var sel = document.getElementById("namePlace");

        sel.onchange = function() {
        var lat = this[this.selectedindex].getAttribute("dtlat");
        var lon = this[this.selectedindex].getAttribute("dtlon");
        newMark(lat, lon);
        }


    </script>
</head>

<body onl oad="initialiser()">

    <div id="carte" style="width:100%; height:100%"></div>
    <div>
    <form>
        <label for="namePlace"><p><u> Nom etape : </p></u></label> 
        <p>
        <select name="namePlace" id="namePlace">
        <option value="">Selectionnez un lieu</option>
        <option value="Abaine" dtlat=56.9333300 dtlon=26.8500000>Abaine</option><option value="Abu Fanajin" dtlat=30.4327100 dtlon=45.5775200>Abu Fanajin</option><option value="Abu Shanab" dtlat=10.7883300 dtlon=29.5524400>Abu Shanab</option><option value="Adoyevshchina" dtlat=52.2865800 dtlon=46.5031800>Adoyevshchina</option><option value="Agaro" dtlat=15.8333300 dtlon=38.6500000>Agaro</option><option value="AgarSararen" dtlat=7.9500000 dtlon=46.2833300>AgarSararen</option><option value="Agasur" dtlat=10.7185000 dtlon=45.5652000>Agasur</option><option value="Ahl `Arub" dtlat=14.2833300 dtlon=47.0666700>Ahl `Arub</option>               
        </select></p>
        </form>
    </div>
</body>

解决方法:

您的数据库中的经度和纬度是否也一样？在这种情况下,您也可以使用以下信息填充选项：

已编辑

在您的问题中,由于尝试了我的解决方案,您发布了以下行：

<option value="Abaine" dtlat=56.9333300 dtlon=26.8500000>Abaine</option>

那是错的.如您所见,这些值不是用引号引起来的.就像我在回答中所说的那样：

<option value="Abaine" dtlat="56.9333300" dtlon="26.8500000">Abaine</option>

现在注意围绕lat和lon值的引号.

看一下while循环的波纹管：

while ($donnees = MysqLi_fetch_array($result2)) {     
    echo'<option value="'.$donnees['namePlace'].'" dtlat="'.$donnees['Latitude'].'" dtlon="'.$donnees['Longitude'].'">'.
        $donnees['namePlace'].
    '</option>';       
}

这里：dtlat =“’.$donnees [‘Latitude’].’”.注意双引号.并假设您的列名称为“纬度”和“经度”.否则,只需输入正确的名称：

最后：

和JS：

var sel = document.getElementById("namePlace");

sel.onchange = function() {
    var lat = this[this.selectedindex].getAttribute("dtlat");
    var lon = this[this.selectedindex].getAttribute("dtlon");
    newMark(lat, lon);
}

function newMark(lat, lng){             
    var mark = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lon),
    map: carte});
}

最终观察：

google.maps函数可能正在等待浮点值,我们在此处发送一个字符串newMark(lat,lon).如果这两种方法都不起作用,请尝试使用newMark(parseFloat(lat),parseFloat(lon)).

最后一件事：我觉得这行很奇怪：位置：new google.maps.LatLng(lat,lon),.直到现在我才意识到.看来您已经实例化了google.maps对象,因此它可能应该是：position：google.maps.LatLng(lat,lon),.但是我对此不太确定,因此请牢记这一点.让我知道你的状况.我们将解决这个问题.

Javascript-使用mySQL,Php和JS,如何请求Dans使用我数据库中的数据？

相关推荐