2012-05-22 62 views
0

下面給出了我的示例代碼。在index.php我定義了jquery選項卡。其中一個標籤應打開一個地圖(openlayers)並在此地圖上放置標記。每個標記的緯度和經度取自MySQL DB。問題是我不知道如何以及在哪裏執行從數據庫讀取數據的功能put_marker。我知道這應該是一個基本問題。從DB讀取經度/緯度並在地圖上放置標記

的index.php

<script type="text/javascript"> 
       $(document).ready(function() { 
        $("#tabs").tabs({ 
        ajaxOptions: { 
         success: function(html) { 
          $("#content").html(html); 
          page_init(); 
         } 
        } 
       }); 
       }); 
</script> 
    <div id="tabs"> 
     <ul> 
      <li><a href="administration.php"><span>Administration</span></a></li> 
      <li><a href="map.php"><span>Map</span></a></li> 
     </ul> 
    </div> 

map.php

<?php 
     include_once 'include/DatabaseConnector.php'; 
     $query4="SELECT r.resLatitude, r.resLongitude FROM resources r;"; 
     $result4=DatabaseConnector::ExecuteQueryArray($query4); 

     foreach ($result4 as $row): 
// HERE I HAVE A PROBLEM 
      //putMarker($row['resLatitude'],$row['resLongitude']);  
     endforeach; 
    ?> 
     <script src="http://www.openlayers.org/api/OpenLayers.js"></script> 
     <script type="text/javascript"> 
      var map, layer; 

      function page_init(){ 
       map = new OpenLayers.Map("basicMap"); 
       var mapnik   = new OpenLayers.Layer.OSM(); 
       var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984 
       var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection 
       var position  = new OpenLayers.LonLat(2.07833,41.2969).transform(fromProjection, toProjection); 
       var zoom   = 15; 
       map.addLayer(mapnik); 
       map.setCenter(position, zoom); 
      } 

      function putMarker(latMarca, lonMarca) 
      { 
       var lonLat = new OpenLayers.LonLat(lonMarca ,latMarca).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()); 
       var zoom=16; 
       var markers = new OpenLayers.Layer.Markers("Markers"); 
       map.addLayer(markers); 
       markers.addMarker(new OpenLayers.Marker(lonLat)); 
       map.setCenter (lonLat, zoom); 
      } 
     </script> 
     <div id="basicMap" style="width: 100%; height: 100%;"> 

     </div> 
+0

U應該將數組從'DB'放到'JSON'中,並將其作爲參數傳遞給'putMarker'函數,並通過函數將其循環,並通過onload事件調用'putMarker' –

回答

1

嘛,你要在服務器端的PHP的標記。並且您將它們傳遞給客戶端的Javascript。兩個不同的地方。

實際上,在最簡單的情況下,甚至不需要JSON操作。採取從PHP

.. 
    echo '<script type="text/javascript">'; 
    echo '$(document).ready(function() {'; 
    foreach ($result4 as $row){ 
     echo 'putMarker('.$row['resLatitude'].','.$row['resLongitude'].');';  
    } 
    echo '});'; 
    echo '</script>'; 
    ... 

這些代碼將在客戶端作爲純JS來解釋,但值: 在你map.php你可以做。

順便說一句,用相同的方式編寫代碼並不是一個好方法。 朝向MVC框架,其中代碼和外觀彼此分開。

相關問題