2017-03-10 100 views
0

使用PHP & MYSQL在WordPress和Google Map API上从MYSQL数据库中检索数据并在Google Map上显示带有信息窗口的标记。如何在Google Map上添加信息窗口和标记

问题是,我无法在infoWindow中显示从数据库中检索到的数据,作为siteID它在哪里是选定表中的字段。

使用下面的代码标记不会显示在地图上

代码:

<?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=AIzaSyCquey2tCZ32jLJJDEEi2D7_RnXXyj9RTI&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.position.toString(), 
// this line that makes the error 
       content: feature.info, 
        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; ?>), 
    info:(<?php echo $info;?>), 

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



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

      addMarker(feature); 
     } 
} 



     </script> 


    </body> 
</html> 

<?php 
get_footer(); 
?> 
+0

用信息参数单引号替换圆括号。谢谢。 – user1544541

+0

你会从查询中获得坐标(纬度,经度)吗? – user1544541

+0

@ user1544541是你的回答作品谢谢 –

回答

0

与对信息参数单引号替换圆括号。谢谢。

+0

如何让这些图标出现而不是常规标记? 我有图标,但也没有显示所需的图标 –

+0

请详细说明。谢谢。 – user1544541

+0

我想有图标而不是常规标记如何在代码中做到这一点? JavaScript或PHP? –