آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 11) - اضافه کردن Marker یا نشانه

آخرین مطالب

امکانات وب

آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 11) - اضافه کردن Marker یا نشانه - قسمت 2

0 6 ۲۲ تیر ۹۵

در این مطلب با ادامه آموزش Google Maps در خدمتتون هستیم.

google-maps

در جلسه قبل در مورد قرار دادن Marker بر روی نقشه و همچنین دادن افکت انیمیشنی به اون براتون توضیح دادیم. در این جلسه قصد داریم کارای دیگه رو با Marker انجام بدیم.

در ابتدا بار دیگه نشانگر پیش فرض رو به شما نشون میدیم: simple marker google maps

گوگل به شما اجازه میده که نشانه پیش فرض اون رو دستکاری کنید و هر آیکونی که خودتون دوست دارید رو جای اون قرار بدید. برای اینکار باید از ویژگی icon استفاده کنیم و آدرس اون شکلی که میخایم جای نشانگر پیش فرض قرار بگیره رو مشخص کنیم. برای اینکار بصورت زیر عمل میکنیم:

<!DOCTYPE html>

<html>

<head>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(17.377631, 78.478603),

zoom:18

}

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

var marker = new google.maps.Marker({

position: new google.maps.LatLng(17.377631, 78.478603),

map: map,

icon:'http://www.7lea.com/favicon-apple.png'

});

marker.setMap(map);

}

</script>

</head>

</body>

</html>

همونطور که دیدید مقابل ویژگی icon آدرس یک تصویر رو قرار دادیم که همون لوگوی سون لرن هست. خروجی بصورت زیر میشه:

اگه دقت کرده باشید با درگ کردن آیکون با نقشه تکون میخوره و نمیشه اون رو بر روی نقشه تغییر مکان داد. اگر بخواید کاری کنید که قابلیت درگ شدن به نشانگر اضافه بشه، باید از ویژگی draggable استفاده کنید و مقدار اون رو برابر با true قرار بدین. برای اینکار بصورت زیر عمل میکنیم:

<!DOCTYPE html>

<html>

<head>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(17.377631, 78.478603),

zoom:18

}

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

var marker = new google.maps.Marker({

position: new google.maps.LatLng(17.377631, 78.478603),

map: map,

icon:'http://www.7lea.com/favicon-apple.png',

draggable: true

});

marker.setMap(map);

}

</script>

</head>

</body>

</html>

خروجی بصورت زیر میشه:

میبینید که با گرفتن آیکون و کشیدن اون، میتونین آیکون رو به نقاط مختلفی جابجا کنید و در اونجا مستقرش کنید.

حالا مثلا میخایم کاری کنیم که با زدن بر روی دکمه های مختلف آیکون رو اضافه و حذف کنیم. برای اینکار بصورت زیر عمل میکنیم:

<!DOCTYPE html>

<html>

<head>

function loadMap() {

var mapOptions = {

center:new google.maps.LatLng(17.377631, 78.478603),

zoom:18

}

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

var marker = new google.maps.Marker({

position: new google.maps.LatLng(17.377631, 78.478603),

icon:'http://www.7lea.com/favicon-apple.png',

draggable: true

});

var add = document.getElementById('add'),

remove = document.getElementById('remove');

add.addEventListener('click', function () {

marker.setMap(map);

});

remove.addEventListener('click', function () {

marker.setMap(null);

});

}

</script>

</head>

<button id="add">Add Marker</button>

<button id="remove">Remove Marker</button>

</body>

</html>

خروجی بصورت زیر میشه:

همونطور که دیدید با کلیک بر روی Add Marker یک آیکون اضافه میشه و با کلیک بر روی Remove Marker آیکون اضافه شده حذف میشه. این کار رو با استفاده از متد setMap انجام دادیم. برای حذف کردن این آیکون کافیه که برای نشانگر، نقشه ای که میخاد در اون نمایش داده بشه رو مشخص نکنیم. برای اینکار درون این متد null رو قرار میدیم. هر زمان که خواستیم این نشانگر برای این نقشه قرار داده بشه، نقشه مورد نظر یا همون متغیر map رو درون این متد قرار میدیم.

در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.

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

موفق باشید

یا علی

Source

- - , .
.

سون لرن • آموزش...

ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 333 تاريخ : پنجشنبه 24 تير 1395 ساعت: 10:21

آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 11) - اضافه کردن Marker یا نشانه - قسمت 2

آخرین مطالب

امکانات وب

آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 11) - اضافه کردن Marker یا نشانه - قسمت 2

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه