เส้นขนาน Google Maps

Google Maps - เสริมที่สร้างขึ้นเอง

เสริมที่สร้างขึ้นเองเป็นวัตถุที่ถูกแบ่งบังคับที่ละติจูด/ลองจิจูดบนแผนที่

Google Maps มีหลายชนิดของเสริมที่สร้างขึ้นเอง:

• ตรา (Marker) - ตำแหน่งเดียวบนแผนที่. ตรายังสามารถแสดงรูปภาพไอคอนที่สร้างขึ้นเองได้
• เส้นตาย (Polyline) - จุดต่างๆ ที่เชื่อมโยงกันบนแผนที่
• มุมลี่ (Polygon) - จุดต่างๆ ที่เชื่อมโยงกันบนแผนที่ ที่มีรูปร่าง 'ปิด'
• วงกลมและสี่เหลี่ยมผืนผ้า (Circle และ Rectangle)
• ข้อความสรุป (Info Windows) - แสดงเนื้อหาในตะกร้าลอยบนแผนที่
• เสริมที่สร้างขึ้นเอง (Custom overlays)

Google Maps - เพิ่มตรา

Marker ฟังก์ชันสร้างตรา. โปรดจำได้ว่า ต้องตั้งค่าคุณสมบัติ position ก่อนที่จะแสดงตรา

โปรดใช้วิธี setMap() เพื่อเพิ่มตราสู่แผนที่

ตัวอย่าง

var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);

Google Maps - การเคลื่อนไหวตรา

ตัวอย่างด้านล่างนี้แสดงวิธีการใช้คุณสมบัติ animation ในการตั้งค่าเคลื่อนไหวตรา

ตัวอย่าง

var marker = new google.maps.Marker({
  position:myCenter,
  animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);

Google Maps - ใช้ไอคอนแทนตรา

ตัวอย่างด้านล่างนี้กำหนดรูปภาพ (ไอคอน) ที่ใช้แทนตราแสดงตำแหน่งต่างๆ โดยเริ่มต้น

ตัวอย่าง

var marker = new google.maps.Marker({
  position:myCenter,
  icon:'pinkball.png'
});
marker.setMap(map);

Google Maps - เส้นตาย

เส้นตายเป็นเส้นที่ถูกวาดขึ้นด้วยการจัดลำดับของจุดต่างๆ

เส้นตายทางสามมิติสนับสนุนคุณสมบัติต่อไปนี้：

• path - กำหนดขอบเขตของหลายรายละเอียดละติจูด/ลองจิจูด
• strokeColor - กำหนดสีของสาย (รูปแบบสีสี่หลัก: "#FFFFFF")
• strokeOpacity - กำหนดความโปร่งใสของสาย (ค่า 0.0 ถึง 1.0)
• strokeWeight - กำหนดความหนาของสายของเส้นในพิกเซล
• editable - กำหนดว่าเส้นทางนี้สามารถแก้ไขโดยผู้ใช้หรือไม่ (true/false)

ตัวอย่าง

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});

แผนที่ Google - สายสี่เหลี่ยมผืนผ้า

สายสี่เหลี่ยมผืนผ้าคล้ายสายตรงแบบที่ประกอบด้วยชุดของจุดที่จัดเรียงตามลำดับอย่างเป็นทางตรงข้ามกัน อย่างไรก็ตาม สายสี่เหลี่ยมผืนผ้าถูกออกแบบมาเพื่อกำหนดพื้นที่ที่ปิดที่ภายใน

สายสี่เหลี่ยมผืนผ้าประกอบด้วยสายและมีรูปร่างที่ "ปิด" (ทุกสายต่อกัน)

มีคุณสมบัติต่อไปนี้ที่สนับสนุนโดยสายสี่เหลี่ยมผืนผ้า:

• path - กำหนดจุดละติจูด/ลองจิจูดของเส้น (จุดแรกและจุดสุดท้ายเหมือนกัน)
• strokeColor - กำหนดสีของสาย (รูปแบบสีสี่หลัก: "#FFFFFF")
• strokeOpacity - กำหนดความโปร่งใสของสาย (ค่า 0.0 ถึง 1.0)
• strokeWeight - กำหนดความหนาของสายของเส้นในพิกเซล
• fillColor - กำหนดสีของพื้นที่ที่ปิดที่ภายใน (รูปแบบสีสี่หลัก: "#FFFFFF")
• fillOpacity - กำหนดความโปร่งใสของสีที่ทำเนียบ (ค่า 0.0 ถึง 1.0)
• editable - กำหนดว่าเส้นทางนี้สามารถแก้ไขโดยผู้ใช้หรือไม่ (true/false)

ตัวอย่าง

var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

แผนที่ Google - วงกลม

วงกลมสนับสนุนคุณสมบัติต่อไปนี้:

• center - กำหนดจุดศูนย์กลางของ google.maps.LatLng
• radius - กำหนดเส้นกลม ด้วยหน่วยเมตร
• strokeColor - กำหนดสีของสายที่รอบวงกลม ในรูปแบบสีสี่หลัก (รูปแบบ: "#FFFFFF")
• strokeOpacity - กำหนดความโปร่งใสของสีสาย (ค่า 0.0 ถึง 1.0)
• strokeWeight - กำหนดความหนาของสายของเส้นในพิกเซล
• fillColor - กำหนดสีของพื้นที่ภายในวงกลม ในรูปแบบสีสี่หลัก (รูปแบบ: "#FFFFFF")
• fillOpacity - กำหนดความโปร่งใสของสีที่ทำเนียบ (ค่า 0.0 ถึง 1.0)
• editable - กำหนดว่าผู้ใช้สามารถแก้ไขวงกลม (true/false)

ตัวอย่าง

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:20000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
});

แผนที่ Google - หน้าต่างข้อมูล

แสดงข้อความที่มีใน marker โดยใช้หน้าต่างข้อมูลที่มีข้อความ:

ตัวอย่าง

var infowindow = new google.maps.InfoWindow({
  content:"Hello World!"
});
infowindow.open(map,marker);