2017-08-28 19 views
1

私は、データベースからロードしたリーフレットマーカーをいくつか持っていて、その場所にピン止めしたいと思います。私はajaxを使用しています。私は自分のajaxでPHPコードを使用する方法を知らないのです...私は.change関数を使用しますが、何のアイデアはありませんか?データベースからリーフレットマーカーを特定の場所にピン止めするにはどうすればよいですか?

$(".edit_scoala").click(function(){ 
      var id_scoala = $(this).attr("id").substring(12); 
      //alert(id_scoala); 
      $.ajax({ 
       type: "POST", 
       url: "ajax/edit_scoala.php", 
       data:{ 
       id: id_scoala 
       }, 
        cache:false, 
        dataType: "html" 

      }).done(function(ms){ 
       $("#response").html(ms); 
        var map = L.map('map').setView([44.9323281,26.0306833], 12,25); 

    L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWVnYTYzODIiLCJhIjoiY2ozbXpsZHgxMDAzNjJxbndweDQ4am5mZyJ9.uHEjtQhnIuva7f6pAfrdTw', { 
    maxZoom: 18, 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org/"> OpenStreetMap </a> contributors, ' + 
    '<a href="http://creativecommons.org/"> CC-BY-SA </a>, ' + 
    'Imagery © <a href="http://mapbox.com"> Mapbox </a>', 
    id: 'examples.map-i875mjb7' 
    }).addTo(map);   
        function putDraggable() { 
    /* create a draggable marker in the center of the map */ 
    draggableMarker = L.marker([ map.getCenter().lat, map.getCenter().lng], {draggable:true, zIndexOffset:900}).addTo(map); 

    /* collect Lat,Lng values */ 
    draggableMarker.on('dragend', function(e) { 
    $("#latitudine").val(this.getLatLng().lat); 
    $("#longitudine").val(this.getLatLng().lng); 
    }); 
    } 
    $(document).ready(function() { 
    putDraggable(); 

    $("#id_scoala").change(function() { 
    for(var i=0;i<arr.length;i++) { 
     if(arr[i]['id'] == $("#id_scoala").val()) { 
     $('#detalii').val(arr[i]['detalii']); 
     $('#latitudine').val(arr[i]['latitudine']); 
     $('#longitudine').val(arr[i]['longitudine']); 
     $('#telefon').val(arr[i]['telefon']); 
     $('#cuv_cheie').val(arr[i]['cuv_cheie']); 

     map.panTo([arr[i]['longitudine'], arr[i]['latitudine']]); 
     draggableMarker.setLatLng([arr[i]['longitudine'], arr[i]['latitudine']]); 
     break; 
     } 
    } 

    var arr = $.parseJSON('<?php echo json_encode($arr) ?>'); 
    }); 
     }); 


      }); 

     }); 

そしてedit_scoala.phpファイル:私はどこかでミスをしたと思います

<?php 
    if (isset($msg)) 
     echo $msg; 
    include_once ("../../class/DB/DBConn.includeall.php"); 
    include_once ('../include/config.inc.php'); 
    $db = new DBconn(NULL); 
    $scoala = new tableScoala($db,$_POST["id"]); 
    //$scoala = $db->DbGetRow("SELECT * FROM scoala WHERE id = ".$_POST["id"]); 
    echo ' 

<form action="" method="POST"> 
<a href="?page=tabel_scoala"><span class="inchide1">Inchide</span><i class="fa fa-times-circle" id="close" aria-hidden="true" style="cursor: pointer;"></i></a> 
    <h1>Modifica Datele scolii '.$scoala->row->nume.'</h1> 
    <div id="map" style="width: 600px; height: 400px"></div> 
    <input type="hidden" name="id_scoala" value="'.$scoala->id.'" /> 
    <p class="form1">Nume:</p> 
     <input type= "text" class= "form-control form2" style="padding:12px 20px;" name= "scoala" id="scoalal" value="'.$scoala->row->nume.'" /> <br /> 
     <p class="form1">Detalii:</p> 
     <input type= "text" class= "form-control form2" style="padding:12px 20px;" name= "detalii" id="detalii" value="'.$scoala->row->detalii.'" /> <br /> 
     <p class="form1">Latitudine:</p> 
     <input type= "text" class= "form-control form2" style="padding:12px 20px;" name= "latitudine" id="latitudine" value="'.$scoala->row->latitudine.'" /> <br /> 
     <p class="form1">longitudine:</p> 
     <input type= "text" class= "form-control form2" style="padding:12px 20px;" name= "longitudine" id="longitudine" value="'.$scoala->row->longitudine.'" /> <br /> 
    <p class="form1">Numar telefon:</p> 
     <input type= "text" class= "form-control form2" style="padding:12px 20px;" name= "telefon" id="telefon" value="'.$scoala->row->telefon.'" /> <br /> 
    <p class="form1">Cuvinte cheie:</p> 
     <input type= "text" class= "form-control form2" id="cuv_cheie" style="padding:12px 20px;"name= "cuv_cheie" value="'.$scoala->row->cuv_cheie.'"> <br /> 
<br> <br> 
<p class="form1"> <input type="submit" name="submit" value="Salveaza"> <br> </p> 
</form> 
    '; 



?> 

は.....あなたは私を助けてくださいことはできますか?リーフレットでOpenLayersを中またはあなたのケースでの使用に適しているMySQLのテーブル/ビューを照会しにGeoJSON形式で結果を返すされたマーカーをレンダリングする

+0

お役に立てば幸いですか! – Svinjica

+0

私はマーカーから地図上にレンダリングしたいのですが、位置を変更するのではなく、ドラッグすることで行います。問題は、編集ボタンをクリックすると、座標の中心ではなく地図の中心に固定されますマーカーの... –

答えて

0

一つの方法、(私もリーフレットを使用しました)

以下は、私が使用したPHPのコードです:

<?php 
#Build SQL SELECT statement and return the geometry as a GeoJSON element 
$conn = new PDO('mysql:host=localhost;dbname=DB_NAME;charset=utf8','DB_NAME','PASS',array(PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8')); 
# Build SQL SELECT statement and return the geometry as a GeoJSON element 
$sql = 'SELECT *, coor_x AS x, coor_y AS y FROM table'; 


# Try query or error 
$rs = $conn->query($sql); 
if (!$rs) { 
    echo 'An SQL error occured.\n'; 
    exit; 
} 

# Build GeoJSON feature collection array 
$geojson = array(
    'type'  => 'FeatureCollection', 
    'features' => array() 
); 

# Loop through rows to build feature arrays 
while ($row = $rs->fetch(PDO::FETCH_ASSOC)) { 
    $properties = $row; 
    # Remove x and y fields from properties (optional) 
    unset($properties['x']); 
    unset($properties['y']); 
    $feature = array(
     'type' => 'Feature', 
     'geometry' => array(
      'type' => 'Point', 
      'coordinates' => array(
       $row['x'], 
       $row['y'] 
      ) 
     ), 
     'properties' => $properties 
    ); 
    # Add feature arrays to feature collection array 
    array_push($geojson['features'], $feature); 
} 

header('Content-type: application/json'); 
echo json_encode($geojson, JSON_NUMERIC_CHECK); 
$conn = NULL; 
?> 

はあなたのベースから座標から地図上のマーカーをレンダリングしますか、または既存のマーカーの位置を変更したくない、それは

関連する問題