Question

我必须根据全球各种用户提供的坐标（经度和纬度）创建谷歌地图标记。这意味着每个用户都有一个标记，指向他们从表单输入的位置。我有这样的谷歌地图：

`<!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的新手。任何帮助将不胜感激。谢谢！

Answer 1

首先将提交按钮更改为：

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

然后添加此javascript以在您单击提交时获取所有这些值

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

}

使用Javascript变量的表单字段

1 个答案: