Question

晚安，我试图用JSON在地图上显示标记但是我不能和我不知道为什么，我可以看到地图并且可以在它周围移动但是甚至没有一个标记显示，

<?php
require("config.php");
/* lat/lng data will be added to this array */
$locations=array();
$query =  $db->query('SELECT * FROM inmuebles');
    while( $row = $query->fetch() ){

        $longitude = $row['long'];                              
        $latitude = $row['lat'];

        /* Each row is added as a new array */
        $locations[]=array('lat'=>$latitude, 'long'=>$longitude );
    }
    /* Convert data to json */
    $markers = json_encode( $locations );

    echo $markers;
  ?>
 <script type='text/javascript'>
<?php
    echo "var markers=$markers;\n";

?>
var map;
    var markersArray = [];

function initMap() {

    var latlng = new google.maps.LatLng(-16.5338955,-68.0656364);
    var myOptions = {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    var infowindow = new google.maps.InfoWindow(), marker, lat, long;
    var json=JSON.parse( markers );

    for( var o in json ){

        lat = json[ o ].lat;
        long=json[ o ].long;

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,long),
            map: map
        }); 
        google.maps.event.addListener( marker, 'click', function(e){
            infowindow.setContent( this.name );
            infowindow.open( map, this );
        }.bind( marker ) );
    }
}
</script>

$ markers的输出是

[{"lat":"-16.52629052070058","long":"-68.0797004699707"},{"lat":"-16.500122130208325","long":"-68.12089920043945"},{"lat":"-16.54307592346882","long":"-68.06425094604492"}]

在此先感谢我一直在努力查看错误的位置

修改

<?php
$con = mysqli_connect('localhost','waru','olairhead154','inmueble');
?>
 <?php
require("config.php");
/* lat/lng data will be added to this array */
$locations=array();
$query =  $db->query('SELECT * FROM inmuebles');
    while( $row = $query->fetch() ){

        $longitude = $row['long'];                              
        $latitude = $row['lat'];

        /* Each row is added as a new array */
        $locations[]=array('lat'=>$latitude, 'long'=>$longitude );
    }
    /* Convert data to json */
    $markers = json_encode( $locations );


    echo $markers;
 ?>
 <script type='text/javascript'>
 <?php
    echo "var markers=$markers;\n";

?>
var map;
    var markersArray = [];

function initMap() {

    var latlng = new google.maps.LatLng(-16.5338955,-68.0656364);
    var myOptions = {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    var markers = '<?= json_encode($markers) ?>';
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    var infowindow = new google.maps.InfoWindow(), marker, lat, long;
    var json=markers;
    for( var o in json ){

        lat = json[ o ].lat;
        long=json[ o ].long;

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,long),
            map: map
        }); 
        google.maps.event.addListener( marker, 'click', function(e){
            infowindow.setContent( this.name );
            infowindow.open( map, this );
        }.bind( marker ) );
    }
}
google.maps.event.addDomListener(window, "load", initMap);
</script>

这是我所做的更改，但仍然没有标记显示我真的很新，请耐心等待我

感谢

Answer 1

如果您只是将 $ marker 中的 $ markers 与 json_encode（）函数一起回显，那就更好了。之后，您可以创建一个新的js变量 var markersJson ，值为 JSON.parse（markers）（您需要将其解析为JSON，否则它会给出你错了）。从那里，您可以使用javascript .map（）函数（高阶函数）迭代数组并将其显示为Google地图标记。

有关Google地图标记的详细信息，请查看 this 链接。

来自表格inmuebles的样本坐标：

<?php 
   $markers = array( 
         array( 'lat' => -16.52629052070058, 'lng' => -68.0797004699707 ),
         array( 'lat' => -16.500122130208325, 'lng' => -68.12089920043945 ),
         array( 'lat' => -16.54307592346882, 'lng' => -68.06425094604492 )
   );
?>

用json_encode（）回显$标记到var标记：

var markers = '<?= json_encode($markers) ?>';

将标记解析为json：

var markersJson = JSON.parse(markers);

遍历数组并将坐标显示为Google Maps Markers

var plotMarkers = markersJson.map(function(value, index){
 var marker = new google.maps.Marker({
   position : new google.maps.LatLng( value.lat, value.lng ),
   map: map,
   title : 'Hello'
 });
 return marker;
});

这里的整个代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Google Maps - PHP Markers Implementation</title>
        <style type="text/css">
            html,body {
                height:100%;
            }
            body {
                width:100%;
            }
            #map_canvas {
                width:100%;
                height:100%;
            }
        </style>
    </head>
    <body>
        <div id="map_canvas"></div>
         <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
         <script type="text/javascript">
            <?php 
                $markers = array( 
                    array( 'lat' => -16.52629052070058, 'lng' => -68.0797004699707 ),
                    array( 'lat' => -16.500122130208325, 'lng' => -68.12089920043945 ),
                    array( 'lat' => -16.54307592346882, 'lng' => -68.06425094604492 )
                );
            ?>  
            function initMap() {
                var markers = '<?= json_encode($markers) ?>';
                var markersJson = JSON.parse(markers);
                var latlng = new google.maps.LatLng(-16.5338955,-68.0656364);
                var myOptions = {
                    zoom: 13,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                };  
                var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
                var plotMarkers = markersJson.map(function(value, index){
                    var marker = new google.maps.Marker({
                        position : new google.maps.LatLng( value.lat, value.lng ),
                        map: map,
                        title : 'Hello'
                    });
                    return marker;
                });
            }
         </script>
    </body>
</html>

mysql标记未在地图上显示

1 个答案: