使用表單字段的Javascript變量

我必須創建谷歌地圖標記基於由全球各地用戶提供的座標（經度和緯度）。這意味着每個用戶都會有一個標記，指向他們從表單輸入的位置。我有谷歌地圖這樣的：使用表單字段的Javascript變量

`<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
<title>Google Maps Multiple Markers</title> 
<script 
src="http://maps.googleapis.com/maps/api/js?  key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> 
</script> 
<!--<script src="http://maps.google.com/maps/api/js?sensor=false"></script> --> 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script> 
</head>

<script type="text/javascript"> 
// Define your locations: HTML content for the info window, latitude, longitude 
//THIS IS THE DATA I WANT TO REPLACE WITH USER'S FORM FIELDS 

var locations = [ 
['<h4>Bondi Beach</h4>', -33.890542, 151.274856], 
['<h4>Coogee Beach</h4>', -33.923036, 151.259052], 
['<h4>Cronulla Beach</h4>', -34.028249, 151.157507], 
['<h4>Manly Beach</h4>', -33.80010128657071, 151.28747820854187], 
['<h4>Maroubra Beach</h4>', -33.950198, 151.259302], 
]; 

// Setup the different icons and shadows 
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/'; 

var icons = [ 
    iconURLPrefix + 'red-dot.png', 
    //iconURLPrefix + 'green-dot.png', 
    //iconURLPrefix + 'blue-dot.png', 
    //iconURLPrefix + 'orange-dot.png', 
    //iconURLPrefix + 'purple-dot.png', 
    //iconURLPrefix + 'pink-dot.png',  
    //iconURLPrefix + 'yellow-dot.png' 
] 
var icons_length = icons.length; 


var shadow = { 
    anchor: new google.maps.Point(15,33), 
    url: iconURLPrefix + 'msmarker.shadow.png' 
}; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 1, 
    center: new google.maps.LatLng(51.508742,-0.120850), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    mapTypeControl: true, 
    streetViewControl: false, 
    panControl: false, 
    zoomControlOptions: { 
    position: google.maps.ControlPosition.LEFT_BOTTOM 
    } 
}); 

var infowindow = new google.maps.InfoWindow({ 
    maxWidth: 160 
}); 

var marker; 
var markers = new Array(); 

var iconCounter = 0; 

// Add the markers and infowindows to the map 
for (var i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map, 
    icon : icons[iconCounter], 
    shadow: shadow 
    }); 

    markers.push(marker); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0]); 
     infowindow.open(map, marker); 
    } 
    })(marker, i)); 

    iconCounter++; 
    // We only have a limited number of possible icon colors, so we may have to restart the counter 
    if(iconCounter >= icons_length){ 
    iconCounter = 0; 
    } 
} 

function AutoCenter() { 
    // Create a new viewpoint bound 
    var bounds = new google.maps.LatLngBounds(); 
    // Go through each... 
    $.each(markers, function (index, marker) { 
    bounds.extend(marker.position); 
    }); 
    // Fit these bounds to the map 
    map.fitBounds(bounds); 
} 
AutoCenter(); 
</script> 
</body> 
</html>`

，這是我的HTML表單

<form action="save.php" name="markpositioner" method="post"> 
<label for="latitude">Latitude:</label> 
<input id="latitude" type="text" name="lat" value="" /> 
<label for="longitude">Longitude:</label> 
<input id="longitude" type="text" name="lon" value="" /> 
<br> 
<label for="address">Address:</label> 
<br> 
<textarea rows="4" cols="50" id = "addr" name="txta"></textarea> 
<br> 
<input type ="submit" value= "Submit"/> 
</form> 
<script type="text/javascript" src="gmap.js"></script>

我的問題是我怎麼能替換的硬編碼位置上面的JavaScript與由用戶從表單中的位置？。我已經在網上閱讀了大量文件，但仍然無法獲得它。我是Javascript新手。任何幫助將不勝感激。謝謝！

來源

2014-06-11 Teacha Kyng

當你要替換的值添加此javascript採取所有這些值形成？ –

當用戶填寫表單並按提交。 –

明白了，我很快就會寫信給你 –

首先是改變你的提交按鈕這樣的：

<input type ="submit" value= "Submit" onClick="functionName()"/>

然後當你點擊提交

function functionName(){ 

    var lat = document.getElementById("latitude").value; 
    var lon = document.getElementById("longitude").value; 
    var address = document.getElementById("addr").value; 

    // do whatever you want now with those varialbes 

}

來源

2014-06-11 17:32:06

使用表單字段的Javascript變量

回答

相關問題