Карта карт API Карт Google - Функции не работают правильно

-1

Я работаю с API Карт Google для разработки Heatmap. Heatmap использует данные, импортированные из файла GeoJSON, хранящиеся локально, я сделал это, используя найденную документацию Here. Тем не менее, я попытался добавить функции из найденной документации Here (т. Е. Toggle Heatmap, Change Gradient и т. Д.), И по какой-то причине она не работает, сама карта загружается с импортированными данными GeoJSON, но функции не кажутся работать. Может ли кто-нибудь указать мне в правильном направлении, почему функции не работают? Ниже вы найдете мой HTML. В этом примере я использую данные Google GeoJSON, которые определены в коде.Карта карт API Карт Google - Функции не работают правильно

<!DOCTYPE html> 
<html> 
<head> 
<style> 
     #map { 
    height: 100%; 
    } 

    html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
    #floating-panel { 
    position: absolute; 
    top: 60px; 
    left: 5px; 
    z-index: 5; 
    background-color: transparent; 
    padding: 5px; 
    border: none; 
    text-align: center; 
    font-family: 'Roboto','sans-serif'; 
    line-height: 30px; 
    padding-left: 10px; 
    } 

</style> 
</head> 
<body> 
<div id="floating-panel"> 
    <button onclick="toggleHeatmap()">Toggle Heatmap</button><br> 
    <button onclick="changeGradient()">Change gradient</button><br> 
    <button onclick="changeRadius()">Change radius</button><br> 
    <button onclick="changeOpacity()">Change opacity</button><br> 
    </div> 
<div id="map"></div> 
<script> 
    var map; 
    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 6, 
     center: new google.maps.LatLng(54.378051, -3.435973), 
     mapTypeId: 'terrain' 
    }); 


    var script = document.createElement('script'); 
    script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp'; 
    document.getElementsByTagName('head')[0].appendChild(script); 

    } 

    function eqfeed_callback(results) { 
    var heatmapData = []; 
    for (var i = 0; i < results.features.length; i++) { 
     var coords = results.features[i].geometry.coordinates; 
     var latLng = new google.maps.LatLng(coords[1], coords[0]); 
     heatmapData.push(latLng); 
    } 
    var heatmap = new google.maps.visualization.HeatmapLayer({ 
     data: heatmapData, 
     dissipating: true, 
     map: map 
    }); 
    function toggleHeatmap() { 
    heatmap.setMap(heatmap.getMap() ? null : map); 
    } 

    function changeGradient() { 
    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.set('gradient', heatmap.get('gradient') ? null : gradient); 
    } 

    function changeRadius() { 
    heatmap.set('radius', heatmap.get('radius') ? null : 20); 
    } 

    function changeOpacity() { 
    heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2); 
    } 
    } 
</script> 
<script async defer 
    src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization&callback=initMap"> 
</script> 
</body> 
</html>

источник

2017-02-14 Connorkirk

toggleHeatmap и другие функции не являются глобальными, они находятся внутри eqfeed_callback. Извлеките их из eqfeed_callback, чтобы сделать их глобальными.

источник

2017-02-14 10:14:23 user1087079

Не могли бы вы привести рабочий пример этого? по какой-то причине он просто сломал карту, когда я попробовал, спасибо! – Connorkirk

Извините, я могу указать только на проблему синтаксиса js, я не мог понять логику использования api-карты google. Вы можете узнать больше о google-карте api docs. – user1087079

Карта карт API Карт Google - Функции не работают правильно

ответ

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