سلام من نیاز به امکانی دارم که کاربر بیاد نام یک مکان را بزنه و روی نقشه ی گوگل مپ مکانش را نشون بده . با کلیک کاربر روی نقطه ی مورد نظر طول و عرض جغرافیایی اون را باید بدست بیارم .
چطور باید این کار را بکنم ؟
سلام من نیاز به امکانی دارم که کاربر بیاد نام یک مکان را بزنه و روی نقشه ی گوگل مپ مکانش را نشون بده . با کلیک کاربر روی نقطه ی مورد نظر طول و عرض جغرافیایی اون را باید بدست بیارم .
چطور باید این کار را بکنم ؟
شما کافیه googlemap را درون صفحه لود کنید .
با استفاده از کد زیر با کلیک کاربر بر روی نقشه موقعیت جغرافیایی در کنترل مورد نظرتون نمایش داده می شه .
google.maps.event.addListener(map, "click", function (e) {
placeMarker(e.latLng, map);
});
function placeMarker(pos, map) {
if (oldMarkers && oldMarkers.length !== 0) {
for (var i = 0; i < oldMarkers.length; ++i) {
oldMarkers[i].setMap(null);
}
}
if (oldiw && oldiw.length !== 0) {
for (var i = 0; i < oldiw.length; ++i) {
oldiw[i].setMap(null);
}
}
oldMarkers = [];
oldiw = [];
var g = google.maps;
var marker = new g.Marker({
position: pos,
map: map
});
document.getElementById("Longitude").value = pos.lng();
document.getElementById("Latitude").value = pos.lat();
oldMarkers.push(marker);
var iw = new g.InfoWindow();
var cont = "<div style='float:right'>موقعیت ملک شما </br>عرض جغرافیایی : " + pos.lat() + "</br> طول جغرافیایی : " + pos.lng() + "</div>";
iw.setOptions({ content: cont, position: pos, pixelOffset: new g.Size(0, -22) });
iw.open(map);
map.panTo(pos);
oldiw.push(iw);
document.getElementById("remove").style.display = "block";
};
مرسی ولی کار نکرد ! با فایرباگ هم تست کردم هرکار میکنم داخل Event نمیره کد کامل را میزارم شما هم ببینید .:نوشته شده توسط niloo17
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center: new google.maps.LatLng(32.700292, 51.522438),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap "), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(map, "click", function (e) {
placeMarker(e.latLng, map);
});
function placeMarker(pos, map) {
if (oldMarkers && oldMarkers.length !== 0) {
for (var i = 0; i < oldMarkers.length; ++i) {
oldMarkers[i].setMap(null);
}
}
if (oldiw && oldiw.length !== 0) {
for (var i = 0; i < oldiw.length; ++i) {
oldiw[i].setMap(null);
}
}
oldMarkers = [];
oldiw = [];
var g = google.maps;
var marker = new g.Marker({
position: pos,
map: map
});
document.getElementById("Longitude").value = pos.lng();
document.getElementById("Latitude").value = pos.lat();
oldMarkers.push(marker);
var iw = new g.InfoWindow();
var cont = "<div style='float:right'>موقعیت ملک شما </br>عرض جغرافیایی : " + pos.lat() + "</br> طول جغرافیایی : " + pos.lng() + "</div>";
iw.setOptions({ content: cont, position: pos, pixelOffset: new g.Size(0, -22) });
iw.open(map);
map.panTo(pos);
oldiw.push(iw);
document.getElementById("remove").style.display = "block";
};
</script>
</head>
<body></body>
</html>
آخرین ویرایش به وسیله IR-Developer : یک شنبه 30 فروردین 1394 در 23:53 عصر
addListener را باید داخل خود initialize می گذاشنید .
function initialize() {
var latlngPos = new google.maps.LatLng(31.919607, 54.378544);
var mapProp = {
center: latlngPos,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true
};
var map = new google.maps.Map(document.getElementById("googleMap "), mapProp);
google.maps.event.addListener(map, "click", function (e) {
placeMarker(e.latLng, map);
});
}
var oldMarkers = null;
var oldiw = null;
function placeMarker(pos, map) {
if (oldMarkers && oldMarkers.length !== 0) {
for (var i = 0; i < oldMarkers.length; ++i) {
oldMarkers[i].setMap(null);
}
}
if (oldiw && oldiw.length !== 0) {
for (var i = 0; i < oldiw.length; ++i) {
oldiw[i].setMap(null);
}
}
oldMarkers = [];
oldiw = [];
var g = google.maps;
var marker = new g.Marker({
position: pos,
map: map
});
document.getElementById("Longitude").value = pos.lng();
document.getElementById("Latitude").value = pos.lat();
oldMarkers.push(marker);
var iw = new g.InfoWindow();
var cont = "<div style='float:right'>موقعیت ملک شما </br>عرض جغرافیایی : " + pos.lat() + "</br> طول جغرافیایی : " + pos.lng() + "</div>";
iw.setOptions({ content: cont, position: pos, pixelOffset: new g.Size(0, -22) });
iw.open(map);
map.panTo(pos);
oldiw.push(iw);
document.getElementById("remove").style.display = "block";
};
google.maps.event.addDomListener(window, 'load', initialize);
از این کد استفاده کردم دیگه نقشه هم لود نمیشه .
پروژه را میزارم لطفا شما ی نگاه بکنید ببینید مشکلش کجاست .
http://up.vbiran.ir/uploads/20619142...apApipart1.rar
http://up.vbiran.ir/uploads/10651429...apApipart2.rar
تشکر
فایل صفحه ای که در سایتم استفاده کرده ام، پیوست کردم .
تشکر ولی باز نقشه را نمیاره .
لایبری چیزی توی Layout میخواد ؟
لطفا اگر میشه همین کدها را توی یک پروژه ی جدید کپی کنید و بزارید .
مرسی
حل شد مرسی .
اون آی دی Div که باید نقشه توش نمایش داده بشه با اون چیزی که توی جاوااسکریپت گرفته شده بود فرق میکرد .
با کد شما کارم راه افتاد .
تشکر
دوست عزیز طول و عرض جغرافیایی یک نقطه که با این کد شما بدست میاد به این شکله :
51.6702675819397 , 51.6702675819397
ولی اونی که خود نقشه گوگل بصورت آنلاین میده اینه :
32.658603, 51.669624
با جستجویی که کردم ظاهرا یک محاسبه ایی باید این وسط انجام بشه تا نتیجه مثل اون بشه ولی نفهمیدم چطوری .
باید چکار کنم ؟
طول و عرضی که این کد میاره هیج مشکلی نداره و به چیز دیگه ای نباید تبدبل بشه.
اگه همین مقادیر را در نقشه لود کنید می بینید که مشکلی نداره . من با همین مقادیر دوباره موقعیت مکان را در نقشه به کاربر نمایش میدهم .
من تست کردم و طول و عرض جغرافیایی یک نقطه را که این کد میداد با اونی که آنلاین گرفتم مقایسه کردم اصلا شباهتی به هم نداشتن .
حتی وقتی اونی که کد میده را به عنوان نقطه ی شروع نقشه توی کد میزارم نا کجا آباد را نشون میده .
مثلا این را ببینید :
function initialize() {
var latlngPos = new google.maps.LatLng(32.646602, 51.667866);
var mapProp = {
center: latlngPos,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true
};
var map = new google.maps.Map(document.getElementById("googleMap "), mapProp);
google.maps.event.addListener(map, "click", function (e) {
placeMarker(e.latLng, map);
});
}
این : 32.646602, 51.667866 عددی هست که نقشه آنلاین گوگل بهم داد و درست نشون میده .
ولی این : 51.670846939086914 , 51.670846939086914 عددی هست که نقشه ی اون کد بهم داد و همون نقطه هست .
به عنوان نقطه ی شروع میزنم مکان اشتباه بهم نشون میده . نفهمیدم دلیلش چیه !
این دو مقدار که در کد زیر ست می شه ، اون محدوده ای هست که می خوایم نمایش بدیم . مثلا من برای سایت خودم مرکز شهر یزد را ست کردم .
new google.maps.LatLng(32.646602, 51.667866);
با کلیک روی نقشه دو مقدار در فیلدهای ما ست کی شوند که اونا را توی دیتا بیس ذخیره میشه و موقع نمایش مجدد ابتدا باید محدوده را مشخص کنید و در کد بالا ست کنید و بعد marker نمایش بدید.
خوب منم همینا گفتم .
مشکل من اینه که با کلیک روی نقشه اون مقادیری که میده اشتباه هستن . وقتی توی این کد
new google.maps.LatLng(32.646602, 51.667866);
میزارم اون مکان را نشون نمیده . یجای دور افتاده نشون میده اصلا معلوم نیست چیه .
با کلیک روی نقشه مقادیری که میده اعدادبزرگتری هستن نسبت به اینکه از سایت map.google.com مقادیر را بگیریم .
من نمیدونم شما چطور میگید اون مقادیری گه با کلیک روی نقشه میگیرید درست برای شما نشون میده .!
------------------------------------
دوستان کارم خیلی گیره هر کار کردم به نتیجه نرسیدم لطفا راهنمایی کنید .
باید چکار کنم ؟
مقادیری که از این روش به دست میارید کاملا درسته . شما این مقادیر را در دیتابیس ذهیره می کنید.
زمانی که می خوایید موقعیت را نمایش بدید از کد زیر استفاده کنید .
function initialize() {
var pos1 = $("#Latitude");
var pos2 = $("#Longitude");
if (pos1.val() != "" && pos2.val() != "")
var latlngPos = new google.maps.LatLng(parseFloat(pos1.val()), parseFloat(pos2.val()));
else
var latlngPos = new google.maps.LatLng(30.281340, 57.068996);
var mapProp = {
center: latlngPos,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true
};
var map = new google.maps.Map(document.getElementById("googleMap ")
, mapProp);
if (pos1.val() != "" && pos2.val() != "") {
var marker = new google.maps.Marker({
position: latlngPos,
map: map,
title: "موقعیت ملک"
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
در ابتدا بررسی می کنم اگر مقداری در دیتابیس ذخیره شده بود موقعیت نمایش داده می شه در غیر این صورت مرکز یزد نمایش میده.
کتاب رابطهای برنامه نویسی نقشه های گوگل توسط انتشارات ناقوس در نمایشگاه کتاب ارائه شده. برای آموزش نقشه های گوگله. احتمالاً باد خیلی به دردبخور باشه.
سلام .
من هم دقیقا یه همچین چیزی میخوام، از دوستان و اساتید کسی هست که کد PHP بده، من از MVC چیزی نمیدونم.
متشکرم
قوانین ایجاد تاپیک در تالار
پاسخ با نقل قول