1

Я пытаюсь нарисовать 5 наборов ~ 30 тыс. Маркеров на карту Google за раз, которая настроена, зависит от пользовательского ввода/выбора.Таблицы Fusion против Postgres с PHP

Я заметил очень медленное время загрузки приложения при визуализации точек, используя следующий код.

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 выше? Если да, то как я могу назвать таблицу Fusion из моего Javascript и сохранить возврат в массиве JSON, чтобы я мог вызвать минимальное нарушение приложения при переключении с PHP/Postgres на таблицы Fusion. Я уже создал соответствующую таблицу Fusion, мне просто нужно знать, как и как ее подключить?

Предложения по оптимизации приведенного выше кода для ускорения рабочего времени также приветствуются.

ответ

0

Я не совсем понимаю, что должно делать приложение, но лучше всего предположить, что вы хотите использовать FusionTablesLayer с API Google Maps JavaScript и изменить запрос на основе ввода пользователем.

+0

Обычно приложение должно добавлять маркеры к карте, основываясь на том, соответствуют ли определенные критерии, заданные с помощью пользовательского ввода, например, ценового диапазона. Я получаю эту подачу через штраф, мне просто интересно, есть ли способ сделать эти точки быстрее и как я могу это реализовать. – JellyTots

+0

Я думаю, вы найдете FT значительно быстрее, чем рендеринг, чем перемещение 30k точек клиенту. Взгляните на шаблон карты поиска Дерека Эдера для фильтруемых карт, построенных с помощью таблиц Fusion: http: // derekeder.com/searchable_map_template/ –

0

Выполнение вашего кода происходит медленно, потому что вы добавляете каждый pont в качестве маркера, что означает, что клиент (ваш браузер) делает все тяжелую работу сейчас. Эти маркеры доступны для просмотра, редактирования, перемещения и т. Д. Javascript.

Таблицы Fusion могут помочь вам отображать десятки тысяч точек, создавая их на стороне сервера (серверы google). Это означает, что вы больше не будете использовать маркеры. Ваши очки будут отображаться на картах (файлах изображений), обслуживаемых Google. В обычном смысле они больше не будут доступны для просмотра.

Вы можете отфильтровать отображаемые точки в таблице Fusion на основе ввода ваших пользователей, но для этого есть ограничения. Например: если ваши пользователи выбирают из раскрывающегося списка, это можно сделать, предоставив предложение WHERE в вашем запросе Fusion Tables. Если ваши пользователи выбирают точки по нескольким размерам с помощью нескольких выпадающих меню и/или флажков, вы можете нажать на ограничение размера URL-адреса.

Без обеспечения вашего варианта использование его трудно сказать больше ...

+0

Цель/вариант использования - нарисовать маркеры с инфо-окнами на карте. По умолчанию маркеры не предназначены для перемещения, редактирования и т. Д. Основываясь на том, что пользователь меняет перетаскиваемый круг на карте и меняет 2 ползунка, их значения используются для определения того, какие точки нарисованы. Таким образом, вероятность того, что в данный момент необходимо нарисовать менее 3 к баллов. – JellyTots

+0

Я предполагаю, что ваши пользователи будут ограничивать результаты с помощью 2 ползунков, дающих верхнюю и нижнюю границу на одном из полей таблицы Fusion (цена..maybe), и, вероятно, круг служит радиусом поиска. Вам нужно динамически создавать свой [запрос] (https://developers.google.com/maps/documentation/javascript/fusiontableslayer#fusion_table_queries) каждый раз, когда пользователь меняет ползунки или перемещает круг. Вы можете использовать пространственное условие в своем запросе, чтобы ограничить радиус поиска. Хорошей отправной точкой является [этот пример] (https://developers.google.com/fusiontables/docs/samples/circle_example) – sanya

+0

Этот пример выглядит так, как я и ищу, единственная проблема, с которой я сталкиваюсь, заключается в том, как реализуйте это с помощью перетаскиваемого и регулируемого круга – JellyTots

0

Есть несколько факторов, чтобы рассмотреть здесь, когда речь идет о загрузке больших элементов из базы данных на карту/отображение клиентов .. Лучший ответ здесь IMHO должен сделать что-то похожее ниже.

  • Вы использовали инструменты просмотра браузеров/dev или любой javascript, чтобы определить, как долго после завершения запроса ajax, когда карта завершит загрузку маркеров. То же самое касается php и sql стороны вещей.
  • Индексирование .... У этих столбцов поиска есть индекс? Вы будете поражены разницей в производительности.
  • Измерьте время запроса sql в любое время, чтобы изменить данные на стороне php.
  • Если у вас уже есть достаточно мощная база данных/сервер, вы можете легко избежать таблиц слияния. Это самостоятельный выбор, используйте суждение.
  • Вам нужно взаимодействие с загруженными элементами? Если это так, то маркеры или аналогичные будут единственно верным правильным способом. Слои быстрее и могут быть сохранены как один объект для последующего использования, но вы не можете взаимодействовать с точками.
  • Вам нужны все предметы сразу с самого начала или вы можете загрузить их по мере необходимости.Несколько раз, используя задержанный вызов ajax для получения маркеров в видимой области на событиях взаимодействия с картами, будет работать очень хорошо и позволяет маркерам загружаться со временем ... кеш и проверять столбец идентификаторов.
  • Оцените каждую часть процесса. Поиск медленных точек и настройка вашего кода вокруг них всегда приведут к лучшей производительности. Исследуйте альтернативные функции/методы/стили стилей/sql-запросы ...
  • Кластеризация может быть альтернативный метод, если вы можете найти стиль, соответствующий вашему дисплею, и информация обратной связи приемлема для вашего прецедента.

Вы можете получить комплексную и хранить метку времени Unix для каждой точки измерения и добавить их в выходные данные затем добавить метки времени с помощью JavaScript, как только все будет сделано, просто console.log это или есть таблица генерируется ниже карты, показывающей время для каждой точки. Это может быть очень удобно при тонкой настройке кода, как это показывает, какие основные различия (без учета производительности сети)

Этапы Ряды/массива данных на карте:

  1. SERVER: запрашивая строки из базы данных в коллекцию или отправку строк непосредственно на запрос клиента.
  2. СЕРВЕР: Очистка/форматирование строк и отправка их на запрос клиента
  3. КЛИЕНТ: Получение данных в коллекцию или добавление непосредственно на карту.

1: Запрос строки из базы данных ...
Хотя SQL не один из моих любимых языков, его что-то, что все больше и больше я стараюсь оптимизировать, как мне нужно более быстрые результаты в результате из «Больших Данных» и пытаясь выжать каждый маленький бит процессора из сервера, может сэкономить несколько больших $$$ в долгосрочной перспективе.

В зависимости от вашего окончательного кода/настройки ... вы можете повысить производительность при выполнении простых действий, например, для запроса 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 является полным, пока все фломастеры загружаются. Это будет зависеть от скорости вашего компьютера, а не от сервера, на котором вы работаете ... Это та часть, которая требует поиска хорошего баланса скорости и текущего возраста обычно используемых устройств/производительности устройств.