More Related Content
More from Bajaree Tameeyong
More from Bajaree Tameeyong (9)
Week 7 บาจรีย์
- 1. Week 7 บาจรีย์ 1
Script Program( Java Script )
วันที่ 15 ก.พ. 2560
Week 7
เรื่อง ทำสำมเหลี่ยม Bermuda ให้ปรำกฏใน google map
เปิดโปรแกรม Edit plus file new HTML page จะได้ ดังภาพ
ในบรรทัดที่ 10,11 เปิดและปิด style ดังภาพ
- 2. Week 7 บาจรีย์ 2
กาหนดค่าลงไปภายใต้ style float :
neight :
width :
ดังภาพ
กาหนด html,body ดังภาพ
- 3. Week 7 บาจรีย์ 3
กาหนดค่าลงไปภายใต้ html,body height :
margin :
padding :
ดังภาพ
ภายใต้ body ให้เปิดและปิด div <div id = ‚map‛> </div>
- 4. Week 7 บาจรีย์ 4
ทาการ เปิด และ ปิด script ดังภาพ
ประกาศ function ภายใน script function initMaps ( ){ }
ดังภาพ
- 5. Week 7 บาจรีย์ 5
บรรทัดที่ 27 พิมพ์ var map = new google.maps.Map( ) ดังภาพ
บรรทัดที่ 27 พิมพ์ document.getElementById(‚map‛) ลงไปในส่วนของ วงเล็บที่ว่างไว้
- 6. Week 7 บาจรีย์ 6
พิมพ์ { } แทรกไป ตามตาแหน่ง ดังภาพ บรรทัดที่ 27
บรรทัดที่ 28 พิมพ์ center : {lat : 24.886 , ing : -70.268} ลงไป ดังภาพ
- 7. Week 7 บาจรีย์ 7
บรรทัดที่ 29 zoom :
บรรทัดที่ 30 พิมพ์ mapTypeId = ‘terrain’ (เพื่อเป็นการกาหนดการมองเห็นภูมิประเทศในแผนที่)
****เติม ; ในบรรทัดที่ 31****
- 8. Week 7 บาจรีย์ 8
เปิดโค้ดของ week6 เพื่อ copy key บรรทัดที่ 52-53 มาใช้
Copy แล้มาวางใน บรรทัดที่ 34-35 ดังภาพ
- 9. Week 7 บาจรีย์ 9
กด Ctrl S เพื่อ save ตั้งชื่อ และ .html ดังภาพ
ไปเปิด ที่บันทึกไว้ใน web browser จะได้ ดังภาพ
- 10. Week 7 บาจรีย์ 10
เริ่มใส่รูปสำมเหลี่ยงลงในแผนที่
ประกาศ var triangleCoords และใส่ค่าพิกัดแต่ละมุมของ สามเหลี่ยม ที่ต้องการ ดังภาพ
บรรทัดที่ 38 var bermuda = new google.maps.Polygon ({}) ดังภาพ
- 11. Week 7 บาจรีย์ 11
บรรทัดที่ 39 กาหนด paths (ตาแหน่งของ polygon)
เข้าไป ในค้นหาใน google ว่า html color code เพื่อดูโค้ด สี ที่จะมาวางใน stroke ดังภาพ
- 12. Week 7 บาจรีย์ 12
strokeColor คือ การกาหนดสีของเส้น
strokeOpacity คือ ความโปร่งแสงของเส้น
- 13. Week 7 บาจรีย์ 13
strokeWeight คือ การกาหนดความหนาของเส้น
fillColor คือ การกาหนดสีของ polygon ที่ทา
- 14. Week 7 บาจรีย์ 14
fillOpacity คือ การกาหนดความโปร่งแสงของ polygon ที่ทา
บรรทัดที่ 46 bermuda.setmap(map); คือ การเอาสามเหลี่ยมที่ทาไปไว้บนแผนที่
- 15. Week 7 บาจรีย์ 15
กด Ctrl s และไป รีเฟรช ที่หน้า web browser อีกครั้ง จะได้ ดังภาพ