PDA

View Full Version : سوال: کمک در زخیره اطلاعات در دیتابیس در کار با نقشه های گوگل



hamidhassas
یک شنبه 31 اردیبهشت 1396, 11: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>

plague
یک شنبه 31 اردیبهشت 1396, 15:25 عصر
اول باید یه مارکر تعریف کنی که من کدش رو ندیدم یعنی تعریف نکردی (همون نشونه قرمز که میکشی رو نققشه و رها میکنی در مکان مورد نظرت )
مارکر یه رویداد داره برای dragend یا همچین چیزی که وقتی اون رو روی نقشه میکشی و در مکان جدید رها میکنی اجرا میشه
توی اون رویداد میتونی مختصات جدید مارکر رو بگیری و توی یک فیلدی یا هرجای دیگه زخیره کنی بعد وقتی کاربر دکمه آپدیت رو زد محتویات اون فیلدار و بریزی تو دیتابیس
البته اگه ایجکس بنویسی کدت رو شاید بشه مستقیما به مختصات مارکر دسترسی پیدا کرد و دیگه رویداد نویسی نداشته باشه
این لینکارو نگاه کن

http://stackoverflow.com/questions/11390453/google-maps-drag-and-dragend-event-listeners-wont-work-if-marker-created-by-clic
http://stackoverflow.com/questions/5290336/getting-lat-lng-from-google-marker

hamidhassas
یک شنبه 31 اردیبهشت 1396, 16:45 عصر
دوستان اگر کسی میتونه کمک کنه و سورس کد برام بزاره تگر هم میدونید هذینه بدم مشکلی نداره با شماره 09367147548 تماس بگیرید.


خواهشا کمک کنید بخاطر پروژه درسیم هست و یک هفته بیشتر فرصت ندارد.

plague
دوشنبه 01 خرداد 1396, 03:54 صبح
مارکر یه lt و یه lg داره که یک نقطه رو روی نقشه با داشتن این مختصات نشون میدن
اگه این پاسخ رو نگاه بکنی
http://stackoverflow.com/a/5326409/590589

میبنی که تو رویداد dragend (یعنی وقتی مارکر رو کشید و رها کرد رو مکان مورد نظرش ) هر دو روگرفته


google.maps.event.addListener(myMarker, 'dragend', function(evt){
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});

hamidhassas
دوشنبه 01 خرداد 1396, 09:50 صبح
من میخوام نقشه رو نمایش بدم بعد کاربر روی نقشه شروع کنه یک سری نقطه با کلیک کردن به دلخواه انتخاب کنه
این نقاط باید با خط به هم متصل بشن و هر نقطه یک مارکر نشون بده

روی هر مارکر که کلیک شد میخوام اول موقعیت جغرافیایی و ارتفاع اون نقطه نمایش داده بشه بعد کاربر بتونه موقعیت جغرافیایی و ارتفاع اون نقطه با کلیک کردن زخیره کنه در دیتابیس

plague
دوشنبه 01 خرداد 1396, 16:30 عصر
ذخیره کردن تو دیتبایس خب طبیعتا هیچ ربطی به نقشه نداره که تو مثال ها کسی ازش نام ببره دیگه شما باید بلد باشی چجوری بریزی تو دیتابیس !

شما بیاد بگیر چجوری با ایجکس کار کنی بعد یه تابع بنویس که مختصات مارکر ها رو بگیره و با ایجکس بفرسته برای کد php و اونجا تو دیتبایس زخیره کنه

در ضمن من نمیدونم منظورت از ارتفاع چیه همونجوری که گفتم یه lt داریم و یه lg که مکان مارکر رو نقشه رو مشخص میکنن

hamidhassas
دوشنبه 01 خرداد 1396, 17:36 عصر
ذخیره کردن تو دیتبایس خب طبیعتا هیچ ربطی به نقشه نداره که تو مثال ها کسی ازش نام ببره دیگه شما باید بلد باشی چجوری بریزی تو دیتابیس !

من میدونم کد زخیره چیه و باید چکار کنم


شما بیاد بگیر چجوری با ایجکس کار کنی بعد یه تابع بنویس که مختصات مارکر ها رو بگیره و با ایجکس بفرسته برای کد php و اونجا تو دیتبایس زخیره کنه

مقادیر رو نمیدونم چطوری باید دریافت کنم که بخوام با متد GET یا POST ارسال کنم اگر کد بالا رو مشاهده کنید مقادیر رو داره با متد GET ارسال میکنه اما در عمل هیچ مقداری ارسال نمیشه و همه مثال های در اینترنت هم دقیقا همین جوری نوشته شده اما کار نمی کنند



