如何使用PHP和数据库中的位置在Google地图上设置点？

debugcn 发表于 Dev

阿尔梅达

我有一个数据库和一个名为markers的表。在此表中，有一些我想使用Google地图在地图上标记的特定位置的坐标。我可以在网站上设置地图，但是当我尝试使用php标记位置时，出现此错误“ Uncaught TypeError：无法读取null的属性'offsetWidth'”。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>X</title>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/estilos.css" rel="stylesheet">

    <style type="text/css">
            #map {
                width:  100%;
                height: 700px;
            }
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false"></script>
        <script type="text/javascript">

         $(document).ready(function(){
            google.maps.event.addDomListener(window, 'load', init);


                 function init() {
                     var mapOptions = {                                    
                    zoom: 15,
                    center: new google.maps.LatLng(40.2118735,-8.4240415,16);
                    styles: [   {featureType:"administrative",elementType:"all",stylers:[{visibility:"on"},{saturation:-100},{lightness:20}]},  {featureType:"road",elementType:"all",stylers:[{visibility:"on"},{saturation:-100},{lightness:40}]},    {featureType:"water",elementType:"all",stylers:[{visibility:"on"},{saturation:-10},{lightness:30}]},    {featureType:"landscape.man_made",elementType:"all",stylers:[{visibility:"simplified"},{saturation:-60},{lightness:10}]},   {featureType:"landscape.natural",elementType:"all",stylers:[{visibility:"simplified"},{saturation:-60},{lightness:60}]},    {featureType:"poi",elementType:"all",stylers:[{visibility:"off"},{saturation:-100},{lightness:60}]},    {featureType:"transit",elementType:"all",stylers:[{visibility:"off"},{saturation:-100},{lightness:60}]}]
                };

                var mapElement = document.getElementById('map');

                var map = new google.maps.Map(mapElement, mapOptions);   
                 }
                });


        </script>

  </head>
<?php
    include ('headbar.php');
    require ('conexao.php');
    $getpoints = mysql_query("SELECT * FROM markers");
    if(!$result = $con->query($getpoints)){die('There was an error running the query [' . $con->error . ']');
      } else {
        while ($row = $result->fetch_assoc()) {
     echo 'var myLatlng1 = new google.maps.LatLng('.$row[lat].', '.$row[lng].'); 
                var marker1 = new google.maps.Marker({ position: myLatlng1, map: map, title:"'.$row[name].'"});';
    }
  }
?>
    <body>
    <div class="container-fluid">
      <div id="map"></div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

我不知道问题出在哪里，对此我将提供一些帮助。

乔纳森·克罗（Jonathan Crowe）

首先将PHP值存储到javascript数组中

在页面顶部：

require ('conexao.php');
$points = array();
$result = mysql_query("SELECT * FROM markers");

if(!$result){
     die('There was an error running the query [' . $con->error . ']');
} else {
    while ($row = mysql_fetch_assoc($result)) {
        $points[] = array('lat' => $row['lat'], 'lng' => $row['lng'], 'name' => $row['name']);
    }
}


<script type="text/javascript">
     var points = <?php echo json_encode($points); ?>;
     $(document).ready(function(){
        google.maps.event.addDomListener(window, 'load', init);

             function init() {
                 var mapOptions = {                                    
                     zoom: 15,
                     center: new google.maps.LatLng(40.2118735,-8.4240415,16),
                     styles: [  {featureType:"administrative",elementType:"all",stylers:[{visibility:"on"},{saturation:-100},{lightness:20}]},  {featureType:"road",elementType:"all",stylers:[{visibility:"on"},{saturation:-100},{lightness:40}]},    {featureType:"water",elementType:"all",stylers:[{visibility:"on"},{saturation:-10},{lightness:30}]},    {featureType:"landscape.man_made",elementType:"all",stylers:[{visibility:"simplified"},{saturation:-60},{lightness:10}]},   {featureType:"landscape.natural",elementType:"all",stylers:[{visibility:"simplified"},{saturation:-60},{lightness:60}]},    {featureType:"poi",elementType:"all",stylers:[{visibility:"off"},{saturation:-100},{lightness:60}]},    {featureType:"transit",elementType:"all",stylers:[{visibility:"off"},{saturation:-100},{lightness:60}]}]
                 };
                 var mapElement = document.getElementById('map');
                 var map = new google.maps.Map(mapElement, mapOptions);   

                  for (var i=0,l=points.length;i<l;i++) {
                      var latLng = new google.maps.LatLng(points[i].lat, points[i].lng); 
                      var marker1 = new google.maps.Marker({ position: latLng, map: map, title:points[i].name});
                  }
             }                 
      });


</script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。