javascript - 如何将传单标记固定到数据库中的某个位置？

Question

我有一些从数据库加载的传单标记，我想将其固定到该位置。我正在使用 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>
  ';



 ?>

我想我在某个地方犯了错误......你能帮我吗？

Answer 1

渲染标记的一种方法是查询 MySQL 表/ View 并以 GeoJSON 格式返回结果，这适合在 OpenLayers 或您在 Leaflet 中使用(我也使用过 Leaflet)

下面是我使用的 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;
?>

希望对你有帮助