PHPとajaxを使用してMySQLからマーカーをロードするには？

Question

私はリーフレットの新人です。私は、リーフレットの地図上にMySQLデータベースからマーカーをロードする方法を知りました。

マップの初期化時にマーカーをロードするのではなく、関数を使用してマーカーをロードすることは嫌いです。たとえば、ユーザーは日付を選択し、その日付からマーカーをロードできるようにします。私は以下のことを今まで行ってきましたが、エラーが発生しました：

leaflet.js:6 Uncaught TypeError: Cannot read property 'lat' of undefined. 

私は何が間違っているのかよくわかりません。

jQueryの

$(document).ready(function() { 
    var markerpositions; 
    var map = L.map('map').setView([-55.7770641,55.6602758], 13); 
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
     maxZoom: 19, 
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 
    }).addTo(map); 
    getlocations(); 
    var marker = L.marker(markerpositions).addTo(map); 


function getlocations(){ 
var id = "1"; 

    $.ajax({ 
     type: "POST", 
     url: "getlocationstomap.php", 
     data: {id:id}, 
     dataType: 'json', 
     cache: false, 
    }) 
    .success(function(response) { 
     if(!response.errors && response.result) { 

      $.each(response.result, function(index, value) { 
       markerpositions = '['+value[0]+','+value[1]+']'; 
      }); 


     } else { 
      $.each(response.errors, function(index, value) { 
       $('input[name*='+index+']').addClass('error').after('<div class="errormessage">'+value+'</div>') 
      }); 
     } 
    }); 
} 
}) 

PHP（getlocationstomap.php）あなたは、AJAXの応答を解析する場合

<?php 
// assign your post value 
$inputvalues = $_POST; 

// assign result vars 
$errors = false; 
$result = false; 

$mysqli = new mysqli('localhost', "root", "", "traxi"); 

/* check connection */ 
    if (mysqli_connect_errno()) { 
     printf("Connect failed: %s\n", mysqli_connect_error()); 
     exit(); 
    } 

    // escape your values 
    foreach ($inputvalues as $key => $value) { 
     if(isset($value) && !empty($value)) { 
      $inputvalues[$key] = $mysqli->real_escape_string($value); 
     } else { 
      $errors[$key] = 'The field '.$key.' is empty'; 
     } 
    } 

if(!$errors) { 
     // select your query 
     $addresult = " 
      SELECT `latitude`, `longitude` 
      FROM `positions` 
      WHERE `deviceid` = '" . $inputvalues['id'] . "' 

     "; 
//$returnResult = array(); 
     if($result = $mysqli->query($addresult)) { 
      // collect results 
      while($row = $result->fetch_all()) 
      { 
       // assign to new array 
       // make returnResult an array for multiple results 
       $returnResult = $row; 
      } 
     } 
    } 

    // close connection 
    mysqli_close($mysqli); 

    // print result for ajax request 
    echo json_encode(['result' => $returnResult, 'errors' => $errors]); 

    exit; 
?> 

Answer 1

、あなたが最後にこれだけ、何度も何度も変数markerpositionsを上書きしています解析された変数がマップに追加されます。

また、L.marker()メソッドでは配列を入力する必要がありますが、latのlongデータは配列の代わりに変数markerpositionsの文字列として割り当てられます。

このようなマップにあなたの応答データを追加します。私はこれを知っている

$.each(response.result, function(index, value) { 
    L.marker([ value[0], value[1] ]).addTo(map); 
}); 

Answer 2

は答えて受け入れられたが、私はi'deが（別の方法で問題が発生したことはありませんyou'deする方法を投げると考えられていますあなたは）に遭遇した。

GeoJSON is a format for encoding a variety of geographic data structures.

http://geojson.org/

それが行うのは簡単だし、あなたに手間ときの節約：あなたはPHP、あなたが送っている出力を制御を持っている場合、私はにGeoJSON形式のデータを生成することが最善見つけますクライアント側のデータを使って、GeoJSON lintを使って簡単にテストすることができます。これはカスタム生成されたJSON構造では簡単に行えません。また、GeoJSONは、そこにあるほとんどのGISアプリケーションでも使用できるため、多数のアプリケーションにわたってデータを交換できます。

MySQLの行をGeoJSONの機能に変換し、それらをGeoJSONコレクションに入れ、JSONにエンコードしてクライアントに送信する必要があります。そこにリーフレットのL.GeoJSONレイヤーに一度にロードできます。コードの例：

<?php 

function createFeature() { 
    $feature = new stdClass(); 
    $feature->type = 'Feature'; 
    $feature->properties = new stdClass(); 
    $feature->geometry = new stdClass(); 
    $feature->geometry->type = 'Point'; 
    $feature->geometry->coordinates = array(); 
    return $feature; 
} 

function createCollection() { 
    $collection = new stdClass(); 
    $collection->type = 'FeatureCollection'; 
    $collection->features = array(); 
    return $collection; 
} 

今

のMySQLからあなたの行をつかんとき別々の機能に各行からのデータを挿入してにそれらの機能をプッシュ：

機能は、新しい/空にGeoJSON機能やコレクションを生成します収集し、それをクライアントに送信します。

<?php 

$query = "SELECT name, latitude, longitude FROM locations"; 

if ($result = $mysqli->query($query)) { 

    // Create a new collection 
    $collection = createCollection(); 

    while ($row = $result->fetch_object()) { 

     // Create a new feature 
     $feature = createFeature(); 

     // Add (optional) properties to the feature 
     $feature->properties->name = $row->name; 

     // Add coordinates to geometry coordinates array 
     // Mind that GeoJSON works with lng/lat NOT lat/lng 
     $feature->geometry->coordinates[] = $row->longitude; 
     $feature->geometry->coordinates[] = $row->latitude; 

     // Add the feature to the collection's features array 
     $collection->features[] = $feature; 
    } 

    // Encode collection object to JSON and send to client 
    echo json_encode($collection); 

    $result->close(); 
} 

あなたはこのような出力になってしまいます：

{ 
    "type": "FeatureCollection", 
    "features": [{ 
     "type": "Feature", 
     "properties": { 
      "name": "Foo" 
     }, 
     "geometry": { 
      "type": "Point", 
      "coordinates": [1, 1] 
     } 
    }, { 
     "type": "Feature", 
     "properties": { 
      "name": "Bar" 
     }, 
     "geometry": { 
      "type": "Point", 
      "coordinates": [2, 2] 
     } 
    }] 
} 

今リーフレットは簡単ですに、L.GeoJSONが自動にL.Marker作成することをロード "のにGeoJSONポイントフィーチャからの秒：

// Grab the data via jQuery's getJSON 
$.getJSON('url', function (collection) { 

    // Create new GeoJSON layer with collection and add to map 
    new L.GeoJSON(collection).addTo(map); 
}) 

使用してプロパティを使用して非常に簡単ですL.GeoJSONのonEachFeature方法：

new L.GeoJSON(collection, { 
    'onEachFeature': function (feature, layer) { 
     layer.bindPopup(feature.properties.name); 
    } 
}).addTo(map); 

それはそれが啓発されることを望む、ここにいくつかの参照があります：

• L.GeoJSON参照：http://leafletjs.com/reference.html#geojson
• L.GeoJSONチュートリアル：http://leafletjs.com/examples/geojson.html