MyBB Pro

P30-ART


تبلیغات


ارسال موضوع ارسال پاسخ
آموزش کار با گوگل مپ GoogleMap
مهمان گرامی، خوش آمدید!
نام کاربری
گذرواژه‌
[عضویت در انجمن]


جستجوی انجمن‌ها

(جستجوی پیشرفته)

جستجو در گوگل

Google



در اين سايت


درنا بلاگ

سرویس بلاگدهی درنا بلاگ
http://dornablog.com

تبلیغات

آمار انجمن
» اعضا: 3638
» آخرین عضو: alyssarf18
» موضوع‌های انجمن: 159
» ارسال‌های انجمن: 910

آمار کامل

ارسال: #1
۱۳۹۳/۵/۱۵, ۰۶:۳۴ عصر (آخرین ویرایش در این ارسال: ۱۳۹۳/۶/۱۱ ۰۸:۲۷ عصر، توسط behnam.)
آفلاین
آموزش کار با گوگل مپ GoogleMap

در این تاپیک به نحوه کار و استفاده از گوگل مپ در پروژه های الکترونیکی و یا طراحی سایت می پردازیم.


.png  1.png (اندازه: 428.73 KB / تعداد دفعات دریافت: 192)

هدف از این اموزش، ایجاد یه سایت هست که بتونیم موقعیت دستگاه مورد نظرمون رو که با ماژول های GPS دریافت کردیم رو روی نقشه نشون بدیم و بتونیم مدیریتش کنیم.

تمرکز این اموزش بر روی خود گوگل مپ هست. نه آموزش برنامه نویسی با asp.net یا php...

توجه: تمامی مختصاتهای جغرافیایی به کار رفته در این آموزش ها همگی تصادفی انتخاب شده اند.
نقل قول این ارسال در یک پاسخ بازگشت به بالا
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
 سپاس شده توسط hossein1387 ، AliKargar ، sarbaz13
تبلیغات
ارسال: #2
۱۳۹۳/۶/۴, ۰۸:۲۴ عصر (آخرین ویرایش در این ارسال: ۱۳۹۳/۶/۱۱ ۰۷:۰۳ عصر، توسط behnam.)
آفلاین
RE: آموزش کار با گوگل مپ GoogleMap

قسمت اول

راه اندازی ساده نقشه

در این آموزشها از Google map API استفاده میشه که توابع بسیار کاربردی و غنی برای کار با نقشه را در اختیار ما قرار میده.

از زبانهای Java script و JQuery نیز استفاده میکنیم. پس این اموزش ها را میتونید در پلت فرم های مختلف استفاده کنید!

فرض را هم بر این میگذاریم که کاربر، آشنایی با HTML، جاوا اسکریپت و jQuery دارد.

کدهای جاوا اسکریپت و JQuery هم در صورت نیاز توضیح داده خواهند شد.

برای راه اندازی نقشه، اول لازمه که کد زیر را در تگ Head صفحه خودتون قرار بدید:

کد:
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>

با استفاده از خط بالا، میتونید در صفحه خود از توابع مربوط به گوگل api استفاده کنید.

قدم بعدی ما نیاز داریم که فضایی رو تعیین کنیم تا گوگل مپ در اون نمایش داده بشه!

برای این منظور یک DIV تعریف میکنیم که نقشه در اون نمایش داده خواهد شد. در داخل Body صفحه، خط زیر را قرار دهید:

کد:
<div id="map_canvas" style="width: 600px; height: 600px;"></div>

الان ما یک فضا برای نمایش نقشه داریم که طول و عرض اون 600 پیکسل هست.

قدم بعدی، نمایش نقشه گوگل در داخل تگ Div می باشد. کد زیر رو ببینید:

