#javascript #html #google-maps-api-3 #heatmap #javafx-webengine
#javascript #HTML #google-maps-api-3 #тепловая карта #javafx-webengine
Вопрос:
У меня есть этот HTML-файл:
<!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=AIzaSyAvAngRk5ZYPJYFhDNzHqJS1Nqf0SYPBgMamp;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: none, temp, wind, light).
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?
Любые указатели помогут
Ответ №1:
Должна ли карта выглядеть следующим образом?
Если да, я вижу единственную проблему с вашим кодом. В конце этой строки должна быть запятая
radius : document.getElementById('map_canvas').offsetHeight / 10;
Вот так
data: heatPoints,
radius: document.getElementById('map_canvas').offsetHeight / 10,
map: map