Question

我正在摆弄谷歌地图教程，其中我使用JSON动态填充了数据库中值的标记。除此之外，我还有一个listview，它还动态填充了同一数据库中每个标记的名称。当我选择列表视图中商店的名称时，我试图平移到标记的lat和lon的位置。

EG。用户在列表视图中选择麦当劳。然后将它们平移到地图上的麦当劳标记位置。

我认为listview中每行的id应该以某种方式用于匹配数组中的lat和lon值，然后使用store的lat和long的map.panTo（）函数。我是JSON的新手，所以不确定如何做到这一点，因为它都是动态的，而且它们都陷入了循环。

动态列表视图的jQuery发布在下面。

JS

var file = "getsome.php";

$.post(file, function(data) {

var output = '';

$.each(data, function(index, value){ 

    output += '<li><a href="#" id='+ value.site_id +'" class="latlon">' + value.site_name + '</a></li>';

}); $('#listview-id').html(output).listview().listview('refresh'); }, "json");

getsome.php

require("dbconnect.php");

try {
  $DBH = new PDO("mysql:host=$server;dbname=$database;charset=utf8", $username, $password,
                    array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
}
 catch (PDOException $e) {
    print "Error!: " . $e->getMessage() . "<br/>";
    die();
}

$STH = $DBH->prepare("SELECT * FROM Site WHERE 1");

$STH->execute();

$result = $STH->fetchAll();

echo json_encode($result);

Answer 1

您可以使用此方法。在示例中，我使用（最接近）从Listview项中获取一些数据。当您动态填充listview项时，可以插入数据属性 - data-whatever =“the data” - 例如（data-address =“10 maple Street”data-lat =“45.6789”data-lng =“56.6786”）等等

<强>演示

http://jsfiddle.net/g5tvj3xp/

<ul data-role="listview" id="listview">
    <li data-id="row1">Row 1</li>
    <li data-id="row2">Row 2</li>
    <li data-id="row3">Row 3</li>
    <li data-id="row4">Row 4</li>
</ul>


$("#listview").on("click", ">li", function(event, ui) {
var id = $(this).closest("li").attr('data-id');
alert(id)
});

如何分别识别动态列表视图行以标识已单击的行

1 个答案: