gpt4 book ai didi

javascript - 从 HTML 中的 php 服务检索值

转载 作者:行者123 更新时间:2023-11-29 12:09:32 25 4
gpt4 key购买 nike

我正在尝试构建一个网站,该网站显示谷歌地图以及我编写的 php 服务中的用户位置(纬度/经度)。

我已经有一个 php 脚本,它从移动应用程序获取纬度/经度(通过客户端的 POST),将其存储在数据库中,然后从数据库读回两个变量,我们称它们为 $lat 和$长。为了确保 $lat 和 $long 中有正确的值,我做了一个简单的 echo 并得到了两个值。

我正在努力理解如何从我的index.html 脚本中读取这些值。我见过的所有示例都建议将 php 代码保留在 html 文件中,但我宁愿将它们分开。我也不确定如何将这些值分配给 HTML/Javacript 中的参数,以便我可以实际在 map 上显示它们。

所以我的问题是: 1. 如何从 HTML 调用该 php 文件? 2. 如何从 php 服务读取 $lat 和 $long 并将它们分配给 HTML/Javascript 中可以在 map 上显示的参数?

编辑:这是我的 PHP 代码和我的 index.html(这是 Google map v3 文档中的 1:1 副本)。

位置.php:

$content = file_get_contents('php://input');
$post_data = json_decode($content , true);
$lat = $post_data['lat'];
$long = $post_data['long'];

//CONNECT TO MYSQL
$con1 = mysql_connect("localhost", "xxxxx", "yyyy", "zzzzz");
if ($con1->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
}
if (!$db_selected) {
die ('Can\'t use foo : ' . mysql_error());
}

if (!empty($lat)) {
$sql = "INSERT INTO LocationInfo (latitude, longitude)

VALUES ('$lat', '$long');";
mysql_query($sql) or die ('Error updating database: ' . mysql_error());
}

$read_query = "SELECT * FROM LocationInfo;";
$results = mysql_query($read_query) or die ('Error reading from database: ' . mysql_error());
$column = array();

while($row = mysql_fetch_array($results)){
$column[] = $row;
}


$current_lat = $column[sizeof($column) - 1]['latitude'];
$current_long = $column[sizeof($column) - 1]['longitude'];

echo $current_lat;
echo $current_long;

?>

index.html:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>My GeoLocation</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>

var map;

function initialize() {
var mapOptions = {
zoom: 14
};

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);

var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});

最佳答案

在 Javascript 中获取这些变量的最简单方法是将它们从 PHP 输出到 JS,没有直接的桥梁,因此您需要在 HTML 输出中使用一个脚本 block ,其中包含从 SQL 查询中获得的值,它将像这样:

<script>
var lat = <?php echo $lat ?>;
var long = <?php echo $long ?>;
</script>

现在您可以在 JavaScript 中使用此变量来调用 map ,请注意,您也可以将变量定义添加到主 JS block 中。

编辑:将index.html重命名为index.php

<?php include_once('location.php') ?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>My GeoLocation</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>

var map;

function initialize() {
// var myLatlng = new google.maps.LatLng(<?php echo $lat ?>,<?php echo $long ?>);
var mapOptions = {
zoom: 14
//mapTypeId: google.maps.MapTypeId.ROADMAP
//center: myLatlng
};

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);

var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});

关于javascript - 从 HTML 中的 php 服务检索值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30926279/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com