Javascript 从数据库检索数据显示错误
我试图从数据库中获取数据并将其传递给javascript，以便在google地图上显示为标记。当我使用javascript var markers变量时，它工作得很好，但是当我尝试获取数据库数据，将其传递给数组，对其进行编码，并在javascript中使用它时，会产生这种不清楚的错误 误差） 这是我的密码Javascript 从数据库检索数据显示错误,javascript,php,mysql,json,google-maps,Javascript,Php,Mysql,Json,Google Maps,我试图从数据库中获取数据并将其传递给javascript，以便在google地图上显示为标记。当我使用javascript var markers变量时，它工作得很好，但是当我尝试获取数据库数据，将其传递给数组，对其进行编码，并在javascript中使用它时，会产生这种不清楚的错误 误差） 这是我的密码 <?php /* Database connection settings */ $host = 'localhost'; $user = 'root'; $pass = ''; $db
<?php
/* Database connection settings */
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'location_db';
$mysqli = new mysqli($host,$user,$pass,$db) or die($mysqli->error);
$coordinates = array();
// Select all the rows in the markers table
$query = "SELECT `locationLatitude`, `locationLongitude`,'ID' FROM
`location_tab` ";
$result = $mysqli->query($query) or die('data selection for google map
failed: ' . $mysqli->error);
while ($row = mysqli_fetch_array($result)) {
$latitudes = $row['locationLatitude'];
$longitudes = $row['locationLongitude'];
$ID= $row['ID'];
$coordinates[]= array('id'=>$ID,'lat'=>$latitudes,'lng'=>$longitudes );
}
$markerss= json_encode($coordinates);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Add Google Map with multiple markers to your website</title>
<style>
body { font-family:Arial, Helvetica, sans-serif; font-size:14px; }
h1 { clear:both; margin-bottom:30px; font-size:17px; }
h1 a { font-weight:bold; color:#0099FF; }
span { clear:both; display:block; margin-bottom:30px; }
span a { font-weight:bold; color:#0099FF; }
#google_map { width:100%; height:500px; border:1px dashed #000; }
</style>
</head>
<body>
<div class="contentDiv">
<div id="google_map"></div>
</div><!-- end of .contentDiv -->
<script type="text/jscript">
function initiateGoogleMap() {
//Some properties we want to pass to the map
var options = {
mapTypeId: google.maps.MapTypeId.ROADMAP //All map types are --
ROADMAP/SATELLITE/HYBRID/TERRAIN
};
//Initializing the map
var map = new google.maps.Map(document.getElementById('google_map'),
options);
//map.setTilt(45);
//google maps data from database
<?php
echo "var markerss=$markerss;\n";
?>
//Multiple Markers
var markers = [
['CAD-CAM Robotics Lab, Mechanical Engineering Department', 22.318861,
87.312747],
['Technology Guest House', 22.315967, 87.303832],
['Visveswaraya Guest House', 22.314685, 87.305177],
['G S Sanyal School of Telecommunications(GSST)', 22.317067,
87.312221],
['Technology Market', 22.314625, 87.300049],
['Central Research Facility', 22.320527, 87.313855],
['Naval Architecture Department', 22.320745, 87.314929],
['Central Library', 22.320189, 87.309660],
['School of Medical Science & Technology', 22.315848, 87.310758],
['Mining Department', 22.321509, 87.311274]
];
//Info Contents
var infoContents = [
["CAD-CAM Robotics Lab", "CAD-CAM Robotics Lab, Mechanical Engineering
Department, Indian Institute of Technology Kharagpur, India"],
["Technology Guest House", "Technology Guest House, Indian Institute
of Technology Kharagpur, India"],
["Visveswaraya Guest House", "Visveswaraya Guest House, Indian
Institute of Technology Kharagpur, India"],
["G S Sanyal School of Telecommunications(GSST)", "G S Sanyal School
of Telecommunications(GSST), Indian Institute of Technology Kharagpur,
India"],
["Technology Market", "Technology Market, Indian Institute of
Technology Kharagpur, India"],
["Central Research Facility", "Central Research Facility, Indian
Institute of Technology Kharagpur, India"],
["Naval Architecture Department", "Naval Architecture Department,
Indian Institute of Technology Kharagpur, India"],
["Central Library", "Central Library, Indian Institute of Technology
Kharagpur, India"],
["School of Medical Science & Technology", "School of Medical Science
& Technology, Indian Institute of Technology Kharagpur, India"],
["Mining Department", "Mining Department, Indian Institute of
Technology Kharagpur, India"],
];
var bounds = new google.maps.LatLngBounds();
//Create an object of InfoWindow class
var infoWindow = new google.maps.InfoWindow();
var marker, i;
// Loop through markers array and place each marker on the map
for(i=0; i<markerss.length; i++) {
var marker_position = new google.maps.LatLng(markerss[i][1],
markerss[i][2]);
bounds.extend(marker_position);
marker = new google.maps.Marker({
position: marker_position,
map: map,
title: markerss[i][0]
});
//Assign each marker an info window, which will display in click event
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent('<strong>'+infoContents[i][0]+'</strong>
<br/><br/>'+infoContents[i][1]);
infoWindow.open(map, marker);
}
})(marker, i));
//Automatically center the map, so that all markers fit on the screen
map.fitBounds(bounds);
}
//Override zoom level of the map
var boundsListener = google.maps.event.addListener((map), 'bounds_changed',
function(event) {
this.setZoom(15);
google.maps.event.removeListener(boundsListener);
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyC-dFHYjTqEVLndbN2gdvXsx09jfJHmNc8&callback=initiateGoogleMap">
</script>
</body>
</html>
将带有多个标记的谷歌地图添加到您的网站
正文{字体系列：Arial，Helvetica，无衬线；字体大小：14px；}
h1{清除：两个；页边距底部：30px；字体大小：17px；}
h1a{字体大小：粗体；颜色：#0099FF；}
span{清除：两者；显示：块；页边距底部：30px；}
span a{字体大小：粗体；颜色：#0099FF；}
#谷歌地图{宽度：100%；高度：500px；边框：1px虚线#000；}
函数InitiateLogleMap（）{
//我们要传递到地图的某些属性
变量选项={
mapTypeId:google.maps.mapTypeId.ROADMAP//所有地图类型都是--
路线图/卫星/混合动力/地形
};
//初始化地图
var map=new google.maps.map（document.getElementById（'google_-map'），
选择权）；
//地图.设置倾斜（45）；
//谷歌地图数据库中的数据
//多重标记
变量标记=[
[“机械工程系CAD-CAM机器人实验室”，22.318861，
87.312747],
[“科技宾馆”，22.315967，87.303832]，
['Visveswaraya宾馆'，22.314685，87.305177]，
['G S Sanyal电信学校（GSST）'，22.317067，
87.312221],
[“技术市场”，22.31462587.300049]，
[“中央研究机构”，22.320527，87.313855]，
[“海军建筑部”，22.320745，87.314929]，
[中央图书馆，22.320189，87.309660]，
[“医学科学与技术学院”，22.315848，87.310758]，
[采矿部，22.321509，87.311274]
];
//信息内容
var infoContents=[
[“CAD-CAM机器人实验室”，“CAD-CAM机器人实验室，机械工程
印度哈拉格布尔印度理工学院系”]，
[“技术招待所”、“印度研究所技术招待所”
印度哈拉格布尔科技公司“]，
[“维斯瓦拉亚招待所”，“维斯瓦拉亚招待所，印度
印度哈拉格布尔理工学院”]，
[“G S Sanyal电信学校（GSST）”，“G S Sanyal学校”
印度哈拉格布尔理工学院电信研究所（GSST），
印度“]，
[“技术市场”，“技术市场，印度科学院”
印度哈拉格布尔科技公司“]，
[“中央研究机构”，“中央研究机构，印度
印度哈拉格布尔理工学院”]，
[“海军建筑部”、“海军建筑部、，
印度哈拉格布尔印度理工学院”]，
[“中央图书馆”，“中央图书馆，印度理工学院”
印度哈拉格布尔“]，
[“医学科学与技术学院”、“医学科学学院”
&技术，印度哈拉格布尔印度理工学院“]，
[“采矿部”，“采矿部，印度矿业研究所
印度哈拉格布尔科技公司“]，
];
var bounds=new google.maps.LatLngBounds（）；
//创建InfoWindow类的对象
var infoWindow=new google.maps.infoWindow（）；
var标记，i；
//循环遍历标记数组并将每个标记放置在地图上
对于（i=0；i您有一个没有别名的字符串'ID'，这会对$rows数组中的无效索引产生错误（可能是您试图选择列ID，但错误地添加了单引号，然后将select LOCATIONLATIONE、LOCATIONLATIOND、'ID'更改为ID）
使用选择位置纬度、位置经度、ID）
替换中的以下代码
//google maps data from database
<?php
echo "var markerss=$markerss;\n";
?>
//谷歌地图数据库中的数据
到
//谷歌地图数据库中的数据
var markerss=
你好，scaisEdge我尝试了你的代码片段，但错误仍然是一样的。有什么建议吗？错误）；$coordinates=array（）；//选择标记表中的所有行$query=“Select locationLatitude，locationLongitude，'ID'AS ID FROM location_tab”；$result=$mysqli->query（$query）或die（'google地图的数据选择失败：'.$mysqli->错误）；while（$row=mysqli_fetch_数组（$result））{$latitudes=$row['locationLatitude']；$longitues=$row['locationLatitude']；$ID=$row['ID']；$coordinations[]=array（'ID'=>ID，'lat=>latitudes，'lng'=>latitudies）；print$r（$coordinations）；$markers=json=json编码（$coordinations）；？>
<?php
$coordinates = array();
// Select all the rows in the markers table
$query = "SELECT locationLatitude, locationLongitude, 'ID' AS ID FROM location_tab ";
$result = $mysqli->query($query) or die('data selection for google map failed: ' . $mysqli->error);
while ($row = mysqli_fetch_array($result)) {
$latitudes = $row['locationLatitude'];
$longitudes = $row['locationLongitude'];
$ID= $row['ID'];
$coordinates[]= array('id'=>$ID,'lat'=>$latitudes,'lng'=>$longitudes );
print_r($coordinates);
}
$markerss= json_encode($coordinates);
?>
var markerss= <?= $markerss; . ';\n' ?>
//google maps data from database
<?php
echo "var markerss=$markerss;\n";
?>