0

У меня есть этот HTML файл:Дисплей Схемы Зоны активности Google Maps API не работает

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map_canvas { height: 100% } 
    </style> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvAngRk5ZYPJYFhDNzHqJS1Nqf0SYPBgM&libraries=visualization"> 
    </script> 
    <script type="text/javascript"> 
     var markers = []; 
     var points = []; 
     var heatPoints = []; 
     var map; 
     var heatmap; 
     function initialize() { 
     var myCenter = new google.maps.LatLng(-27.495471, 153.012198) 
     var mapOptions = { 
      center: myCenter, 
      zoom: 12, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

     map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
     var tilesloaded=true; 
     google.maps.event.addListenerOnce(map, 'tilesloaded', function(){ 
      if(tilesloaded ==true){ 
      window.alert(); 
      tilesloaded=false; 
      } 
     }); 
     heatmap = new google.maps.visualization.HeatmapLayer({ 
       data: heatPoints, 
       radius : document.getElementById('map_canvas').offsetHeight/10; 
       map:map 
      }); 
     } 
    document.addPoint = function addPoint(info){ 
     var array = info.split(','); 
     var a = array[0], b = array[1], c = array[2], d = array[3], e = array[4]; 
     var content = "Latitude: " + a + " ** Longitude: " + b + " ** Wind: " + c + " ** Temp: " + d + " ** Light: " + e; 
     var lat = parseFloat(a); 
     var longi = parseFloat(b); 
     var wind = parseFloat(c); 
     var temp = parseInt(d); 
     var light = parseFloat(e); 
     points.push({ "lat": lat, "lng": longi, "temp": temp, "light": light, "wind": wind }); 
     var marker = new google.maps.Marker({ 
       draggable: false, 
       animation: google.maps.Animation.DROP, 
       position: new google.maps.LatLng(lat, longi), 
       map: map 
      }); 
     var infowindow = new google.maps.InfoWindow({ 
      content: content 
     }); 
     marker.addListener('click', function() { 
      infowindow.open(map, marker); 
     }); 
     markers.push(marker); 
    } 
    document.displayHeatmap = function displayHeatmap(measurement) { 
      var setHeatmap = (property => heatmap.setData(points.map(x => ({ location: new google.maps.LatLng(x.lat, x.lng), weight: x[property] })))); 
      if (measurement === "none") { 
       heatmap.setData([]); 
      } else { 
       setHeatmap(measurement); 
      } 
     } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
    </body> 
</html> 

В моем веб-движка, я использую функцию addPoint передавать данные и отображать его как тепловые карты (зависит от передача параметров в displayHeatmap метод: нет, температура, ветер, свет)

engine.executeScript("document.addPoint('-27.49,153,11.2,27,1102')"); 
engine.executeScript("document.addPoint('-27.488,153.109,15.2,26,1105')"); 
engine.executeScript("document.addPoint('-27.487,153.111,13.4,28,1106')"); 
engine.executeScript("document.addPoint('-27.491,153.108,14.5,29,1109')"); 
engine.executeScript("document.addPoint('-27.492,153.112,11.5,26,1111')"); 
engine.executeScript("document.displayHeatmap('temp')"); 

Функция addPoint была испытана (моя программа работает нормально ж без нагрева)

В чем проблема с моей javascirpt?

Любые указатели помогут

ответ

0

Должна ли карта выглядеть так?

enter image description here

Если да, то я вижу только проблемы с кодом. Запятая должна быть в конце этой строки

radius : document.getElementById('map_canvas').offsetHeight/10; 

Подобно этому

data: heatPoints, 
radius: document.getElementById('map_canvas').offsetHeight/10, 
map: map