-1
我想知道是否有人可以告訴我爲什麼這個HTML代碼的作品，並進入我的數據庫...地址，停車場和街道掃描進入saveData（）函數ok在下部。谷歌地圖自動完成地址功能
其他代碼的html頁面是類似的，但我得到一個錯誤...未捕獲的ReferenceError：saveData不是onclick。釷是在第二頁的HTML代碼是我得到的錯誤我想要的地址，停車場和streetsweeping進入savaData（）函數。當我做document.getElementById（「地址」）。值的值顯示「地址」，但它不會進入數據庫？ - >
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Saving User Location Parking Situation</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var marker;
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(33.884277, -118.325066);
var options = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
var html = "<table>"+"<tr><td>Input your location and the parking situation</td></tr>"+"<tr><td>Address:</td> <td><input type='text' id='address' /></td></tr>"+"<tr><td>Parking:</td> <td><input type='text' id='parking' /></td> </tr>"+"<tr><td>Street Sweeping:</td> <td><input type='text' id='streetsweeping'/> </td> </tr>"+"<td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
infowindow = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
});
}
function saveData() {
var address = document.getElementById("address").value;
var parking = document.getElementById("parking").value;
var streetsweeping = document.getElementById("streetsweeping").value;
var latlng = marker.getPosition();
var url = "phpsqlinfo_addrow.php?address=" + address +
"&parking=" + parking + "&streetsweeping=" + streetsweeping + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
infowindow.close();
document.getElementById("message").innerHTML = "Location added.";
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body style="margin:0px; padding:0px;" onLoad="initialize()">
<div id="map_canvas" style="width: 450px; height: 800px"></div>
<div id="message"><body><?php echo url ?></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
.controls {
margin-top: 16px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
fieldset {
display: block;
margin-left: 2px;
margin-right: 2px;
padding-top: 0.35em;
padding-bottom: 0.625em;
padding-left: 0.75em;
padding-right: 0.75em;
}
autocomplete {
font-style:normal;
font-weight:bold;
}
.gm-style-iw {
height: 350px;
width: 400px;
}
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places, http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="geomaps.js"></script>
<script>
var marker;
var infowindow;
var address;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(33.884277, -118.325066),
zoom: 13
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var input = /** @type {HTMLInputElement} */(
document.getElementById('pac-input'));
var types = document.getElementById('type-selector');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow({ maxWidth: 600 });
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
marker.setIcon(/** @type {google.maps.Icon} */({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var html = "<form action='#'>"+"<table>"+"<tr><td>Input your location and the parking situation</td></tr>"+"<tr><td>Address:</td> <td><input type='text' id='address' value='"+place.formatted_address+"' disabled /></td></tr>"+"<tr><td>Parking:</td> <td><input type='text' id='parking' /></td> </tr>"+"<tr><td>Street Sweeping:</td> <td><input type='text' id='streetsweeping' /> </td> </tr>"+"<td><input type='button' value='Save & Close' onclick = 'saveData()'/></td></tr>"+"</form>";
infowindow.setContent("<div id='iw'>" + html + "</div>");
function saveData() {
var address = escape(document.getElementById("address").value);
console.log("address");
var parking = document.getElementById("parking").value;
var streetsweeping = document.getElementById("streetsweeping").value;
var latlng = marker.getPosition();
var url = "phpsqlinfo_addrow.php?address=" + address +
"&parking=" + parking + "&streetsweeping=" + streetsweeping + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
infowindow.close();
document.getElementById("message").innerHTML = "Location added.";
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter Your Address">
<div id="map-canvas" style="width: 650px; height: 800px"></div>
<div id="message"></div>
</body>
</html>
[這裏的示例]（http://icandomywebsite.com/zeroparktickets/indexv07b.html）此代碼是一個更advaced地圖實用程序 – user3259530 2015-02-11 06:08:42
謝謝你的工作。 – user3259530 2016-07-11 21:07:54
非常感謝你的工作....編碼是如此複雜，但我正在學習。 – user3259530 2017-10-01 17:04:32