2017-03-02 29 views
-5

我在wordpress上使用PHP MYSQL。WordPress的:如何在Google地圖上添加標記,其數據從MYSQL中檢索

我有一個將Google Map添加到網頁的代碼。

我想要的是能夠使用PHP和MYSQL在此Google MAP中添加標記,其中將顯示的數據存儲在MYSQL數據庫中。

例子,如何我需要在地圖的樣子: enter image description here

這時地圖將包含標記的批號與彈出信息窗口

代碼:

<?php 
/* 
Template Name: MAP4 
*/ 
get_header(); 
?> 

<!DOCTYPE html> 
<html> 
    <head> 
     <script src = "https://maps.googleapis.com/maps/api/js"></script> 
     <script> 
      function loadMap() { 
       var mapOptions = { 
        center:new google.maps.LatLng(33.888630, 35.495480), 
        zoom:12, 
        mapTypeId:google.maps.MapTypeId.ROADMAP 
       }; 

       var map = new google.maps.Map(document.getElementById("sample"),mapOptions); 
      } 

      google.maps.event.addDomListener(window, 'load', loadMap); 
     </script> 
    </head> 

    <body> 
     <div id = "sample" style = "width:580px; height:400px;"></div> 
    </body> 
</html> 


<?php 
get_footer(); 
?> 
+0

更換功能數組你是什麼意思*幫我把這些標記*?我們不知道您的數據結構如何,我們不知道任何連接信息。這似乎是「只爲我做」的問題。我投票結束,太寬泛。我鼓勵你自己嘗試一下,當你有真正的問題時回來,我們可以嘗試進一步幫助你。 – FrankerZ

+1

您需要通過JSON對象將數據從數據庫傳遞到php以及從php到javascript。然後,您需要遍歷JSON對象中的數組,爲循環內的每個循環添加一個標記並設置一個事件處理程序。在回調事件處理函數,然後你創建infoWindow並填充它的內容 –

回答

0

你可以試試這個: - 你可以像在javascript中一樣從PHP生成你的標記。 下面的例子是從Google Map API

var map; 
 
     function initMap() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 16, 
 
      center: new google.maps.LatLng(-33.91722, 151.23064), 
 
      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 features = [ 
 
      { 
 
      position: new google.maps.LatLng(-33.91721, 151.22630), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91539, 151.22820), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91747, 151.22912), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91910, 151.22907), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91725, 151.23011), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91872, 151.23089), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91784, 151.23094), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91682, 151.23149), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91790, 151.23463), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91666, 151.23468), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.916988, 151.233640), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578), 
 
      type: 'library' 
 
      } 
 
     ]; 
 

 
     for (var i = 0, feature; feature = features[i]; i++) { 
 
      addMarker(feature); 
 
     } 
 
     }
/* Always set the map height explicitly to define the size of the div 
 
     * element that contains the map. */ 
 
     #map { 
 
     height: 100%; 
 
     } 
 
     /* Optional: Makes the sample page fill the window. */ 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     }
<!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"> 
 
    
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    
 
    <script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
 
    </script> 
 
    </body> 
 
</html>
採取以下PHP

<?php 
$prependStr ="" 
foreach($wpdb->get_results("SELECT * FROM your_map_table_name ") as $key => $row) { 
$latitude = $row->latitude; 
$longitude = $row->longitude; 
$info = $row->info; 
echo $prependStr; 
?> 
{ 
    position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $latitude; ?>), 
    type: '<?php echo $info; ?>' 
} 
<?php 
$prependStr =","; 
} 
?> 
+0

謝謝你的回答,但在** var features = [] **數組我怎樣才能從MYSQL數據庫檢索到的數據替換這個數組? –

+0

@NabilJaroush更新了答案 –

相關問題