บทช่วยสอน Google Map ซ้อนทับ ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้
Google แผนที่ - ซ้อนทับ,Google แผนที่ - เพิ่มแท็ก,ตัวอย่าง,Google แผนที่ - เครื่องหมายลากไปมาได้,ตัวอย่าง,Google แผนที่ - ไอคอน,ตัวอย่าง,Google แผนที่ - เส้น,ตัวอย่าง,Google แผนที่ - รูปหลายเหลี่ยม,ตัวอย่าง,Google แผนที่ - รอบ,ตัวอย่าง,Google แผนที่ - หน้าต่างข้อมูล,ตัวอย่าง,Google แผนที่ - คู่มืออ้างอิงซ้อนทับ,
Google Map ซ้อนทับ
การเพิ่มเครื่องหมายใน Google แผนที่
Google แผนที่ - ซ้อนทับ
ซ้อนทับเป็นวัตถุที่ถูกผูกไว้กับละติจูด / ลองจิจูดพิกัดบนแผนที่ลากหรือซูมแผนที่จะย้ายไปอยู่กับคุณ
Google Maps API มีการซ้อนทับต่อไปนี้:
- Point โดยใช้เครื่องหมายบนแผนที่เพื่อแสดงมักจะแสดงไอคอนที่กำหนดเอง เครื่องหมายเป็นวัตถุประเภท GMarker และสามารถนำมาใช้ในการกำหนดประเภทของวัตถุไอคอน GIcon
- เส้นบนแผนที่โดยใช้เส้น (แทนคอลเลกชันของจุด) ที่จะแสดง สาย GPolyline ของชนิดของวัตถุ
- พื้นที่บนแผนที่จะแสดงเป็นรูปหลายเหลี่ยม (ถ้าพื้นที่เป็นรูปทรงพล) หรือซ้อนทับด้านล่าง (ถ้ามันเป็นพื้นที่สี่เหลี่ยม) รูปหลายเหลี่ยมคล้ายกับเส้นปิดก็สามารถรูปร่างใด ๆ การซ้อนภาพพื้นตามปกติจะใช้แผนที่พื้นที่ด้วยกระเบื้องโดยตรงหรือโดยอ้อมที่เกี่ยวข้อง
- แผนที่ตัวเองจะถูกแสดงโดยใช้การซ้อนทับกระเบื้อง หากคุณเป็นเจ้าของชุดของกระเบื้องที่คุณสามารถใช้คลาส GTileLayerOverlay เพื่อเปลี่ยนกระเบื้องที่มีอยู่บนแผนที่คุณยังสามารถใช้ในการสร้าง GMapType ประเภทแผนที่ของคุณเอง
- หน้าต่างข้อมูลยังเป็นชนิดพิเศษของการซ้อนทับ แต่โปรดทราบหน้าต่างข้อมูลจะถูกเพิ่มโดยอัตโนมัติไปยังแผนที่และแผนที่เท่านั้นที่สามารถเพิ่มอีกหนึ่งวัตถุ GInfoWindow ประเภท
Google แผนที่ - เพิ่มแท็ก
แผนที่ระบุจุดในบันทึก โดยค่าเริ่มต้นที่พวกเขาใช้ G_DEFAULT_ICON (คุณยังสามารถระบุไอคอนที่กำหนดเอง) GMarker คอนสตรัค GLatLng และ GMarkerOptions (อุปกรณ์เสริม) วัตถุเป็นพารามิเตอร์
แท็กได้รับการออกแบบให้มีการโต้ตอบ ตัวอย่างเช่นโดยการเริ่มต้นของพวกเขาได้รับ "คลิก" เหตุการณ์ที่เกิดขึ้นมักจะใช้ในการเปิดหน้าต่างข้อมูลในการฟังเหตุการณ์
โดย setMap () วิธีการเพิ่มเครื่องหมายบนแผนที่:
ตัวอย่าง
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
ลอง»
Google แผนที่ - เครื่องหมายลากไปมาได้
ตัวอย่างต่อไปนี้อธิบายวิธีการใช้คุณสมบัติการเคลื่อนไหวที่จะลากเครื่องหมาย:
ตัวอย่าง
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
ลอง»
Google แผนที่ - ไอคอน
แท็กสามารถกำหนดได้จากไอคอนใหม่จะแสดงในสถานที่ของไอคอนเริ่มต้น:
ตัวอย่าง
var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
ลอง»
Google แผนที่ - เส้น
GPolyline วัตถุสามารถสร้างซ้อนทับเชิงเส้นบนแผนที่ GPolyline รวมถึงชุดของจุดและสร้างชุดของเส้นเป็นระเบียบเรียบร้อยในการเชื่อมต่อจุดเหล่านี้
เส้นรองรับคุณสมบัติดังต่อไปนี้:
- เส้นทาง - ระบุมากกว่าหนึ่งบรรทัดของละติจูด / ลองจิจูด
- 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 แผนที่ - รูปหลายเหลี่ยม
วัตถุ GPolygon เป็นวัตถุ GPolyline ที่คล้ายกันเพราะพวกเขารวมถึงชุดของจุดสั่ง อย่างไรก็ตามรูปหลายเหลี่ยมที่มีสองจุดสิ้นสุด แต่การออกแบบของพื้นที่วงปิดที่มีการกำหนดรูปแบบ
และสายที่คุณสามารถปรับแต่งสีและความโปร่งใสของขอบรูปหลายเหลี่ยม (เส้น) สีความหนาและความโปร่งใสเช่นเดียวกับการปิดพื้นที่ที่เต็มไปด้วย สีที่ควรจะเป็นในรูปแบบ HTML เลขฐานสิบหกเป็นตัวเลข
รูปหลายเหลี่ยมรองรับคุณสมบัติดังต่อไปนี้:
- เส้นทาง - ระบุหลายพิกัดเชิงเส้นรุ้ง (แรกและครั้งสุดท้ายพิกัดเท่ากัน)
- 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 แผนที่ - รอบ
รอบที่รองรับคุณสมบัติดังต่อไปนี้:
- ศูนย์ - จุดศูนย์ของพารามิเตอร์วงกลมระบุ 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 แผนที่ - หน้าต่างข้อมูล
บนแท็กเพื่อแสดงหน้าต่างข้อความ:
ตัวอย่าง
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
ลอง»
Google แผนที่ - คู่มืออ้างอิงซ้อนทับ
Google Maps API คู่มืออ้างอิง