کد:
var  centerMap = new google.maps.LatLng('35.715425', '51.417804');
var  mapOptions = {
            zoom: 16,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
var   map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

کد زیر:
کد:
var  centerMap = new google.maps.LatLng('35.715425', '51.417804');

مرکز نقشه رو تعیین میکنه. دو عدد بالا، طول و عرض جغرافیایی هستن که به عنوان مرکز نقشه در نظر گرفته شدن.

کد:
var  mapOptions = {
            zoom: 16,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        };

کد بالا تنظیمات نقشه رو تعیین میکنه. البته تنظیماتش بیشتر از اینهاست ولی در این پست راه اندازی ساده نقشه مد نظر هست.

عدد 16 تعیین کننده درجه زوم نقشه هست.
خاصیت center مختصاتی که به عنوان مرکز نقشه رو تعیین کردیم میگیره و
خاصیت mapTypeId هم تعیین کننده حالت نمایشی نقشه هست (مانند نقشه معمولی، تصویر ماهواره ای و...) که یکی از مقادیر زیر رو میتونه داشته باشه:

کد:
google.maps.MapTypeId.G_NORMAL_MAP
google.maps.MapTypeId.ROADMAP
google.maps.MapTypeId.TERRAIN
google.maps.MapTypeId.HYBRID
google.maps.MapTypeId.SATELLITE

و آخرین خط:
کد:
var   map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

تنظیماتی که برای نقشه در نظر گرفته شده رو به Div مورد نظرمون که در بالا تعریف کردیم، اعمال میکنه و یک شی Object از نقشه ایجاد شده درست میکنه که متغیر map همان شی مورد نظر هست.

map کاربری زیادی در کار با گوگل مپ داره که در ارسال های بعدی خواهید دید.

کد کامل این آموزش:
کد:
<html >
<head>
    <title>Untitled Page</title>
    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
</head>
<body>
    <div id="map_canvas" style="width: 600px; height: 600px;"></div>
    <script>
      var  centerMap = new google.maps.LatLng('35.715425', '51.417804');
      var  mapOptions = {
            zoom: 16,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        
     var   map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    </script>
</body>
</html>

کد بالا را در یک فایل با پسوند html ذخیره کنید و آنرا در مرورگر مشاهده نمایید.

دانلود فایل این اموزش:

.htm  google Map 1.htm (اندازه: 883 bytes / تعداد دفعات دریافت: 31)

نقل قول این ارسال در یک پاسخ بازگشت به بالا
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
 سپاس شده توسط hossein1387 ، AliKargar ، sarbaz13
ارسال: #3
۱۳۹۳/۶/۱۱, ۰۸:۰۶ عصر
آفلاین
RE: آموزش کار با گوگل مپ GoogleMap

قسمت دوم

ایجاد Marker



.png  VistaMapMarkersIcons.png (اندازه: 33.4 KB / تعداد دفعات دریافت: 150)

مارکر ها در واقع همان آیکون هایی هستن که برای نشون دادن به مختصات خاص روی نقشه به کار میرن.

در این اموزش ما یاد میگیریم که چطوری روی یه مختصات خاص روی نقشه، یه مارکر ایجاد کنیم و چطوری میتونیم با کلیک بر روی مارکر، یه پنجره برای نمایش یه سری اطلاعات نشون بدیم.

[تصویر:  attachment.php?aid=215]

برای ایجاد مارکر، کد زیر را مینویسیم:

کد:
var marker = new google.maps.Marker({
                'position': new google.maps.LatLng('35.715425', '51.417804'),
                'map': map,
                'title': "Title"
               });

این دستور، یک شی با نام marker ایجاد میکند. که به مختصاتی که در position آن تعریف شده است، مرتبط می شود.
پارامتر دوم اون اشاره به شی نقشه ایجاد در برنامه میکند. برای اینکه بدون مارکر رو در چه نقشه ای ایجاد کند.
پارامتر سوم هم title مارکر می باشد. که با قرار گرفتن ماوس روی مارکر، متن title بصورت tooltip نمایش داده خواهد شد.

در قدم بعدی، میخواهیم وقتی روی مارکر کلیک کردیم؛ یه پنجره روی نقشه باز شه تا یه سری اطلاعاتی که میخواهیم را روی اون نشون بدیم.

برای این منظور، کد زیر رو مینویسیم:
کد:
var infowindow = new google.maps.InfoWindow({
                content: "<div class='infoDiv'><h4>CEWorld</h4>Latitude: 35.715425 <br/> Longtitude: 51.417804</div>"
            });

این دستور یک شی با نام infowindow درست میکنه که محتویات html ای را گرفته تا در پنجره ای که باز میشه، نشون بده. کدهای html در بخش content شی تعریف خواهد شد.

در قسمت content یک div تعریف شده که استایل اون اشاره به infoDiv داره. این استایل در تگ head صفحه بصورت زیر تعریف میشه:

کد:
<style>
  .infoDiv {
    height: 70px;    
    width: 150px;
    -webkit-user-select: none;
    background-color: white;
    font-family:Tahoma;
    font-size:8pt;
    }
</style>

حالا باید کدی در برنامه اضافه کنیم، که وقتی روی مارکر کلیک شد، infowindow ما نمایش داده بشه... کد زیر را اضافه نمایید:

کد:
google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });

