Question

我正在尝试一次向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表并将返回存储在JSON数组中，以便在从PHP / Postgres切换到Fusion Tables时对应用程序造成最小的中断。我已经创建了相关的Fusion Table，我只需要知道是否以及如何连接它？

建议如何优化上述代码以加快运行时间。

Answer 1

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

Answer 2

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

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

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

如果没有提供您的用例，很难说清楚......

Answer 3

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

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

你可以复杂并为每个测量点存储一个unix时间戳并将它们添加到输出数据然后通过javascript添加更多时间戳，一旦完成所有操作，只需控制台。记录它或者有一个在地图下方生成的表格，显示每点的时间。这在调整代码时非常方便，因为它显示了任何重大差异（忽略网络性能）

行的阶段/数据阵列到地图：

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

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

根据您的最终代码/设置...您可以通过执行简单的操作来提高性能，例如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请求完成后多长时间，直到所有标记都被加载..这将取决于你的计算机速度，而不是你正在处理的服务器......这是需要找到速度与常用设备的当前年龄/设备性能的良好平衡的部分。

融合表与Postgres与PHP

3 个答案: