问题描述：

我使用WordPress的谷歌地图API的PHP MYSQL代码从MYSQL数据库中检索数据，并根据数据库中的现有坐标在地图上显示标记。它也显示一个单击Listener的infowindow。谷歌地图弹出窗口不显示任何内容

问题是infow窗口没有在其中显示任何数据。

任何人都可以打电话给我，错误在哪里？

代码：

<?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(); 
?>

你可以看看你的浏览器的开发控制台，并找出是否地图的API抛出任何错误？此外，尝试调整浏览器的大小，如果地图显示出来，那么您需要添加一些额外的代码来修复它。 –

你的代码产生了一个javascript错误：'InvalidValueError：setContent：不是一个字符串;和[object Object]'，因为@duncan观察到，'feature'不是这行中的一个字符串'content：feature，'。你期望在infowindow中出现什么内容？ – geocodezip

答

如果我在读你的代码的权利，你有一系列的功能，看起来像：

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

即数组包含只是一个position对象属性。所以你正确地是指，当你做：

position: feature.position,

但是当您尝试使用设置您的信息窗口的内容：

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

这是行不通的，因为content属性意味着是一个字符串，而不是一个JS对象。你需要在那里指定一些文本。如果你只是想显示坐标，你可以这样做：

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

我想在信息窗口中显示从坐标旁边的MYSQL数据库中检索的一些信息，但是当我在此行下添加某些内容时，地图不会显示出来 'position：new google.maps.LatLng（，），' –

谷歌地图弹出窗口不显示任何内容

代码：

相关推荐