متد addListener یک listener روی شی مورد نظر جهت کاربر خاصی ایجاد میکند. در کد بالا، روی شی marker، وقتی که کلیک شد، تابع جاوا اسکریپت
کد:
infowindow.open(map, marker);
فراخوانی خواهد شد که در نتیجه اون، یک پنجره جهت نمایش اطلاعات مورد نظر نمایش داده خواهد شد.


دانلود فایل این اموزش:

.htm  google Map 2.htm (اندازه: 1.57 KB / تعداد دفعات دریافت: 44)

نقل قول این ارسال در یک پاسخ بازگشت به بالا
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
 سپاس شده توسط hossein1387 ، AliKargar ، sarbaz13
ارسال: #4
۱۳۹۳/۸/۲۷, ۰۲:۴۶ صبح (آخرین ویرایش در این ارسال: ۱۳۹۳/۸/۲۷ ۰۲:۴۷ صبح، توسط hossein1387.)
Realtime illustration of an object in google map

سلام به همه دوستان

فرض کنید اطلاعات GPS یک وسیله نقلیه رو هر ۵۰۰ میلی ثانیه دارید دریافت میکنید. حالا میخوایهم کدی بنویسیم که این اطلاعات رو به صورت آنلاین نشون بده. کاری که من تا حالا تونستم بکنم این بوده که هر بار که یک دیتای جدید دریافت شده من یک Marker جدید تولید کردم و اون رو به لیست Marker ها اضافه کردم. حالا مشکل اینجاست که این مارکر ها به لیست اضافه میشن ولی نشون داده نمیشن. یعنی تا وقتی که دکمه Refresh رو نزنم مارکرهای جدید نشون داده نمیشه. برای اینکه مشکل رو حل کنم یک تایمر ساختم که هر ۲ ثانیه یک بار صفحه رو رفرش کنه. این مشکل رو حل کرد ولی بدی این کار این هست که کل صفحه رفرش میشه و خیلی اعصاب خرد کن میشه. میخواستم بدونم که راهی هست که بدون رفرش کردن کل صفحه یک مارکر جدید به نقشه اضافه کرد؟؟ (از Google Map API دارم استفاده میکنم)
نقل قول این ارسال در یک پاسخ بازگشت به بالا
یافتن تمامی ارسال‌های این کاربر
 سپاس شده توسط sarbaz13
ارسال: #5
۱۳۹۳/۸/۲۷, ۰۶:۳۴ عصر
آفلاین
RE: Realtime illustration of an object in google map

سلام

نیازی به رفرش نیست

با اضافه کردن مارکر به نقشه، روی نقشه نشون داده میشه و نیازی به رفرش نداره.

در صورت رفرش، میتونید از ajax استفاده کنید.
نقل قول این ارسال در یک پاسخ بازگشت به بالا
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
 سپاس شده توسط hossein1387 ، sarbaz13
تبلیغات
ارسال: #6
۱۳۹۳/۸/۲۷, ۰۷:۲۶ عصر (آخرین ویرایش در این ارسال: ۱۳۹۳/۸/۲۷ ۰۷:۲۹ عصر، توسط hossein1387.)
RE: Realtime illustration of an object in google map

(۱۳۹۳/۸/۲۷ ۰۶:۳۴ عصر)behnam نوشته شده توسط:  سلام

نیازی به رفرش نیست

با اضافه کردن مارکر به نقشه، روی نقشه نشون داده میشه و نیازی به رفرش نداره.

در صورت رفرش، میتونید از ajax استفاده کنید.


سلام آقا بهنام خوبی؟؟؟
متاسفانه وقتی مارکر به کد html اضافه میشه من نمیتونم اونها رو ببینم و باید حتما رفرش کنم تا مارکر های جدید رو ببینم. این کدی هست که من دارم اجرا میکنم و اسکریپتی که نوشتم هر چند ثاینه دیتا دریافتی GPS رو به صورت یک مارکر جدید ایجا میکنه. PolylineCoordinates هم به صورت یک آرایه تعریف کردم که شامل یک مسیر از قبل تعیین شده هست و به صورت کامرلا درست نمایش داده میشه. ولی این مارکر ها خیلی اذیت دارن میکنن. برای Ajax میشه بهم بگی از کجا شروع کنم؟؟؟ ممنون میشم

کد:
<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>Google Maps - pygmaps </title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function initialize() {
        var latlng = new google.maps.LatLng(37.701865, -121.916570);
        var img = new google.maps.MarkerImage('http://chart.apis.google.com/chart?cht=mm&chs=12x16&chco=FFFFFF,00FFFF,000000&ext=.png');
        var marker = new google.maps.Marker({
        title: "no implimentation",
        icon: img,
        position: latlng
        });
        marker.setMap(map);


var Path = new google.maps.Polyline({
clickable: false,
geodesic: true,
path: PolylineCoordinates,
strokeColor: "#00FF00",
strokeOpacity: 1.000000,
strokeWeight: 2
});

Path.setMap(map);


    }
function timer(){
    setInterval(function() { initialize(); },1000);
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="timer()">
    <div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>
نقل قول این ارسال در یک پاسخ بازگشت به بالا
یافتن تمامی ارسال‌های این کاربر
 سپاس شده توسط sarbaz13
ارسال: #7
۱۳۹۳/۸/۲۷, ۱۱:۰۳ عصر
آفلاین
RE: Realtime illustration of an object in google map

ممنونم حسین جان....

کم پیدایی!!!

توی کدت map تعریف نشده!

در کل کد زیر رو ببین، بدون رفرش مارکر میزاره هر سه ثانیه یه بار:

کد php:
<html >
<
head>
    <
title>Untitled Page</title>
    <
script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<style>
  .infoDiv {
    height: 70px;    
    width: 150px; 
    -webkit-user-select: none; 
    background-color: white; 
    font-family:Tahoma;
    font-size:8pt;
    }
</style>

</head>
<body>
<b>Google Map Lesson 2</b><br/>
see page: <a href="http://www.ceworld.ir/forum/showthread.php?tid=119&pid=663#pid663">http://www.ceworld.ir/forum/showthread.php?tid=119&pid=663#pid663</a>
<br/>
Copyright (c) <a href="http://ceworld.ir">http://ceworld.ir</a> <br/><br/>
    <div id="map_canvas" style="width: 600px; height: 600px;"></div>
    <script>
      var  centerMap = new google.maps.LatLng('35.715425', '51.417804');
      var  mapOptions = {
            zoom: 16,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        
     var   map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


     var marker = new google.maps.Marker({
                'position': new google.maps.LatLng('35.715425', '51.417804'),
                'map': map,
                'title': "Title"
               });

     var infowindow = new google.maps.InfoWindow({
                content: "<div class='infoDiv'><h4>CEWorld</h4>Latitude: 35.715425 <br/> Longtitude: 51.417804</div>"
            });

     google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });

