我试图用可拖动标记制作地图，但现在我的地图无效。我在下面附上了我的代码：
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "report";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$error = false;
if ( isset($_POST['submit']) ) {
echo "if";
// clean user inputs to prevent sql injections
$name = trim($_POST['name']);
$name = strip_tags($name);
$name = htmlspecialchars($name);
$address = trim($_POST['address']);
$address = strip_tags($address);
$address = htmlspecialchars($address);
$latitude = trim($_POST['latitude']);
$latitude = strip_tags($latitude);
$latitude = htmlspecialchars($latitude);
$longitude = trim($_POST['longitude']);
$longitude = strip_tags($longitude);
$longitude = htmlspecialchars($longitude);
$category = trim($_POST['category']);
$category = strip_tags($category);
$category = htmlspecialchars($category);
$message = trim($_POST['description']);
$message = strip_tags($message);
$message = htmlspecialchars($message);
// basic name validation
$nameError = false;
if (empty($name)) {
$error = true;
$nameError = "Please enter your full name.";
} else if (strlen($name) < 3) {
$error = true;
$nameError = "Name must have atleat 3 characters.";
} else if (!preg_match("/^[a-zA-Z ]+$/",$name)) {
$error = true;
$nameError = "Name must contain alphabets and space.";
}
// basic address validation
if (empty($address)) {
$error = true;
$addressError = "Please enter your address.";
}
// basic latitude validation
if (empty($latitude)) {
$error = true;
$latitudeError = "Please enter your latitude.";
}
// basic longitude validation
if (empty($longitude)) {
$error = true;
$longitudeError = "Please enter your longitude.";
}
// basic category validation
if (empty($category)) {
$error = true;
$categoryError = "Please enter your category.";
}
// basic message validation
if (empty($message)) {
$error = true;
$messageError = "Please enter your description.";
} else if (strlen($message) < 3) {
$error = true;
$messageError = "description must have atleat 3 characters.";
}
// if there's no error, continue to insert
if( !$error ) {
$query = "INSERT INTO users ( userName , userAddress , userLat , userLong , userCategory , userMessage) VALUES( '$name', '$address', '$latitude', '$longitude', '$category', '$message')";
// $query = "INSERT INTO users ( userName , userMobile , userEmail , userMessage) VALUES( 'abc', 43, 'sdg@dg.vcvb', 'sf')";
//$query = "select * from users";
if (mysqli_query($conn, $query)) {
// echo "New record created successfully";
$errTy = "success";
$errMS = "Successfully submitted";
unset($name);
// unset($address);
// unset($latitude);
// unset($longitude);
unset($category);
unset($message);
} else {
// echo "Error: " . $sql . "<br>" . mysqli_error($conn);
$errType = "danger";
$errMSG = "Something went wrong, try again later...";
}
mysqli_close($conn);
}
else{
echo "el";
}
}
else{
echo "else";
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
#myMap {
height: 650px;
width: 480px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var map;
var marker;
var myLatlng = new google.maps.LatLng(20.268455824834792,85.84099235520011);
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
function initialize(){
var mapOptions = {
zoom: 18,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("myMap"), mapOptions);
marker = new google.maps.Marker({
map: map,
position: myLatlng,
draggable: true
});
geocoder.geocode({'latLng': myLatlng }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('#address').val(results[0].formatted_address);
$('#latitude').val(marker.getPosition().lat());
$('#longitude').val(marker.getPosition().lng());
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
google.maps.event.addListener(marker, 'dragend', function() {
geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('#address').val(results[0].formatted_address);
$('#latitude').val(marker.getPosition().lat());
$('#longitude').val(marker.getPosition().lng());
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div style="float:left;">
<h2>Report your problem</h2>
<?php
if ( isset($errMSG) ) {
?>
<div class="form-group">
<div class="alert alert-<?php echo ($errTy=="success") ? "success" : $errType; ?>">
<span class="glyphicon glyphicon-info-sign"></span> <?php echo $errMSG; ?>
</div>
</div>
<?php
}
?>
<form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" autocomplete="off">
User name:<br>
<input type="text" name="name" placeholder="Enter name" required><br><br>
<span><?php echo $nameError; ?></span>
User address:<br>
<input id="address" name="address" type="text" style="width:500px;"/><br><br>
<!-- <?php echo $addressError; ?> -->
<input type="text" id="latitude" name="latitude" placeholder="Latitude"/>
<!--<?php echo $latitudeError; ?>-->
<input type="text" id="longitude" name="longitude" placeholder="Longitude"/>
<!--<?php echo $longitudeError; ?> --><br><br>
User category:<br>
<select name='category'> <option value='-- Pick a category --'>-- Pick a category --</option> <option value='Abandoned vehicles'>Abandoned vehicles</option> <option value='Bus stops'>Bus stops</option> <option value='Car parking'>Car parking</option> <option value='Dog fouling'>Dog fouling</option> <option value='Flyposting'>Flyposting</option> <option value='Flytipping'>Flytipping</option> <option value='Graffiti'>Graffiti</option> <option value='Parks/landscapes'>Parks/landscapes</option> <option value='Pavements/footpaths'>Pavements/footpaths</option> <option value='Potholes'>Potholes</option> <option value='Public toilets'>Public toilets</option> <option value='Roads/highways'>Roads/highways</option> <option value='Road traffic signs'>Road traffic signs</option> <option value='Rubbish (refuse and recycling)'>Rubbish (refuse and recycling)</option> <option value='Street cleaning'>Street cleaning</option> <option value='Street lighting'>Street lighting</option> <option value='Street nameplates'>Street nameplates</option> <option value='Traffic lights'>Traffic lights</option> <option value='Trees'>Trees</option> <option value='Other'>Other</option></select><br><br>
<!--<?php echo $categoryError; ?> -->
User description:<br>
<textarea type="text" name="description" placeholder="description" required cols="25" rows="7" /></textarea><br><br>
<!-- <?php echo $messageError; ?> -->
<input type="submit" name="submit">
</form>
</div>
<div id="myMap"></div><br/>
</body>
</html>