در این مطلب با ادامه آموزش Google Maps در خدمتتون هستیم.
در جلسه قبل دو نمونه از موارد پیشرفته گوگل مپ رو بهتون نمایش دادم و در این جلسه نیز میخام دو نمونه دیگه از این موارد رو خدمتتون ارائه بدم.
نمونه 5 : نمایش لایه ترافیک یا Traffic
Google Maps امکانی رو در اختیار شما قرار میده که با استفاده از اون میتونین یک لایه یا Layer به نقشتون اضافه کنید و اطلاعات ترافیکی خیابونها و جاده‌ها رو بر روی نقشه قرار بدین. به این ترتیب کاربران با نگاه به نقشه مورد نظر میفهمن که کدام خطوط دارای ترافیک و کدام خطوط بدون ترافیک هستن و بهتر و سریعتر میتونین راه خودشون رو پیدا کنن و به مقصد مورد نظر برسن. کد زیر رو در نظر بگیرید:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Traffic layer</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
width: 580px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
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>
خروجی بصورت زیر هست:
همونطور که در کد و نقشه مورد نظر دیدید، خیابونها به دو رنگ سبز و قرمز در اومدن و هر چه قرمز اون شدیدتر باشه، نشان از اونه که اونجا ترافیک بیشتره و بعضی از نقاط هم دارای علامت ممنوع هست که منظورش اینه که اون مسیر ترافیک سنگینی داره یا مسدوده و بهتره از این مسیر عبور نکنید.
نمونه 6 : نمایش لایه ترانزیت یا Transit
Google Maps امکانی رو در اختیار شما قرار میده که با استفاده از اون میتونین یک لایه یا Layer به نقشتون اضافه کنید و اطلاعات ترانزیتی جاده‌ها رو بر روی نقشه قرار بدین. به این ترتیب کاربران با نگاه به نقشه مورد نظر، اطلاعاتی در مورد ترانزیت و عبور و مرور اون بدست میارن و بهتر میتونین تصمیم گیری کنن. کد زیر رو در نظر بگیرید:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Transit layer</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
width: 580px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
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>
خروجی بصورت زیر هست:
همونطور که دیدید جاده‌ها به رنگهای مختلفی در اومدن و لایه ترانزیت بر روی نقشه گوگل فعال شده و میتونین از مزایای اون بهره ببرید. اگر بخواید این نقشه رو با نقشه ساده مقایسه کنید، پس اون رو با تصویر زیر مقایسه کنید:
در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
اولین دیدگاه این پست رو تو بنویس !