使用 PHP 的 Fusion Tables 与 Postgres答案

【问题标题】：Fusion Tables vs. Postgres with PHP使用 PHP 的 Fusion Tables 与 Postgres
【发布时间】：2023-04-07 04:47:01
【问题描述】：

我正在尝试一次在 Google 地图上绘制 5 组约 30k 标记，绘制哪一组取决于用户输入/选择。

我注意到应用程序在使用以下代码呈现点时加载时间非常慢。

function set_markers(minyear,maxyear,minprice,maxprice){

  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
 } else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 // this method is used to capture the response of the http request
 xmlhttp.onreadystatechange = function(){
   if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
     var pinpoints = JSON.parse(xmlhttp.responseText);
     var marker;
     var i=0;
     var lat;
     var lng;
     var price;
     var address;
     var post_latlng;
     var content;
     for (i = 0;i<pinpoints.length;i++){ 
        a=pinpoints[i];
        lat=parseFloat(a["lat"]);
        lng=parseFloat(a["lng"]);
        price=parseFloat(a["price"]);
        address=String(a["address_string"]);
        date=String(a["date_of_sale"]);
        post_latlng = new google.maps.LatLng(lat,lng);
        content ="<b>Address:</b> " + address + "</br>" + "<b>Price:</b>€ " + price + '</br>' + "<b>Date of Sale:</b> " + date;  
        add_marker(address,post_latlng);
        add_InfoWindow(content,marker);
      }
     }
  }
  xmlhttp.open("GET","ajax/pinpoints.php?lat1="+lat1+"&lat2="+lat2+"&lng1="+lng1+"&lng2="+lng2+"&minyear="+minyear+"&maxyear="+maxyear+"&minprice="+minprice+"&maxprice="+maxprice,true);
  xmlhttp.send();
}

