Question

我有这些代码从数据库中获取lat和lng并在谷歌地图上显示标记，但它不会显示任何标记。

<!doctype html>
<html>
<head>
    <meta charset='utf-8'/>
    <title>Google Maps</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src='https://maps.google.com/maps/api/js?key=AIzaSyAKcut1aeRFdjPTS5QPefgbrnQIAVkGuis' type='text/javascript'></script>
    <script type='text/javascript'>
        (function(){

            var map,marker,latlng,bounds,infowin;
            /* initial locations for map */
            var _lat=14.676;
            var _lng=121.0437;



            function showMap(){
                /* set the default initial location */
                latlng={ lat: _lat, lng: _lng };

                bounds = new google.maps.LatLngBounds();
                infowin = new google.maps.InfoWindow();

                /* invoke the map */
                map = new google.maps.Map( document.getElementById('map'), {
                   center:latlng,
                   zoom: 10
                });

                /* show the initial marker */
                marker = new google.maps.Marker({
                   position:latlng,
                   map: map,
                   title: 'Hello World!'
                });
                bounds.extend( marker.position );


                /* I think you can use the jQuery like this within the showMap function? */
                $.ajax({
                    url: get.php,
                    data: {'ajax':true },
                    dataType: 'json',
                    success: function( data, status ){
                        $.each( data, function( i,item ){
                            /* add a marker for each location in response data */ 
                            addMarker( item.lat, item.lng, item.name );
                        });
                    },
                    error: function(){
                        output.text('There was an error loading the data.');
                    }
                });                 
            }

            /* simple function just to add a new marker */
            function addMarker(lat,lng,title){
                marker = new google.maps.Marker({/* Cast the returned data as floats using parseFloat() */
                   position:{ lat:parseFloat( lat ), lng:parseFloat( lng ) },
                   map:map,
                   title:title
                });

                google.maps.event.addListener( marker, 'click', function(event){
                    infowin.setContent(this.title);
                    infowin.open(map,this);
                    infowin.setPosition(this.position);
                }.bind( marker ));

                bounds.extend( marker.position );
                map.fitBounds( bounds );
            }


            document.addEventListener( 'DOMContentLoaded', showMap, false );
        }());
    </script>
    <style>
        html, html body, #map{ height:100%; width:100%; padding:0; margin:0; }
    </style>
</head>
<body>
    <div id='map'></div>
</body>

这是我的get.php，它从数据库中获取数据。

$mysql ="SELECT lat,lng FROM `coordinates`";
$result = mysqli_query($connect, $mysql);
if (!empty($result))
{

while ($row=mysqli_fetch_array($result))
{
    $latlng[] = array(
    'lat' => $row['lat'], 
    'lng' => $row['lng'],
    );

  }
 }

  mysqli_close($connect);

 header('Content-Type:application/json');
  echo json_encode($latlng);
 ?>

这个正在运行并从数据库中获取lat和lng，但标记仍未显示在Google地图中。有人可以告诉我为什么吗？

Answer 1

您没有从数据库中选择＆＃34; name＆＃34; ，但您使用item.name作为 addMarker（）功能的参数。

所以将你的mysql查询更改为：

"SELECT lat,lng,name FROM `coordinates`";

然后添加到数组：

$latlng[] = array(
'lat' => $row['lat'], 
'lng' => $row['lng'],
'name' => $row['name']
);

我尝试了你的javascript代码，看起来添加标记可以在没有ajax的情况下运行。请在您的问题中添加JSON字符串。

如果您仍然在使用AJAX添加标记时遇到问题，您应该发送JSON（只需在浏览器中打开 get.php ）并检查开发者控制台中是否有任何错误 - 对于Firefox（CTRL） + SHIFT + K）。

标记未显示在地图上

1 个答案: