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
});

ลอง»