个人中心
gpt4 book ai didi

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

转载 作者：可可西里 更新时间：2023-11-01 08:16:09 24 4
gpt4 key购买 nike

我想做什么:当用户在选择字段中选择一个位置时，newMark() 函数会在 google.maps 上放置一个标记；

我现在实现了什么:显示 map ，选择字段以及保存在我的数据库中的所有位置。

我有一个数据库，其中包含一个名为 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>

最佳答案

你的数据库里也有纬度和经度吗？在这种情况下，您也可以使用该信息填充您的选项:

已编辑

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

<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'].'"。注意双引号。这是假设您的列名称是 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),。但我对此不太确定，所以请记住这一点，只是最后的手段。让我知道你是怎么做的。我们会解决这个问题。

关于javascript - 使用 mySQL、Php 和 JS，我如何请求 dans 使用我数据库中的数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27475074/

24 4 0
文章推荐： android 在选项卡切换上执行操作
文章推荐： c# - 检查用户是否在 asp.net mvc Identity 中扮演角色
文章推荐： php session 错误注销
文章推荐： mysql - 如何使用 Workbench GUI 更改 MySQL 5.6.22 数据目录？
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com