Question

我想做什么：当用户在选择字段中选择一个位置时，函数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 onload="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 onload="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>

Answer 1

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

<强> EDITED

在您的问题中，您在尝试我的解决方案时发布了这一行：

<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>';       
}

HERE ：dtlat="'.$donnees['Latitude'].'"。请注意双引号。这假设您的列名称为Latitude和Longitude。否则，只需输入正确的名称：

最后：

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))。

最后一件事：我觉得这句话很奇怪：position: new google.maps.LatLng(lat, lon),。我现在还没有意识到。您似乎已经实例化了对象google.maps，因此它应该是：position: google.maps.LatLng(lat, lon),。但我对此并不十分肯定，所以请在最后的时候牢记这一点。让我知道你是怎么做的。我们会解决这个问题。

Answer 2

您可以在while循环中尝试这样的事情。

$lat = $donnees['Latitude'];
$lon = $donnees['Longitude'];
echo "<script type='text/javascript'>newMark('$lat', '$lon');</script>";

您可以将它放在您可能想要调用JavaScript的页面上的任何位置。确保在页面上的某个位置定义函数非常重要。

如果您想将其嵌入按钮，则可能需要执行以下操作：

$lat = $donnees['Latitude'];
$lon = $donnees['Longitude'];
echo "<button type='button' onclick='newMark($lat, $lon);'>Click Me</button>";

使用mySQL，Php和JS，如何请求dans使用我在数据库中的数据？

2 个答案: