2015-04-29 3 views
0

У меня есть рабочий код для моей Google Heatmap. Краткий обзор того, что он делает:google heatmaps включая количество баллов

1) запрашивает БД MySQL тянуть широту/долготу для всех записей (первоначально) 2) падение вниз выберите поле позволяет для фильтрации (в основном только вносит изменения в запрос SQL в PHP) 3) Heatmap - это массив Json (с использованием php json_encode ($ SQL_Results))

поэтому код, который у меня есть сейчас, отлично работает - однако я хочу добавить еще одну карту.

Мой вопрос: можно ли подсчитать все результаты для определенного места (я использую почтовый индекс для генерации lat/long) и отображать их поверх тепловой карты?

Примером может служить; 100 результатов для местоположения x ... и по мере увеличения и рассеивания тепловой карты, это изменит число.

Я пробовал искать аналогичные функции, но могу найти информацию только о добавлении маркеров/изображений к результатам. Мне нужно отображать динамические числа из результатов.

Любая помощь/совет были бы высоко оценены.

Вот соответствующий код, который я использовал для создания Heatmap:

<?PHP 
$LatLng = "select inp.lat, inp.long from locations inp"; 
$results = db_query($LatLng); 

$mapCoords = mysqli_fetch_all($results, MYSQLI_ASSOC); 

?> 

<script type="text/javascript"> 

var places = []; 
var coords = <?php echo json_encode($mapCoords); ?>; 

for (var i = 0; i < coords.length; i++) { 
    places.push(new google.maps.LatLng(coords[i].lat, coords[i].long)); 
} 

var map, pointarray, heatmap; 
var gradient = [ 
     'rgba(0, 255, 255, 0)', 
     'rgba(0, 255, 255, 1)', 
     'rgba(0, 191, 255, 1)', 
     'rgba(0, 127, 255, 1)', 
     'rgba(0, 63, 255, 1)', 
     'rgba(0, 0, 255, 1)', 
     'rgba(0, 0, 223, 1)', 
     'rgba(0, 0, 191, 1)', 
     'rgba(0, 0, 159, 1)', 
     'rgba(0, 0, 127, 1)', 
     'rgba(63, 0, 91, 1)', 
     'rgba(127, 0, 63, 1)', 
     'rgba(191, 0, 31, 1)', 
     'rgba(255, 0, 0, 1)' 
    ]; 

var Data = places; 

function initialize() { 
     var mapOptions = { 
      zoom: 6, 
      center: new google.maps.LatLng(54.892473,-2.932931),  
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     pointArray = new google.maps.MVCArray(Data); 

     heatmap = new google.maps.visualization.HeatmapLayer({ 
      data: pointArray, 
      dissipating: true, 
      radius: 35 

     }); 

     heatmap.setMap(map); 
     heatmap.set('gradient', heatmap.get('gradient') ? null : gradient); 
     heatmap.set('opacity', '0.9'); 
    } 

google.maps.event.addDomListener(window, 'load', initialize); 

</SCRIPT> 

ответ

0

Итак, думаю, что я смотрел на неправильном подходе - моя первоначальная идея состояла в том, чтобы вытащить счет из БД возвращаемых строк и отобразить настраиваемый маркер с динамическим текстом. Решение, которое я нашел (и было очень просто реализовать!), Было кластеризацией Google с использованием MarkerClusterer.js. Для меня, я просто скачал JS, указал на него в моем коде, и добавил следующее:

<script type="text/javascript" src="MarkerClusterer.js"></script> 
var places = []; 
var markers = []; 

var coords = <?php echo json_encode($mapCoords); ?>; 

for (var i = 0; i < coords.length; i++) { 
    places.push(new google.maps.LatLng(coords[i].lat, coords[i].long)); 
    var latLng = new google.maps.LatLng(coords[i].lat, coords[i].long); 
    var marker = new google.maps.Marker({'position': latLng}); 
    markers.push(marker); 
} 

`

и в конце установки кластера и добавить некоторые опции:

var mcOptions = {gridSize: 50, maxZoom: 15}; 

var markerCluster = new MarkerClusterer(map, markers, mcOptions); 

Это в значительной степени это - когда я увеличиваю масштаб, я получаю изменение в подсчетах, и теперь мне просто нужно работать с настраиваемыми маркерами с инфо-окнами. Надеюсь, это поможет кому-то еще в той же ситуации.

Смежные вопросы