var la='35.715';
var lo='51.417';
var i=5;
setInterval(function(){
      var marker = new google.maps.Marker({
                'position': new google.maps.LatLng(la+i.toString(), lo+i.toString()),
                'map': map,
                'title': "Title"
               });
i+=20;
},3000);
    </script>
</body>
</html> 


تاپیک زیر رو هم ببین:
http://www.ceworld.ir/forum/showthread.p...663#pid663
نقل قول این ارسال در یک پاسخ بازگشت به بالا
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
 سپاس شده توسط hossein1387 ، AliKargar ، sarbaz13
ارسال: #8
۱۳۹۳/۸/۲۸, ۱۲:۳۷ صبح
RE: Realtime illustration of an object in google map

ممنون بهنام جان!
آره خیلی سرم شلوغ هست.No4No4No4 درگیر پایان نامه هستیم و پروژه! این رو هم برای دموی پروژه میخوام درستش کنم Smile
نقل قول این ارسال در یک پاسخ بازگشت به بالا
یافتن تمامی ارسال‌های این کاربر
ارسال: #9
۱۳۹۳/۸/۲۹, ۱۲:۱۷ صبح
RE: آموزش کار با گوگل مپ GoogleMap

سلام

آقا بهنام کد شما درست کار میکنه ولی من هنوز کاری که میخوام رو نتونستم انجام بدم. بگذار یکجور دیگه توضیح بدم. من اطلاعات GPS رو به صورت کامل در اختیار دارم. حالا دارم یک سیمولاتور درست میکنم که از دیتا بیسی که نقاط GPS داخلش ذخیره شده نقاط رو یکی یکی بخونه و بفرسته برای این کد HTML ما. حالا برای اینکار من یک سکریپت python نوشتم به صورت زیر:
کد:
parser()
path =RouteCoordinationsList

for points in path:
   addPoint(points)
   time.sleep(0.5)

Parser کارش رو به خوبی انجام میده و نقاط رو به درستی از دیتا بیس میخونه و parse میکنه. تابع addPoint کاری که انجام میده این هست که میاد فایل HTML رو میخونه و مقادیر lat و lon داخل setInterval رو آپدیت میکنه. کدی که شما نوشته بودی داخل همون HTML این تغییرات رو انجام میداد ولی من از بیرون کد دارم تغییرات رو انجام میدم. قاعدتا نباید فرقی کنه ولی مثل اینکه فرق میکنه! من از کد خودت به عنوان Template استفاده کردم و فقط و فقط مقادیر lat و lon داخل setInterval رو تغییر میدم. به نظرت کجا اشتباه دارم؟؟
نقل قول این ارسال در یک پاسخ بازگشت به بالا
یافتن تمامی ارسال‌های این کاربر
 سپاس شده توسط sarbaz13
تبلیغات
ارسال: #10
۱۳۹۳/۸/۳۰, ۱۲:۱۰ عصر
آفلاین
RE: آموزش کار با گوگل مپ GoogleMap

والا من پایتون کار نکردم...

ولی شاید مدت زمان ایجاد هر مارکر خیلی کم هست. بازه زمانی رو بیشتر کن.

توی جاوااسکریپت یه ارایه درست کن و داده ها رو بریز توی اون. بعد با تایمر هر خونه رو بخون و مارکر رو ایجاد کن. اینطوری حتمن مشکلت حل میشه...
نقل قول این ارسال در یک پاسخ بازگشت به بالا
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
 سپاس شده توسط hossein1387 ، AliKargar ، sarbaz13
ارسال موضوع ارسال پاسخ


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان