Google แผนที่ซ้อนทับ
Google Maps - โอเวอร์เลย์
ภาพซ้อนทับคือวัตถุบนแผนที่ที่เชื่อมโยงกับพิกัดละติจูด/ลองจิจูด
Google Maps มีการซ้อนทับหลายประเภท:
- Marker - ตำแหน่งเดียวบนแผนที่ เครื่องหมายยังสามารถแสดงภาพไอคอนที่กำหนดเองได้
- Polyline - ชุดของเส้นตรงบนแผนที่
- รูปหลายเหลี่ยม - ชุดของเส้นตรงบนแผนที่และรูปร่างเป็น "ปิด"
- วงกลมและสี่เหลี่ยมผืนผ้า
- หน้าต่างข้อมูล - แสดงเนื้อหาภายในบอลลูนป๊อปอัปที่ด้านบนของแผนที่
- โอเวอร์เลย์แบบกำหนดเอง
Google Maps - เพิ่มเครื่องหมาย
ตัวสร้าง Marker สร้างเครื่องหมาย โปรดทราบว่าต้องตั้งค่าคุณสมบัติตำแหน่งเพื่อให้เครื่องหมายแสดง
เพิ่มเครื่องหมายลงในแผนที่โดยใช้เมธอด setMap():
ตัวอย่าง
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);
Google Maps - ทำให้มาร์กเกอร์เคลื่อนไหว
ตัวอย่างด้านล่างแสดงวิธีทำให้มาร์กเกอร์เคลื่อนไหวด้วยคุณสมบัติแอนิเมชั่น:
ตัวอย่าง
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 - Polyline
เส้น Polyline คือเส้นที่ลากผ่านชุดพิกัดตามลำดับ
polyline รองรับคุณสมบัติต่อไปนี้:
- เส้นทาง - ระบุพิกัดละติจูด/ลองจิจูดหลายเส้นสำหรับเส้น
- strokeColor - ระบุสีฐานสิบหกสำหรับเส้น (รูปแบบ: "#FFFFFF")
- strokeOpacity - ระบุความทึบของเส้น (ค่าระหว่าง 0.0 ถึง 1.0)
- strokeWeight - ระบุน้ำหนักของเส้นเป็นพิกเซล
- แก้ไขได้ - กำหนดว่าผู้ใช้แก้ไขบรรทัดได้หรือไม่ (จริง/เท็จ)
ตัวอย่าง
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
Google Maps - รูปหลายเหลี่ยม
รูปหลายเหลี่ยมคล้ายกับรูปหลายเหลี่ยมที่ประกอบด้วยชุดของพิกัดตามลำดับ อย่างไรก็ตาม รูปหลายเหลี่ยมได้รับการออกแบบมาเพื่อกำหนดขอบเขตภายในวงปิด
รูปหลายเหลี่ยมเป็นเส้นตรง และรูปร่าง "ปิด" (ทุกเส้นเชื่อมกัน)
รูปหลายเหลี่ยมรองรับคุณสมบัติต่อไปนี้:
- เส้นทาง - ระบุพิกัด LatLng หลายเส้นสำหรับเส้น (พิกัดแรกและตัวสุดท้ายเท่ากัน)
- strokeColor - ระบุสีฐานสิบหกสำหรับเส้น (รูปแบบ: "#FFFFFF")
- strokeOpacity - ระบุความทึบของเส้น (ค่าระหว่าง 0.0 ถึง 1.0)
- strokeWeight - ระบุน้ำหนักของเส้นเป็นพิกเซล
- fillColor - ระบุสีฐานสิบหกสำหรับพื้นที่ภายในขอบเขตที่ล้อมรอบ (รูปแบบ: "#FFFFFF")
- fillOpacity - ระบุความทึบของสีเติม (ค่าระหว่าง 0.0 ถึง 1.0)
- แก้ไขได้ - กำหนดว่าผู้ใช้แก้ไขบรรทัดได้หรือไม่ (จริง/เท็จ)
ตัวอย่าง
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 Maps - วงกลม
วงกลมรองรับคุณสมบัติต่อไปนี้:
- center - ระบุ google.maps.LatLng ของจุดศูนย์กลางของวงกลม
- รัศมี - ระบุรัศมีของวงกลม หน่วยเป็นเมตร
- strokeColor - ระบุสีฐานสิบหกสำหรับเส้นรอบวงกลม (รูปแบบ: "#FFFFFF")
- strokeOpacity - ระบุความทึบของสีเส้นขีด (ค่าระหว่าง 0.0 ถึง 1.0)
- strokeWeight - ระบุน้ำหนักของเส้นเป็นพิกเซล
- fillColor - ระบุสีฐานสิบหกสำหรับพื้นที่ภายในวงกลม (รูปแบบ: "#FFFFFF")
- fillOpacity - ระบุความทึบของสีเติม (ค่าระหว่าง 0.0 ถึง 1.0)
- แก้ไขได้ - กำหนดว่าผู้ใช้แก้ไขวงกลมได้หรือไม่ (จริง/เท็จ)
ตัวอย่าง
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Maps - InfoWindow
แสดงหน้าต่างข้อมูลพร้อมเนื้อหาข้อความสำหรับเครื่องหมาย:
ตัวอย่าง
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);