使用 mySQL、Php 和 JS，我如何请求 dans 使用我在数据库中的数据
Using mySQL, Php and JS, how do I request dans use data I have in my DB?
我想做的是：当用户在选择字段中选择一个位置时，函数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>
你的数据库中也有纬度和经度吗？在这种情况下，您也可以使用该信息填充选项：
编辑
在您的问题中，由于尝试了我的解决方案，您发布了这一行：
<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), .但我对此不太确定，所以在万不得已的情况下请记住这一点。让我知道你是怎么做到的。我们将解决这个问题。
你也许可以在你的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>";
相关文章：
- 用程序搜索JQuery数据表中的文本
- 要求输入在数据列表中
- 正在将数据主题添加到所有项目
- 函数参数中的数据与指定变量之间的任何性能差异
- 在VanillaJS中模拟模型双向数据绑定
- CSS-如何定位内容数据标题
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 无法在数据endVal中设置值=“”;｛｛ucount｝｝”;使用Angular JS的CountUp
- 序列化数据属性中对象的最可靠方法
- 如何将JSON数据导入我的ejs模板
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 画布数据到图像
- 使用jquery将mysql数据获取到新的表行中
- 使用html中的外部javascript进行数据验证
- 有时数据是't显示在浏览器中
- React中的数据集表示
- Angular只从数组中获取所需的数据
- 无法将数据从firebase获取到我的html页面
- 使用 mySQL、Php 和 JS，我如何请求 dans 使用我在数据库中的数据
