دریافت lat long در openstreetmap از کاربر همانند دیوار
با عرض سلام و خسته نباشید خدمت تمامی عزیزان و بزرگواران
بنده وبسایتی شبیه به دیوار دارم قالب وردپرسش رو مینویسم
و احتیاج دارم به اینکه نقشه openstreetmap رو لود کنم و کاربر از طریق اون بتونه نقطه مکانی که هست رو ثبت کنه
دوستان عزیزی که تجربه دارند چطوری میشه انی کار رو انجام داد که:
کاربر لوکیشن رو به صورت دستی از نقشه انتخاب کنه
lat&long ادرس کاربر رو بتونم دریافت و ذخیره کنم و به نمایش دربیاورم
ممنون میشم کسانی که میتونن یاری کنن بنده رو بهم کمک کنند
متشکرم.
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
سلام دوست عزیز
برای اینکار می تونید از پلتفرم های ایرانی مثل نشان و مپ دات آی آر استفاده کنید.
من هر دو تاش رو استفاده کردم منتها از دومی رازی تر بودم
از این دو تا لینک می تونی استفاده کنی:
https://corp.map.ir
https://platform.neshan.org
سلام باید دوتا eventListiner تعریف کنی به اسم click و dragend و توی این دوتا موقعیت انتخاب شده رو میتونی بگیری. توی کد زیر مقادیر توی یه input ذخیره میشه شما میتونی فرم بذاری و submit کنی یا اینکه درخواست ajax بزنی یا هرکار دیگه
این فایل HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<div id="map" class="m-0" style="height: 300px; width: 400px">
<input type="number" name="longitude" id="longitude" value="51.3842437">
<input type="number" name="latitude" id="latitude" value="35.6756238">
<input type="hidden" class="address" value="">
</div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="src/script.js"></script>
</body>
</html>اینم فایل js:
const longitude = document.querySelector('#map > input#longitude')
const latitude = document.querySelector('#map > input#latitude')
let longitudeValue = longitude.value || 51.3842437
let latitudeValue = latitude.value || 35.6756238
const myMap = L.map('map').setView([latitudeValue, longitudeValue], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(myMap);
const marker = L.marker([latitudeValue , longitudeValue] , {
draggable: true
}).addTo(myMap);
myMap.invalidateSize();
marker.on('dragend', function (e) {
latitude.value = marker.getLatLng().lat;
longitude.val = marker.getLatLng().lng;
});
myMap.on('click', function (e) {
marker.setLatLng(e.latlng);
latitude.value = e.latlng.lat
document.querySelector('#map > input#longitude').value = e.latlng.lng
});</body></html>
@sinashahoveisi
ممنون از شما دوست عزیز
ولی خب کد هارو کپی کردم فقط صفحه سفید برام نمایش میده
من میخام خودکار لوکیشن کاربر رو روی نقشه نشون بده و کاربر بتونه اون رو تغییر بده و وقتی لوکیشن رو انتخاب کرد
برام داخل دوتا متغیر نگهش داره که داخل php بتونم ازش استفاده کنم.
اگه مشکل دریافت لوکیشن رو دارید که با استفاده از Geolocation API در جاوا اسکریپت می تونید این اطلاعات رو به دست بیارید ولی اگه مشکل قرار دادن این اطلاعاته من تا به پیش نیومده که بخوام از نقشه ها استفاده کنم.