【发布时间】：2019-10-07 04:57:40
【问题描述】：
嗨，我需要帮助才能在我的网页中显示地图我不知道为什么我无法显示地图，在我的代码下方我更新了谷歌密钥：
<?php
session_start();
include '../../WSweb/serv.php';
if(isset($_SESSION['user']) )
{
if ($_SESSION["id"]==1)
{
$ID_Bodega=$_SESSION["ID_Bodega"];
include ("../conexion.php");
$sql=mysqli_query($con,"select * from `tabla`.`Datos` where `Datos`.`ID_Bodega`='$ID_Bodega' ");
while($row=mysqli_fetch_array($sql))
{
$lat=$row['latitud'];
$lng=$row['longitud'];
}
//mysqli_close($bd);
?>
<?php require_once('../../Connections/catalogo.php'); ?>
<html lang="es">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=Cambiar aqui"></script>
<!-- TemplateBeginEditable name="doctitle"
</script>
-->
<title>Pedidos</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../../CSS/styles/eCommerceStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
//var pint=new google.maps.LatLng(20.6416592,-103.3492883);
center: new google.maps.LatLng(<?php echo $lat.', '.$lng; ?>),
zoom: 11,
mapTypeId: 'roadmap'
});
downloadUrl("../../Bodega/mark3.php", function(data) {
var xml = data.responseXML;
var mark3 = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < mark3.length; i++) {
var name = mark3[i].getAttribute("ID_Bodega");
var point = new google.maps.LatLng(
parseFloat(mark3[i].getAttribute("lat")),
parseFloat(mark3[i].getAttribute("lng"))
);
var marker = new google.maps.Marker({
position: point
//,center:point
, map: map
,});
}
});
downloadUrl("../../Bodega/markers.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("id");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var icon = '../../Bodega/marker1.png';
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon
});
var popup = new google.maps.InfoWindow({
content: '<a href="../../Bodega/mostrar?recordID='+name+'">ver '+name+'</a>'});
popup.open(map, marker);
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body>
<div class="container">
<div class="header"><div class="headerint"><!-- end .header --><img src="../logo.jpg" width="200" height="33" alt="logo" /></div></div>
<div class="subcontenedor">
<div class="sidebar1">
<?php include("../Includes/Admin.php");
?>
<!-- end .sidebar1 --></div>
<div
class="content" onload="load()" ><!-- TemplateBeginEditable name="contenido" -->
<h1> Mapa</h1>
<div id="map"></div>
<!-- TemplateEndEditable -->
<!-- end .content --></div>
</div>
<div class="footer">
<?php include("../Includes/foot.php");
?>
<!-- end .footer --></div>
<!-- end .container -->
</div>
</body>
</html>
<?php
}
else
{
echo '<script> window.location="../index"; </script>';
}
}
else
{
echo '<script> window.location="../index"; </script>';
}
?>
这是 CSS，老实说，我认为问题出在 Css 中，但我不知道：
@charset "utf-8";
body {
font: 90%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000;
}
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px; }
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #000000;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 100%;
background: #FFF;
margin: 0 auto;
}
.header {
background: #954a9a;
}
.sidebar1 {
float: left;
width: 200px;
background: #e2a5e6;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
float: left;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
margin-bottom: 15px;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #ADB96E;
color: #FFF;
}
.footer {
padding: 10px 0;
background: #954a9a;
position: relative;
clear: both;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#info {
font-size: 18px;
background: #ffffff;
width: 350px;
border-radius: 6px;
text-align: center;
color: #666666;
border: solid 1px #666666;
margin: auto;
padding: 3px;
}
#enviar {
background: #fff;
font-size: 22px;
text-align: left;
color: #000;
margin: 10px 60px;
padding:3px 10px 3px 10px;
border-radius: 6px;
}
#respuesta {
margin: auto 60px;
}
#googleMap {
margin: 10px auto;
width:90%;
height:90%;
border: 2px solid #666666;
border-radius: 6px;
}
#map {
margin: 10px auto;
/* width: 90%; */
height: 80%;
border: 2px solid #666666;
border-radius: 6px;
}
.titular {
background: #ffffff;
font-size: 32px;
color: #000;
margin: 40px auto;
text-align: center;
width: 50%;
padding:3px 10px 3px 10px;
border-radius: 6px;
border: solid 1px #999999;
}
注意：显然更改密钥，如果我尝试使用空白 html 地图可以工作，有人可以帮助解决这个问题，我将非常感激
我附上了一张图片，你可以看到我的最终结果，我从来没有看到过地图:(
【问题讨论】：
-
为什么要提供只包含部分代码的sn-p？为什么您的脚本包含阻止任何人运行您的代码的 PHP？您尝试过什么来解决此问题？你有没有尝试调试任何东西？您在 js 控制台中收到任何错误吗？等等等等等等。
标签： javascript php html google-maps