hamidhassas
یک شنبه 31 اردیبهشت 1396, 12:24 عصر
من میخوام کاری کنم که کاربر وقتی روی نقشه کلیک میکنه طول و عرض و ارتفاع نقطه انتخاب شده نمایش داده بشود و بعد با زدن یک دکمه در دیتابیس زخیره بشه
تا مرحله نمایش اطلاعات انجام دادم اما نمیدونم چطوره مقادیر رو زخیره کنم
سورس کامل میزارم
لطفا کمک کنید.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>نمایش مسیر و موقعیت جغرافیایی</title>
<link rel="stylesheet" type="text/css" href="style/main.css">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
p{
direction:rtl;
line-height:20px;
}
.titel
{
font-family:B Titr;
font-size:16px;
color:#000000;
text-align:center;
}
.subject
{
font-family:tahoma;
font-size:14px;
color:#035900;
}
.value
{
font-size:16px;
color:#080076;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 32.29439, lng: 53.99299999999994}, // Denali.
mapTypeId: 'terrain'
});
var elevator = new google.maps.ElevationService;
var infowindow = new google.maps.InfoWindow({map: map});
// Add a listener for the click event. Display the elevation for the LatLng of
// the click inside the infowindow.
map.addListener('click', function(event) {
displayLocationElevation(event.latLng, elevator, infowindow);
});
}
function displayLocationElevation(location, elevator, infowindow) {
// Initiate the location request
elevator.getElevationForLocations({
'locations': [location]
}, function(results, status) {
infowindow.setPosition(location);
if (status === google.maps.ElevationStatus.OK) {
// Retrieve the first result
if (results[0]) {
// Open the infowindow indicating the elevation at the clicked position.
infowindow.setContent('<p class="titel">مختصات جغرافیایی</p><p class="subject">ارتفاع: <span class="value">' + results[0].elevation + ' </span> متر </p><p class="subject">مختصات جغرافیایی:<br /><span align="center" class="value">' + location +'</span></p><br /><input type="button" value="Save" onclick="saveData()"/>');
} else {
infowindow.setContent('No results found');
}
} else {
infowindow.setContent('Elevation service failed due to: ' + status);
}
});
}
function saveData() {
var name = escape(document.getElementById('name').value);
var latlng = marker.getPosition();
var url = 'phpsqlinfo_addrow.php?name=' + name + '&address=' + address +
'&type=' + type + '&lat=' + latlng.lat() + '&lng=' + latlng.lng();
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
infowindow.close();
messagewindow.open(map, marker);
}
});
}
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);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHJ7ql1MsYQywKoG63R6KAVYXzvkubVI0&callback=initMap">
</script>
</body>
</html>
تا مرحله نمایش اطلاعات انجام دادم اما نمیدونم چطوره مقادیر رو زخیره کنم
سورس کامل میزارم
لطفا کمک کنید.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>نمایش مسیر و موقعیت جغرافیایی</title>
<link rel="stylesheet" type="text/css" href="style/main.css">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
p{
direction:rtl;
line-height:20px;
}
.titel
{
font-family:B Titr;
font-size:16px;
color:#000000;
text-align:center;
}
.subject
{
font-family:tahoma;
font-size:14px;
color:#035900;
}
.value
{
font-size:16px;
color:#080076;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 32.29439, lng: 53.99299999999994}, // Denali.
mapTypeId: 'terrain'
});
var elevator = new google.maps.ElevationService;
var infowindow = new google.maps.InfoWindow({map: map});
// Add a listener for the click event. Display the elevation for the LatLng of
// the click inside the infowindow.
map.addListener('click', function(event) {
displayLocationElevation(event.latLng, elevator, infowindow);
});
}
function displayLocationElevation(location, elevator, infowindow) {
// Initiate the location request
elevator.getElevationForLocations({
'locations': [location]
}, function(results, status) {
infowindow.setPosition(location);
if (status === google.maps.ElevationStatus.OK) {
// Retrieve the first result
if (results[0]) {
// Open the infowindow indicating the elevation at the clicked position.
infowindow.setContent('<p class="titel">مختصات جغرافیایی</p><p class="subject">ارتفاع: <span class="value">' + results[0].elevation + ' </span> متر </p><p class="subject">مختصات جغرافیایی:<br /><span align="center" class="value">' + location +'</span></p><br /><input type="button" value="Save" onclick="saveData()"/>');
} else {
infowindow.setContent('No results found');
}
} else {
infowindow.setContent('Elevation service failed due to: ' + status);
}
});
}
function saveData() {
var name = escape(document.getElementById('name').value);
var latlng = marker.getPosition();
var url = 'phpsqlinfo_addrow.php?name=' + name + '&address=' + address +
'&type=' + type + '&lat=' + latlng.lat() + '&lng=' + latlng.lng();
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
infowindow.close();
messagewindow.open(map, marker);
}
});
}
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);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHJ7ql1MsYQywKoG63R6KAVYXzvkubVI0&callback=initMap">
</script>
</body>
</html>