0
Google 히트 맵 계층을 사용하여 히트 맵을 만들려고합니다. 입력 데이터가 XML 파일에 있습니다.방법 : XML 파일의 개체 배열
내가 이런 입구가 포함 된 배열을 만들 필요가 :
var heatmapData = [
{location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
{location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
{location: new google.maps.LatLng(37.782, -122.447), weight: 0.5}
]
(https://developers.google.com/maps/documentation/javascript/heatmaplayer)
을 나는 내 XML 파일에서 위도와 경도 데이터를 읽고 배열로 미는 기능을 가지고, 구글 히트 맵 레이어 기능에 의해 사용됩니다.
이 나에게이 같은 배열을 제공합니다
난 내 체중 데이터 (weed_index 내 XML 파일) 배열 및 검색의 내 시간을 추가하는 방법을 잘 모릅니다 그러나var heatmapData = [
new google.maps.LatLng(37.782, -122.447),
new google.maps.LatLng(37.782, -123.447),
new google.maps.LatLng(37.782, -122.447)
]
날이에 붙어 남아있는 포인트.
어떻게하면됩니까?
내 프로젝트는
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heatmaps</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
background-color: #fff;
border: 1px solid #999;
left: 25%;
padding: 5px;
position: absolute;
top: 10px;
z-index: 5;
}
</style>
</head>
<body>
<div id="floating-panel">
<button onclick="toggleHeatmap()">Toggle Heatmap</button>
<button onclick="changeGradient()">Change gradient</button>
<button onclick="changeRadius()">Change radius</button>
<button onclick="changeOpacity()">Change opacity</button>
</div>
<div id="map"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
// This example requires the Visualization library. Include the libraries=visualization
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
var map, heatmap;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 30,
center: {lat: 5622.5693*0.01, lng: 934.2757*0.01},
mapTypeId: 'satellite'
});
var heatmapData = []; //array to hold objects parsed form XML file
var markerCoords;
loadXMLFile();
function loadXMLFile(){
//var filename = 'data.xml';
var filename = 'markers.xml';
$.ajax({
type: "GET",
url: filename ,
dataType: "xml",
success: parseXML,
error : onXMLLoadFailed
});
function onXMLLoadFailed(){
alert("An Error has occurred.");
}
function parseXML(xml){
var bounds = new google.maps.LatLngBounds();
$(xml).find("location").each(function(){
//Read the latitude, longitude and weed indexfor each location
var lat = $(this).find('lat').text()*0.01; //coordinates in XML are in wrong format. Multiply by 0.01 to fix
var lng = $(this).find('lng').text()*0.01; //coordinates in XML are in wrong format. Multiply by 0.01 to fix
var weed_index = $(this).find('weed_index').text();
//markerCoords = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
markerCoords = {
location: new google.maps.LatLng(+lat, +lng),
weight: +weed_index
};
//itterate objects into heatmapData array
heatmapData.push(markerCoords);
bounds.extend(markerCoords);
//console.log(heatmapData);
});
//map.objects.add(container);
//map.zoomTo(container.getBoundingBox(), false);
map.fitBounds(bounds);
}
}
/*var heatmapData = [
{location: new google.maps.LatLng(56.225693, 9.342757), weight: 0.5},
{location: new google.maps.LatLng(56.225694, 9.342154), weight: 3}
];*/
heatmap = new google.maps.visualization.HeatmapLayer({
data: heatmapData,
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.5);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMJI8WJuBPtFqp3VVB7bkLsEWhEtU3Uco&libraries=visualization&callback=initMap">
</script>
}
</body>
</html>
XML 파일은 다음과 같습니다 여기에 있습니다 :
이이<?xml version="1.0" encoding="UTF-8"?>
<locations>
<location id="1">
<lat>5622.5693</lat>
<lng>934.2757</lng>
<weed_index>21</weed_index>
</location>
<location id="2">
<lat>5622.5693</lat>
<lng>934.2757</lng>
<weed_index>10</weed_index>
</location>
</locations>
* "무게 데이터를 읽고 배열에 밀어 넣으려고 노력했습니다.": 문제를 설명해주십시오. "붙임을 당함"은 매우 드러나지 않습니다. – trincot
안녕하세요 trincot. 의견을 보내 주셔서 감사합니다. 요점을 알았어. 나는 그 질문을 갱신했다. 어떻게 해야할지 모르겠다, 배열의 각 문자열 (객체?)에 가중치 데이터를 추가하는 것입니다. – toebs