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

آخرین مطالب

امکانات وب

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

0 15 ۳ مرداد ۹۵

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

google-maps

در جلسه قبل دو نمونه از موارد پیشرفته گوگل مپ رو بهتون نمایش دادم و در این جلسه نیز میخام دو نمونه دیگه از این موارد رو خدمتتون ارائه بدم.

نمونه 5 : نمایش لایه ترافیک یا Traffic

Google Maps امکانی رو در اختیار شما قرار میده که با استفاده از اون میتونین یک لایه یا Layer به نقشتون اضافه کنید و اطلاعات ترافیکی خیابونها و جاده ها رو بر روی نقشه قرار بدین. به این ترتیب کاربران با نگاه به نقشه مورد نظر میفهمن که کدام خطوط دارای ترافیک و کدام خطوط بدون ترافیک هستن و بهتر و سریعتر میتونین راه خودشون رو پیدا کنن و به مقصد مورد نظر برسن. کد زیر رو در نظر بگیرید:

<!DOCTYPE html>

<html>

<head>

<title>Traffic layer</title>

<style>

html, body {

height: 100%;

margin: 0;

padding: 0;

}

#map {

width: 580px;

height: 400px;

}

</style>

</head>

<body>

function initMap() {

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 15,

center: {lat: 34.04924594193164, lng: -118.24104309082031}

});

var trafficLayer = new google.maps.TrafficLayer();

trafficLayer.setMap(map);

}

</script>

<script async defer

src="https://maps.googleapis.com/maps/api/js?callback=initMap">

</script>

</body>

</html>

خروجی بصورت زیر هست: layer traffic google maps

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

نمونه 6 : نمایش لایه ترانزیت یا Transit

Google Maps امکانی رو در اختیار شما قرار میده که با استفاده از اون میتونین یک لایه یا Layer به نقشتون اضافه کنید و اطلاعات ترانزیتی جاده ها رو بر روی نقشه قرار بدین. به این ترتیب کاربران با نگاه به نقشه مورد نظر، اطلاعاتی در مورد ترانزیت و عبور و مرور اون بدست میارن و بهتر میتونین تصمیم گیری کنن. کد زیر رو در نظر بگیرید:

<!DOCTYPE html>

<html>

<head>

<title>Transit layer</title>

<style>

html, body {

height: 100%;

margin: 0;

padding: 0;

}

#map {

width: 580px;

height: 400px;

}

</style>

</head>

<body>

function initMap() {

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 13,

center: {lat: 51.501904, lng: -0.115871}

});

var transitLayer = new google.maps.TransitLayer();

transitLayer.setMap(map);

}

</script>

<script async defer

src="https://maps.googleapis.com/maps/api/js?callback=initMap">

</script>

</body>

</html>

خروجی بصورت زیر هست: layer transit google maps

همونطور که دیدید جاده ها به رنگهای مختلفی در اومدن و لایه ترانزیت بر روی نقشه گوگل فعال شده و میتونین از مزایای اون بهره ببرید. اگر بخواید این نقشه رو با نقشه ساده مقایسه کنید، پس اون رو با تصویر زیر مقایسه کنید: layer no transit google maps

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

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

موفق باشید

یا علی

Source

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

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

برچسب : نویسنده : استخدام کار 7learn بازدید : 252 تاريخ : دوشنبه 4 مرداد 1395 ساعت: 4:00

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

آخرین مطالب

امکانات وب