谷歌地图弹出窗口里面没有显示任何东西

Question

i am using PHP MYSQL on WordPress with Google Map API where the code retrieve data from the MYSQL database and display markers on the map based on the existing coordinates in the database.我在带有 Google Map API 的 WordPress 上使用 PHP MYSQL，其中代码从 MYSQL 数据库中检索数据并根据数据库中的现有坐标在地图上显示标记。 also it display a infowindow on click Listener.它还在单击侦听器上显示信息窗口。

the problem is that the infow window doesn't shows any data inside of it.问题是 infow 窗口不显示其中的任何数据。

can anyone one tel me where is the error?谁能告诉我错误在哪里？

code:代码：

<?php
        /*
        Template Name: MAP2
        */

        get_header();
  ?>


<!DOCTYPE html>
<html>
  <head>
    <title>Custom Markers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=**********&callback=initMap">
    </script>
     <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 600px;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

  </head>
  <body>
    <div id="map"></div>

    <script>

     var map,currentPopup;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: new google.maps.LatLng(33.888630, 35.495480),
          mapTypeId: 'roadmap'
        });

        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var icons = {
          parking: {
            icon: iconBase + 'parking_lot_maps.png'
          },
          library: {
            icon: iconBase + 'library_maps.png'
          },
          info: {
            icon: iconBase + 'info-i_maps.png'
          }
        };




        function addMarker(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            //icon: icons[feature.type].icon,

            map: map
          });

          var popup = new google.maps.InfoWindow({
                    content: feature,
                    maxWidth: 300
                });

          google.maps.event.addListener(marker, "click", function() {
                    if (currentPopup != null) {
                        currentPopup.close();
                        currentPopup = null;
                    }
                    popup.open(map, marker);
                    currentPopup = popup;
                });
                google.maps.event.addListener(popup, "closeclick", function() {
                    map.panTo(center);
                    currentPopup = null;
                });
        }



        var features = [
        <?php
          global $wpdb;
            $prependStr ="";
            foreach( $wpdb->get_results("SELECT siteID, latitude, longitude FROM site_coordinates2", OBJECT) as $key => $row) {
               $latitude = $row->latitude;
               $longitude = $row->longitude;
               $info = $row->siteID;
           echo $prependStr;
       ?>
{
    position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),

}
<?php
$prependStr =",";
}
?>
        ];



        for (var i = 0, feature; feature = features[i]; i++) {

          addMarker(feature);
        }
}



         </script>


  </body>
</html>

<?php
get_footer();
?>

Answer 1

If I'm reading your code right, you've got an array of features that looks like:如果我没看错你的代码，你就会得到一系列如下所示的功能：

features = [
  {position: new google.maps.LatLng(1, 2)},
  {position: new google.maps.LatLng(3, 4)},
  // etc...
];

ie the array contains objects with just a position property.即数组包含只有一个position属性的对象。 So you correctly refer to that when you do:因此，当您这样做时，您可以正确地引用它：

position: feature.position,

However when you try and set your infowindow content using:但是，当您尝试使用以下方法设置信息窗口内容时：

new google.maps.InfoWindow({
    content: feature,
    maxWidth: 300
})

That won't work, because the content property is meant to be a string, not a JS object.这是行不通的，因为content属性是一个字符串，而不是一个 JS 对象。 You need to specify some text there.您需要在那里指定一些文本。 If you're just wanting to display the coordinates, you could do:如果你只是想显示坐标，你可以这样做：

new google.maps.InfoWindow({
    content: feature.position.toString(),
    maxWidth: 300
})

谷歌地图弹出窗口里面没有显示任何东西

问题描述

code:代码：

1 个解决方案

解决方案1
0 2017-03-08 14:18:13

谷歌地图弹出窗口里面没有显示任何东西

问题描述

code:代码：

1 个解决方案

解决方案1 0 2017-03-08 14:18:13

解决方案1
0 2017-03-08 14:18:13