در ضمن من نمیدونم منظورت از ارتفاع چیه همونجوری که گفتم یه lt داریم و یه lg که مکان مارکر رو نقشه رو مشخص میکنن


شما کد اولی که در پست اول هست رو اگر روی لوکال اجرا کنید متوجه می شوید

هر مختصات جغرافیایی که دارای طول و عرض ( lat , lan) هست دارای یک ارتفاع از سطح دریا می باشد من با کد درون پست اول مقدارهای طول و عرض و ارتفاع رو نمایش میدم اما این مقدارها فقط نمایش داده میشن و نمیتونم این مقادیر رو بر یک متغیر قرار بدو و بعد ارسال کنم به دیتابیس

plague
دوشنبه 01 خرداد 1396, 19:56 عصر
اون رو باید دیباگ کنی تا ببینی مشکلت چیه
تو تابع save اول marker رو console.log کن ببین چیه توش اگه خالی نبود بعد marker.getPosition() رو لاگ کن ببین چیه توش
اینجوری متوجه میشی کجای کار مشکل داری
ممکنه marker اصلا قابل دسترسی نباشه تو تابع save
ممکنه مجبور باشی تورویداد کلیک مارکر مختصات رو بگیری بریزی تو یه متغیر گلوبال دیگه و توی سیو از اون استفاده کنی

hamidhassas
دوشنبه 01 خرداد 1396, 21:00 عصر
اون رو باید دیباگ کنی تا ببینی مشکلت چیه
تو تابع save اول marker رو console.log کن ببین چیه توش اگه خالی نبود بعد marker.getPosition() رو لاگ کن ببین چیه توش
اینجوری متوجه میشی کجای کار مشکل داری
ممکنه marker اصلا قابل دسترسی نباشه تو تابع save
ممکنه مجبور باشی تورویداد کلیک مارکر مختصات رو بگیری بریزی تو یه متغیر گلوبال دیگه و توی سیو از اون استفاده کنی

نمیدونم باید چکار کنم میشه کد برام بزارید

hamidhassas
جمعه 05 خرداد 1396, 14:30 عصر
با کد زیر تونستم اطلاعات ارسال و زخیره کنم تنها الان یک مشکل دارم اون هم این هست که ارتفاع هر نقطه از سطح دریا رو نمتونم بدست بیارو و زخیره کنم
کسی میتونه تو همین کد برام ارتفاع از سطح دریا رو هم که در پست اول هست بنویسه





<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>From Info Windows to a Database: Saving User-Added Form Data</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family:Tahoma;
}
</style>
</head>
<body>
<div id="map" height="460px" width="100%"></div>
<div id="form">
<table>
<tr><td>نام پروژه:</td><td><input type="text" name="project" id="project"/></td></tr>
<tr><tr><td></td><td><input type='button' value='Save' onclick='saveData()'/></td></tr>
</table>
</div>
<div id="message">Location saved</div>
<script>
var map;
var marker;
var infowindow;
var messagewindow;
function initMap() {
var california = {lat: 29.686412326122116, lng: 52.47117519378662};
map = new google.maps.Map(document.getElementById('map'), {
center: california,
zoom: 16
});
infowindow = new google.maps.InfoWindow({
content: document.getElementById('form')
})
messagewindow = new google.maps.InfoWindow({
content: document.getElementById('message')
});
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 project = escape(document.getElementById('project').value);
var latlng = marker.getPosition();
var url = 'phpsqlinfo_addrow.php?project=' + project + '&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);
}
function doNothing () {
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHJ7ql1MsYQywKoG63R6KAVYXzvkubVI0&callback=initMap">
</script>
</body>
</html>

plague
جمعه 05 خرداد 1396, 16:48 عصر
باید درخواست بفرستی بهapi و پوزیشن مورد نظرت رو بگی تا بهت بلندی رو برگردونه

https://maps.googleapis.com/maps/api/elevation/json?locations=39.7391536,-104.9847034&key=YOUR_API_KEY

خروجی

{
"results" : [
{
"elevation" : 1608.637939453125,
"location" : {
"lat" : 39.73915360,
"lng" : -104.98470340
},
"resolution" : 4.771975994110107
}
],
"status" : "OK"
}

elevation توی خروجی همون ارتفاعه


https://developers.google.com/maps/documentation/elevation/intro