-1

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

來源

2017-03-08 Jenny 3akra

你可以看看你的瀏覽器的開發控制檯，並找出是否地圖的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 
})

來源

2017-03-08 14:18:13 duncan

我想在信息窗口中顯示從座標旁邊的MYSQL數據庫中檢索的一些信息，但是當我在此行下添加某些內容時，地圖不會顯示出來 'position：new google.maps.LatLng（<？php echo $ latitude;？>，<？php echo $ longitude;？>），' –

谷歌地圖彈出窗口不顯示任何內容

代碼：

回答

相關問題