function add_marker(add,posit){
  var marker = new google.maps.Marker({  
        map: map, 
        title: add,
        position: posit  
      });
}
function add_InfoWindow(con,mark){
  var infowindow = new google.maps.InfoWindow();
  google.maps.event.addListener(marker,'click', (function(mark,con,infowindow{ 
    return function(){
     infowindow.setContent(con);
     infowindow.open(map,mark);
    };
  })(marker,content,infowindow)); 
 }

我想知道使用 Fusion Tables 是否会加快这个过程，并且仍然允许我绘制上面 Javascript 代码中指定的点？如果是这样，我如何从我的 Javascript 调用 Fusion Table 并将返回值存储在 JSON 数组中，以便在从 PHP/Postgres 切换到 Fusion Tables 时对应用程序造成最小的干扰。我已经创建了相关的 Fusion Table，我只需要知道是否以及如何连接它？

也欢迎提出如何优化上述代码以加快运行时间的建议。

【问题讨论】：

标签： javascript php google-maps google-maps-markers google-fusion-tables

【解决方案1】：

我不太明白该应用程序应该做什么，但最好的猜测是您希望将 FusionTablesLayer 与 Google Maps JavaScript API 一起使用，并根据用户输入更改查询。

【讨论】：

基本上，应用程序应该根据是否符合通过用户输入指定的某些标准（例如价格范围）向地图添加标记。我有这个很好的反馈，我只是想知道是否有一种方法可以更快地渲染这些点以及如何实现它。
我认为您会发现 FT 的渲染速度比将 30k 点移动到客户端要快得多。查看 Derek Eder 的可搜索地图模板，了解使用 Fusion Tables 构建的可过滤地图：derekeder.com/searchable_map_template

【解决方案2】：

您的代码执行速度很慢，因为您将每个 pont 添加为标记，这意味着客户端（您的浏览器）现在正在做所有艰苦的工作。这些标记是可点击的、可编辑的、可移动的……等等。

Fusion Tables 可以通过在服务器端（谷歌的服务器）呈现数万个点来帮助您显示它们。这意味着您将不再使用标记。您的点将呈现在谷歌提供的地图图块（图像文件）上。在正常意义上，它们将不再是可点击的。

您可以根据用户输入过滤 Fusion Table 上显示的点，但它有一些限制。例如：如果您的用户从下拉列表中进行选择，可以通过在 Fusion Tables 查询中提供 WHERE 子句来实现。如果您的用户使用多个下拉菜单和/或复选框按多个维度选择点，您可能会达到 URL 大小限制。

如果不提供您的用例，很难说出更多信息......

【讨论】：

目的/用例是在地图上绘制带有信息窗口的标记。默认情况下，标记并不意味着可移动、可编辑等。根据用户更改地图上的可拖动圆圈并更改 2 个滑块，这些滑块的值用于确定绘制哪些点因此在给定时间需要绘制的点可能少于 3k。
我猜您的用户将使用 2 个滑块限制结果，在您的 Fusion Table 字段之一（价格..也许）上给出一个上下边界，并且圆圈可能用作搜索半径.每次用户更改滑块或移动圆圈时，您都需要动态构建 query。您可以在查询中使用空间条件来限制搜索半径。一个好的起点是this example
这个例子看起来像我正在寻找的，我遇到的唯一问题是如何使用可拖动和可调节的圆圈来实现它

【解决方案3】：

在将大型项目从数据库加载到地图/客户端显示时，这里需要考虑几个因素。这里的最佳答案恕我直言是执行类似于下面的操作。

您是否使用过浏览器检查器/开发工具或任何 javascript 来测量从完成 ajax 请求到地图完成加载标记的时间。 php 和 sql 方面也是如此。
索引.... 这些查找列有索引吗？您会对性能差异感到惊讶..
测量 sql 查询时间，在 php 端修改数据所花费的任何时间。
如果您已经拥有足够强大的数据库/服务器，您应该能够轻松避免融合表。这是一个自制的选择，使用判断。
您需要与加载的项目进行交互吗？如果是这样，那么标记或类似的东西将是唯一真正正确的方法。图层更快，可以保存为单个对象供以后使用，但您不能与点进行交互。
您是从一开始就需要所有项目，还是可以根据需要加载它们。有时使用延迟的 ajax 调用来获取地图交互事件可见区域内的标记会执行得非常好，并允许随着时间的推移加载标记...缓存并检查 id 列。
对流程的每个部分进行基准测试。找到慢点并围绕它们调整代码总是会带来最佳性能。探索替代函数/方法/循环样式/sql 查询...
如果您可以找到与您的显示器相匹配的样式并且信息反馈对于您的用例来说是可以接受的，那么集群可能是一种替代方法。

您可能会变得复杂并为每个测量点存储一个 unix 时间戳并将它们添加到输出数据中，然后通过 javascript 添加更多时间戳，一旦一切完成，只需 console.log 或使用在地图下方生成的表格显示了每个点的时间。这在调整代码时非常方便，因为它显示了任何主要差异（忽略网络性能）

到地图的行/数据数组的阶段：

服务器：将数据库中的行查询到集合中或将行直接发送到客户端请求。
服务器：清理/格式化行并将它们发送到客户端请求
客户：将数据接收到集合中或直接添加到地图中。

1：查询数据库中的行...
虽然 SQL 不是我最喜欢的语言之一，但我越来越多地尝试优化它，因为“大数据”导致我需要更快的结果，并且尝试从服务器中挤出每一个小 CPU 滴答声可以节省一些大数据从长远来看，$$$。

根据您的最终代码/设置...您可以通过执行简单的操作（例如 ajax 请求）来提高性能。

$result = pg_query($conn, "SELECT * FROM table_poi;");
header('Content-Type: application/javascript');
echo json_encode(pg_fetch_assoc($result));
exit;

2：清理/格式化...
基本上，您应该尝试确保在将数据库结果发送到客户端之前不必循环它们，否则将浪费时间/资源..如果必须的话，请使用数组映射..尝试索引您的数组，以便您可以在 javascript 中使用键查找。

3：将数据接收到集合中...
快速浏览一下您的 javascript 看起来不错，我要在这里进行基准测试/测试的第一件事是 ajax 请求完成后多久，直到所有标记都被加载。这将取决于您的计算机速度，而不是您正在处理的服务器...这是需要在速度与常用设备的当前年龄/设备性能之间找到良好平衡的部分。

【讨论】：