HTML <form>의 입력을 Javascript 기능에 전달하는 방법은 무엇입니까?

Question

<form></form>에서 히트 맵에 점을 연결하는 자바 스크립트 기능으로 입력 (위도 & 경도)을 전달해야합니다. 응답을 모으고 변수에 저장하는 방법을 알아 냈습니다.하지만 이제는이를 특정 형식의 다른 함수 목록에 추가해야합니다.

HTML 형태 :

<form name="sightings" action="" method="GET"> 
    <input type="text" name="area" placeholder="City, Town, etc."> 
    <input type="submit" value="Sighting" onClick="formResults(this.form)"> 
</form> 

JS의 VAR에 <input> 켜기 :

function formResults (form) { 
    var areaTyped = form.area.value; 
    alert ("Your data has been submitted."); 
    return areaTyped; 
} 

내가 변수에 추가해야 할 사항의 목록 :

function getPoints() { 
    var heatmapData = [ 
    {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5}, 
    new google.maps.LatLng(37.782, -122.445), 
    new google.maps.LatLng(37.782, -122.437), 
    new google.maps.LatLng(37.785, -122.443), 
    new google.maps.LatLng(37.785, -122.439), 
    ] 
    return heatmapData; 
} 

모든 지점을 배열 heatmapData의 새 google.maps.LatLng 형식 (Latitu 드, 경도). HTML 폼에서 각 변수를 가져 와서 적절한 형식으로 점 목록에 추가 할 수 있습니까?

히트 맵이 작동하며 다음과 같습니다 : Heatmap.

그러나 가열 된 지점은 내가 수동으로 부여한 포인트 일뿐입니다. 히트 맵에 <form>의 입력을 어떻게 연결합니까?

Answer 1

검색 상자를지도 (Places search box sample 참조)로 이동 한 다음 사용자가 Google지도 검색에서 제안을 선택하면 히트 맵 레이어에 포인트를 추가하고 heatmap.setData()에 업데이트 된 포인트 배열을 지정하여 호출 할 수 있습니다.

google.maps.event.addDomListener(window, 'load', initMap); 
 

 
var heatmapData = [ 
 
    {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5}, 
 
    new google.maps.LatLng(37.782, -122.445), 
 
    new google.maps.LatLng(37.782, -122.437), 
 
    new google.maps.LatLng(37.785, -122.443), 
 
    new google.maps.LatLng(37.785, -122.439), 
 
    ]; 
 
function initMap() { 
 
    var myLatlng = new google.maps.LatLng(37.782, -122.447); 
 

 
    var myOptions = { 
 
    zoom: 6, 
 
    center: myLatlng, 
 
    mapTypeControl: true, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    } 
 
    var mapCanvas = document.getElementById("map-canvas"); 
 
    var map = new google.maps.Map(mapCanvas, myOptions); 
 
    var marker = new google.maps.Marker({ 
 
    position: myLatlng, 
 
    title: "Hello World!" 
 
    }); 
 

 
    // To add the marker to the map, call setMap(); 
 
    marker.setMap(map); 
 
    var heatmap = new google.maps.visualization.HeatmapLayer({ 
 
      data: heatmapData, 
 
      map: map 
 
     }); 
 
    var input = document.getElementById('area'); 
 
    var searchBox = new google.maps.places.SearchBox(input); 
 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
 

 
    // Bias the SearchBox results towards current map's viewport. 
 
    map.addListener('bounds_changed', function() { 
 
    searchBox.setBounds(map.getBounds()); 
 
    }); 
 
    var markers = []; 
 
    searchBox.addListener('places_changed', function() { 
 
    var places = searchBox.getPlaces(); 
 

 
    if (places.length == 0) { 
 
     return; 
 
    } 
 

 
    // Clear out the old markers. 
 
    markers.forEach(function(marker) { 
 
     marker.setMap(null); 
 
    }); 
 
    markers = []; 
 

 
    // For each place, get the icon, name and location. 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    places.forEach(function(place) { 
 
     if (!place.geometry) { 
 
     console.log("Returned place contains no geometry"); 
 
     return; 
 
     } 
 

 
     heatmapData.push(place.geometry.location); 
 
     heatmap.setData(heatmapData); 
 

 
     if (place.geometry.viewport) { 
 
     // Only geocodes have viewport. 
 
     bounds.union(place.geometry.viewport); 
 
     } else { 
 
     bounds.extend(place.geometry.location); 
 
     } 
 
    }); 
 
    //map.fitBounds(bounds); 
 
    }); 
 

 
}

#mapContainer, 
 
#map-canvas { 
 
    height: 250px; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places,visualization'></script> 
 
<form name="sightings" action="" method="GET"> 
 
    <input type="text" name="area" placeholder="City, Town, etc." id="area" class="controls"> 
 
    <!-- not needed anymore: <input type="button" value="Sighting" onClick="searchMap()">--> 
 
</form> 
 
<div id="mapContainer"> 
 
    <div id="map-canvas"></div> 
 
</div>