2016-11-21 4 views
0

Я использую этот код для переключения между двумя различными тепловые карты:Изменить стиль, когда переключение между данными в Google Heatmap

Toggle between data in Google Heat Map

Можно дать каждому taxidata свой собственный стиль, e.g. two different gradients?

И можно сказать e.g.

<button onclick="toggleHeatmap()">Toggle Heatmap</button> 

, который выбран taxidata? `

Im используя следующий код:

<script> 
window.onerror = function(){return true;} 
    var map = null; 
    var heatmap = null; 
    var heatmap2 = null; 
    var pointArray = null; 
    var pointArray2 = null; 
    var firstData = true; 

    var taxiData = [ 
    <? 
     foreach ($UserLocationHistory as $item) { 
      echo "new google.maps.LatLng(" .$item['UserPosLat'] . ", " .$item['UserPosLong'] . "),"; 
     } 

    ?> 
    ]; 

var taxiData2 = []; 
function initialize() { 
    var mapOptions = { 
     zoom: 13, 
     center: new google.maps.LatLng('48.139581, 11.579585'), 
     scrollwheel: false, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: false 
    }; 

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

    pointArray = new google.maps.MVCArray(taxiData); 
    pointArray2 = new google.maps.MVCArray(taxiData2); 

    heatmap = new google.maps.visualization.HeatmapLayer({ 
     data: pointArray, 
     radius: 25, 
     opacity: 0.7, 
    }) 

    heatmap.setMap(map); 
    heatmap2.setMap(map); 
} 

И в HTML:

<div> 
    <div id="panel"> 
    <button onclick="toggleHeatmap()" class="btn btn-info">Anzeige wechseln</button> 
    </div> 
    <div id="map_canvas" style="height:450px; width:100%;"></div> 
</div> 
+0

Да, это возможно. Что вы пробовали, что не сработали? – geocodezip

+0

Что касается переключателя стиля, я попытался добавить второй Heatmap Определение: "heatmap2 = new google.maps.visualization.HeatmapLayer ({data: pointArray2 .... Но это нарушило скрипт. Что касается выбора тех таксонов: Нет, я начинаю и не очень уверен в Javascript –

+0

Просьба представить [mcve] в вашем вопросе, который демонстрирует проблему ([edit] ваш вопрос) – geocodezip

ответ

0

Эта toggleHeatmap() функция (в основном скопированы и вставлены от вопроса вы ссылаетесь, но в том числе градиентом от этой функции) работает для меня:

function toggleHeatmap() { 
    if (firstData) { 
    heatmap.setData(pointArray2); 
    firstData = false; 
    } else { 
    heatmap.setData(pointArray); 
    firstData = true; 
    } 
    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)' 
    ] 
    heatmap.setOptions({ 
    gradient: heatmap.get('gradient') ? null : gradient 
    }); 
} 

proof of concept fiddle

фрагмент кода:

function initialize() { 
 
    var mapOptions = { 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(48.139581, 11.579585), 
 
    scrollwheel: false, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    mapTypeControl: false 
 
    }; 
 

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

 
    pointArray = new google.maps.MVCArray(taxiData); 
 
    pointArray2 = new google.maps.MVCArray(taxiData2); 
 

 
    heatmap = new google.maps.visualization.HeatmapLayer({ 
 
    data: pointArray, 
 
    radius: 25, 
 
    opacity: 0.7, 
 
    }) 
 
    heatmap.setMap(map); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
function toggleHeatmap() { 
 
    if (firstData) { 
 
    heatmap.setData(pointArray2); 
 
    firstData = false; 
 
    } else { 
 
    heatmap.setData(pointArray); 
 
    firstData = true; 
 
    } 
 
    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)' 
 
    ] 
 
    heatmap.setOptions({ 
 
    gradient: heatmap.get('gradient') ? null : gradient 
 
    }); 
 
} 
 

 
var map = null; 
 
var heatmap = null; 
 
var heatmap2 = null; 
 
var pointArray = null; 
 
var pointArray2 = null; 
 
var firstData = true; 
 

 
var taxiData = [ 
 
    new google.maps.LatLng(48.239581, 11.579585), 
 
    new google.maps.LatLng(48.139581, 11.679585), 
 
    new google.maps.LatLng(48.339581, 11.779585), 
 
    new google.maps.LatLng(48.139581, 11.879585), 
 
    new google.maps.LatLng(48.239581, 11.479585), 
 
    new google.maps.LatLng(48.139581, 11.379585), 
 
    new google.maps.LatLng(48.239581, 11.279585), 
 
    new google.maps.LatLng(48.139581, 11.179585), 
 

 
]; 
 

 
var taxiData2 = [ 
 
    new google.maps.LatLng(48.139581, 11.579585), 
 
    new google.maps.LatLng(48.239581, 11.679585), 
 
    new google.maps.LatLng(48.139581, 11.779585), 
 
    new google.maps.LatLng(48.339581, 11.879585), 
 
    new google.maps.LatLng(48.139581, 11.479585), 
 
    new google.maps.LatLng(48.239581, 11.379585), 
 
    new google.maps.LatLng(48.139581, 11.279585), 
 
    new google.maps.LatLng(48.239581, 11.179585), 
 
];
html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization"></script> 
 
<div> 
 
    <div id="panel"> 
 
    <button onclick="toggleHeatmap()" class="btn btn-info">Anzeige wechseln</button> 
 
    </div> 
 
    <div id="map_canvas" style="height:450px; width:100%;"></div> 
 
</div>