Question

嗨，我需要帮助才能将地图显示到我的网页中，我不知道由于什么原因我无法显示地图，我在代码下方更新了Google密钥：

union

这是CSS，老实说，我认为问题出在CSS中，但我不知道：

 <?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>';
}
?>

注意：显然，更改密钥，如果我尝试使用空白html的地图，则可以解决此问题，我将非常感谢

我附上了一张图片，您可以看到我得到的最终结果，但我从未看过地图：（

Answer 1

确保#map元素的父级具有足够的宽度和高度以显示地图。

在您的CSS中添加以下代码会有所帮助：

#map {
min-width:500px;
min-height:500px;
}

为什么我看不到地图显示在页面上？只有当我添加CSS格式时才会发生

1 个答案: