Google Maps - ซ้อนทับ
การซ้อนทับเป็นวัตถุที่ผูกไว้กับพิกัดลองจิจูด/ละติจูดบนแผนที่และจะย้ายในขณะที่คุณลากหรือซูมแผนที่
Google Maps API มีการซ้อนทับต่อไปนี้:
1. จุดบนแผนที่จะแสดงโดยใช้เครื่องหมายและไอคอนที่กำหนดเองมักจะปรากฏขึ้น แท็กเป็นวัตถุของประเภท gmmarker และไอคอนสามารถปรับแต่งได้โดยใช้วัตถุประเภท Gicon
2. เส้นบนแผนที่จะแสดงโดยใช้ polylines (แสดงถึงการรวบรวมคะแนน) บรรทัดเป็นวัตถุของประเภท gpolyline
3. พื้นที่บนแผนที่จะแสดงเป็นรูปหลายเหลี่ยม (ถ้าเป็นพื้นที่ที่มีรูปร่างใด ๆ ) หรือการซ้อนทับพื้นผิวด้านล่าง (ถ้าเป็นพื้นที่สี่เหลี่ยม) รูปหลายเหลี่ยมคล้ายกับรูปหลายเหลี่ยมปิดดังนั้นจึงสามารถเป็นรูปร่างได้ การซ้อนทับภาคพื้นดินมักจะใช้บนแผนที่ที่มีความสัมพันธ์โดยตรงหรือโดยอ้อมกับกระเบื้อง
4. แผนที่ตัวเองจะแสดงโดยใช้การซ้อนทับกระเบื้อง หากคุณมีซีรี่ส์ของคุณเองคุณสามารถใช้คลาส GtileLayerOverlay เพื่อเปลี่ยนกระเบื้องที่คุณมีอยู่แล้วบนแผนที่หรือแม้แต่ใช้ GmapType เพื่อสร้างประเภทแผนที่ของคุณเอง
5. หน้าต่างข้อมูลยังเป็นเลเยอร์ซ้อนทับพิเศษ อย่างไรก็ตามโปรดทราบว่าหน้าต่างข้อมูลจะถูกเพิ่มลงในแผนที่โดยอัตโนมัติและแผนที่สามารถเพิ่มวัตถุหนึ่งของประเภท Ginfowindow เท่านั้น
Google Maps - เพิ่มแท็ก
ทำเครื่องหมายจุดบนแผนที่ โดยค่าเริ่มต้นพวกเขาใช้ g_default_icon (คุณสามารถระบุไอคอนที่กำหนดเอง) ตัวสร้าง Gmarker ใช้วัตถุ glatlng และ gmmarkeroptions (ไม่บังคับ) เป็นพารามิเตอร์
เครื่องหมายได้รับการออกแบบให้มีการโต้ตอบ ตัวอย่างเช่นโดยค่าเริ่มต้นพวกเขาจะได้รับเหตุการณ์ "คลิก" ซึ่งมักจะใช้เพื่อเปิดหน้าต่างข้อมูลในฟังเหตุการณ์
เพิ่มแท็กบนแผนที่ผ่านวิธี SetMap ():
ตัวอย่าง
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (51.508742, -0.120850); ฟังก์ชั่นเริ่มต้น () {var mapprop = {center: myCenter, ซูม: 5, mapTypeId: google.maps.mapTypeId.RoadMap}; google.maps.marker ({ตำแหน่ง: mycenter,}); marker.setMap (แผนที่);} google.maps.event.adddomListener (หน้าต่าง, 'โหลด', เริ่มต้น);ตัวอย่างการแสดงผล:
Google Maps - แท็กที่ลากได้
ตัวอย่างต่อไปนี้อธิบายวิธีใช้คุณสมบัติแอนิเมชั่นเพื่อลากแท็ก:
ตัวอย่าง
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (51.508742, -0.120850); var marker; ฟังก์ชั่นเริ่มต้น () {var mapprop = {center: myCenter, ซูม: 5, maptypeid: google.maps.maptypeid.roadmap}; google.maps.map (document.getElementById ("googlemap"), mapprop); marker = ใหม่ google.maps.marker ({ตำแหน่ง: myCenter, ภาพเคลื่อนไหว: google.maps.animation.bounce}); marker.setMap (แผนที่); id = "googlemap"> </div> </body> </html>Google Maps - ไอคอน
แท็กสามารถแสดงด้วยไอคอนใหม่ที่กำหนดเองแทนไอคอนเริ่มต้น:
ตัวอย่าง
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (51.508742, -0.120850); ฟังก์ชั่นเริ่มต้น () {var mapprop = {center: myCenter, ซูม: 5, mapTypeId: google.maps.mapTypeId.RoadMap}; google.maps.marker ({ตำแหน่ง: myCenter, ไอคอน: 'pinkball.png'}); marker.setMap (แผนที่);} google.maps.event.adddomListener (หน้าต่าง, 'โหลด', เริ่มต้น);Google Maps - สายพับ
วัตถุ Gpolyline สร้างการซ้อนทับเชิงเส้นบนแผนที่ Gpolyline รวมถึงชุดของคะแนนและสร้างชุดของกลุ่มบรรทัดที่เชื่อมต่อจุดเหล่านี้อย่างเป็นระเบียบ
Polylines รองรับคุณสมบัติต่อไปนี้:
เส้นทาง - ระบุพิกัดละติจูด/ลองจิจูดของเส้นตรงหลายเส้น
Strokecolor - ระบุค่าสีหกเหลี่ยมของบรรทัด (รูปแบบ: "#FFFFFF")
Strokeopacity - ระบุความโปร่งใสของบรรทัด (ค่าคือ 0.0 ถึง 1.0)
Strokeweight - กำหนดความกว้างของเส้นเป็นพิกเซล
แก้ไขได้ - กำหนดว่าผู้ใช้สามารถแก้ไขเส้นตรง (จริง/เท็จ)
ตัวอย่าง
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (52.395715,4.888916); var stavanger = ใหม่ google.maps.latlng (58.983991,5.734863); google.maps.latlng (51.508742, -0.120850); ฟังก์ชั่นเริ่มต้น () {var mapprop = {center: x, ซูม: 4, maptypeid: google.maps.maptypeid.roadmap}; var map = ใหม่ google.maps.map (document.getElementById ("googlemap"), mapprop); var mytrip = [stavanger, อัมสเตอร์ดัม, ลอนดอน]; var flightpath = new google.maps.polyline ({path: mytrip, Strokecolor: };ตัวอย่างการแสดงผล:
Google Maps - Polygons
วัตถุ Gpolygon มีความคล้ายคลึงกับวัตถุ gpolyline ซึ่งพวกเขาทั้งหมดรวมถึงชุดของจุดที่สั่งซื้อ อย่างไรก็ตามแทนที่จะมีจุดสิ้นสุดสองจุดเช่น polylines รูปหลายเหลี่ยมได้รับการออกแบบมาเพื่อกำหนดพื้นที่ที่มีลูปปิด
เช่นเดียวกับ polylines คุณสามารถปรับแต่งสีความหนาและความโปร่งใสของขอบรูปหลายเหลี่ยม (เส้น) รวมถึงสีและความโปร่งใสของพื้นที่เติมปิด สีควรอยู่ในรูปแบบ HTML หมายเลขเลขฐานสิบหก
รูปหลายเหลี่ยมสนับสนุนคุณสมบัติต่อไปนี้:
เส้นทาง - ระบุพิกัดของละติจูดหลายเส้นตรง (พิกัดแรกและสุดท้ายมีค่าเท่ากัน)
Strokecolor - ระบุค่าสีหกเหลี่ยมของบรรทัด (รูปแบบ: "#FFFFFF")
StrokeOpacity - ระบุความโปร่งใสของบรรทัด (ค่านี้คือ 0.0 ถึง 1.0)
Strokeweight - กำหนดความกว้างของเส้นเป็นพิกเซล
FillColor - ระบุค่าสีเลขฐานสิบหกสำหรับพื้นที่ปิด (รูปแบบ: "#FFFFFF")
การเติมเต็ม - ระบุความโปร่งใสของสีเติม (ค่าคือ 0.0 ถึง 1.0)
แก้ไขได้ - กำหนดว่าผู้ใช้สามารถแก้ไขเส้นตรง (จริง/เท็จ)
ตัวอย่าง
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (52.395715,4.888916); var stavanger = ใหม่ google.maps.latlng (58.983991,5.734863); google.maps.latlng (51.508742, -0.120850); ฟังก์ชั่นเริ่มต้น () {var mapprop = {center: x, ซูม: 4, maptypeid: google.maps.maptypeid.roadmap}; var map = ใหม่ google.maps.map (document.getElementById ("googlemap"), mapprop); var mytrip = [stavanger, อัมสเตอร์ดัม, ลอนดอน, stavanger]; var flightpath = new google.maps.polygon ({path: mytrip, strokecolor: FillColor: "#0000ff", Fillopacity: 0.4}); FlightPath.setMap (แผนที่);} google.maps.event.adddomListener (หน้าต่าง, 'โหลด', เริ่มต้น);ตัวอย่างการแสดงผล:
Google Maps - Circle
วงกลมรองรับคุณสมบัติต่อไปนี้:
ศูนย์ - ระบุพารามิเตอร์จุดกึ่งกลางของวงกลม google.maps.latlng
รัศมี - ระบุรัศมีของวงกลมเป็นเมตร
Strokecolor - ระบุค่าสีหกเหลี่ยมของอาร์ค (รูปแบบ: "#FFFFFF")
Strokeopacity - ระบุความโปร่งใสของส่วนโค้ง (ค่าคือ 0.0 ถึง 1.0)
Strokeweight - กำหนดความกว้างของเส้นเป็นพิกเซล
FillColor - ระบุค่าสีหกสิบหกค่าของวงกลม (รูปแบบ: "#FFFFFF")
การเติมเต็ม - ระบุความโปร่งใสของสีเติม (ค่าคือ 0.0 ถึง 1.0)
กำหนดว่าผู้ใช้สามารถแก้ไขเส้นตรง (จริง/เท็จ)
ตัวอย่าง
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (52.395715,4.888916); ฟังก์ชั่นเริ่มต้น () {var mapprop = {center: Amsterdam, Zoom: 7, MapTypeId: google.maps.maptypeid.roadmap}; var map = ใหม่ google.maps.map (document.getElementById ("googlemap"), mapprop); var mycity = ใหม่ google.maps.circle ({center: Amsterdam, Radius: 20000, Strokecolor: "#0000ff", Strokeopacity: 0.8, Strokeweight: 2 }); mycity.setMap (แผนที่);} google.maps.event.adddomListener (หน้าต่าง, 'โหลด', เริ่มต้น); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>ตัวอย่างการแสดงผล:
Google Maps - หน้าต่างข้อมูล
แสดงหน้าต่างข้อความบนแท็ก:
ตัวอย่าง
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (51.508742, -0.120850); ฟังก์ชั่นเริ่มต้น () {var mapprop = {center: myCenter, ซูม: 5, mapTypeId: google.maps.mapTypeId.RoadMap}; google.maps.marker ({ตำแหน่ง: mycenter,}); marker.setMap (แผนที่); var infowindow = ใหม่ google.maps.infowindow ({เนื้อหา: "Hello World!"}); infowindow.open (แผนที่) id = "googlemap"> </div> </body> </html>ตัวอย่างการแสดงผล:
ข้างต้นเป็นการรวบรวมข้อมูลเกี่ยวกับการซ้อนทับของ Google Maps เราจะเพิ่มในภายหลัง ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!