آخرین مطالب
امکانات وب
در این مطلب با ادامه آموزش Google Maps در خدمتتون هستیم.
در جلسات قبلی در مورد اضافه کردن نشانه یا Marker و تغیییر و دستکاری در اون توضیح دادیم و شما رو با امکانات و قابلیتهای اون آشنا کردیم. علاوه بر اضافه کردن Marker شما میتونین اشکال هندسی مختلفی نظیر چندخطی ها، چند ضلعی ها، مستطیل و دایره و ... رو نیز به نقشتون و نقطه دلخواهتون اضافه کنید. در این جلسه و جلسه بعد، اشکال مهمی که میتونین به نقشه اضافه کنید رو بهتون آموزش میدیم.
چندخطی ها یا Polylines
با استفاده از قابلیت اضافه کردن Polylines که نقشه گوگل در اختیار ما قرار داده، میتونیم مسیرهایی رو بر روی نقشه مشخص کنیم. شما میتونین با استفاده از نمونه ساختن از شئ google.maps.polyline این کار رو انجام بدین. همچنین در زمان ساخت نمونه باید مقادیر مناسبی رو برای ویژگی های هر مسیر قرار بدیم. همانند جلسه قبل که با استفاده از متد setMap، نشانگر رو به نقشه متصل میکردیم، اینجا نیز به همین صورت عمل میکنیم.
در اینجا میخایم یک مثال رو براتون بزنیم که در اون 3 خط قرار گرفته و 4 نقطه نیویورک در آمریکا، لندن در انگلیس، دهلی نو در هند و پکن در چین رو به هم وصل کرده. برای اینکار بصورت زیر عمل میکنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html>
<head> <script src = "http://maps.googleapis.com/maps/api/js"></script>
<script> function loadMap(){
var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:2, mapTypeId:google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var tourplan = new google.maps.Polyline({ path:[ new google.maps.LatLng(28.613939, 77.209021), new google.maps.LatLng(51.507351, -0.127758), new google.maps.LatLng(40.712784, -74.005941), new google.maps.LatLng(28.213545, 94.868713) ],
strokeColor:"#0000FF", strokeOpacity:0.6, strokeWeight:2 });
tourplan.setMap(map); } </script>
</head>
<body onload = "loadMap()"> <div id = "googleMap" style = "width:580px; height:400px;"></div> </body>
</html> |
خروجی بصورت زیر خواهد بود:
همونطور که دیدید خطوطی بین چهار مکانی که عرض کردم، رسم شده. برای این کار کدهای زیر استفاده شده:
1 2 3 4 5 6 7 8 9 10 11 12 | var tourplan = new google.maps.Polyline({ path:[ new google.maps.LatLng(28.613939, 77.209021), new google.maps.LatLng(51.507351, -0.127758), new google.maps.LatLng(40.712784, -74.005941), new google.maps.LatLng(28.213545, 94.868713) ],
strokeColor:"#0000FF", strokeOpacity:0.6, strokeWeight:2 }); |
میبینید که یک نمونه جدید از شئ google.maps.polyline ساخته شده و درون ویژگی path اون 4 نقطه ای که مد نظرمون هست رو وارد کردیم. بعد از اون از ویژگی های دیگه ای استفاده کردیم که ظاهر خطوط رو مشخص کنه. با strokeColor رنگ خطوط رو مشخص میکنیم، با strokeOpacity شفافیت خطوط رو مشخص میکنیم و با strokeWeight هم ضخامت خطوط رو مشخص میکنیم.
چندضلعی یا Polygon
با استفاده از چندضلعی ها میتونین ناحیه ای رو با استفاده از چند ضلعی انتخاب کنید و رنگ اونا رو عوض کنید و به این صورت به کاربران نشون بدید که شما این محدوده مد نظرتون هست. برای اینکار باید یک نمونه از شئ google.maps.Polygon بسازیم. حالا میخایم مثالی رو در اختیارتون قرار بدیم که در اون سه تا از شهرهای هند رو در اون مشخص کنیم. برای این کار بصورت زیر عمل میکنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html>
<head> <script src = "http://maps.googleapis.com/maps/api/js"></script>
<script> function loadMap(){
var mapProp = { center:new google.maps.LatLng(17.433053, 78.412172), zoom:6, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var flightPath = new google.maps.Polygon({ path: [ new google.maps.LatLng(17.385044, 78.486671), new google.maps.LatLng(19.696888, 75.322451), new google.maps.LatLng(21.056296, 79.057803) ], strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4 });
flightPath.setMap(map); } </script>
</head>
<body onload = "loadMap()"> <div id = "googleMap" style = "width:580px; height:400px;"></div> </body>
</html> |
خروجی بصورت زیر خواهد بود:
همونطور که دیدید یک سه ضلعی مشخص شده. برای این کار کدهای زیر استفاده شده:
1 2 3 4 5 6 7 8 9 10 11 12 | var flightPath = new google.maps.Polygon({ path: [ new google.maps.LatLng(17.385044, 78.486671), new google.maps.LatLng(19.696888, 75.322451), new google.maps.LatLng(21.056296, 79.057803) ], strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2, fillColor:"#0000FF", fillOpacity:0.4 }); |
میبینید که یک نمونه جدید از شئ google.maps.polygon ساخته شده و درون ویژگی path اون 3 نقطه ای که مد نظرمون هست رو وارد کردیم. نقاط بیشتری رو هم اگه بخوایم میتونیم وارد کنیم. بعد از اون با استفاده از ویژگی fillColor رنگ درونی ناحیه رو مشخص کردیم و با استفاده از ویژگی fillOpacity هم شفافیت اون رو تعریف کردیم.
در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 316
آرشیو مطالب
- دی 1394
- بهمن 1394
- اسفند 1394
- دی 1395
- بهمن 1395
- اسفند 1395
- فروردين 1395
- ارديبهشت 1395
- خرداد 1395
- تير 1395
- مرداد 1395
- شهريور 1395
- مهر 1395
- آبان 1395
- آذر 1395
- دی 1396
- بهمن 1396
- اسفند 1396
- فروردين 1396
- ارديبهشت 1396
- خرداد 1396
- تير 1396
- مرداد 1396
- شهريور 1396
- مهر 1396
- آبان 1396
- آذر 1396
- دی 1397
- بهمن 1397
- اسفند 1397
- فروردين 1397
- ارديبهشت 1397
- خرداد 1397
- تير 1397
- مرداد 1397
- شهريور 1397
- آذر 1397
- دی 1398
- بهمن 1398
- اسفند 1398
- ارديبهشت 1398
- تير 1398
- مرداد 1398
- مهر 1398
- آبان 1398
- آذر 1398
- فروردين 1399
- ارديبهشت 1399
- خرداد 1399
- تير 1399
- شهريور 1399
- بهمن 1400
- اسفند 1400
- ارديبهشت 1400
- دی 1401
- بهمن 1401
- اسفند 1401
- ارديبهشت 1401
- خرداد 1401
- تير 1401
- مرداد 1401
- شهريور 1401
- مهر 1401
- آبان 1401
- آذر 1401
- دی 1402
- بهمن 1402
- اسفند 1402
- فروردين 1402
- ارديبهشت 1402
- خرداد 1402
- تير 1402
- مرداد 1402
- شهريور 1402
- مهر 1402
- آبان 1402
- آذر 1402
- فروردين 1403
- ارديبهشت 1403