ล่าสุดการพัฒนาเว็บบทเรียน
 

ซ้อนทับ Google Maps

❮ก่อนหน้า ถัดไปบท❯

เพิ่มเครื่องหมายเพื่อแผนที่ Google:

Google แผนที่ - ซ้อนทับ

ซ้อนทับเป็นวัตถุบนแผนที่ที่ถูกผูกไว้กับละติจูดพิกัด / ลองจิจูด

Google แผนที่มีหลายประเภทของการซ้อนทับ:

  • เครื่องหมาย - สถานที่เดียวบนแผนที่ เครื่องหมายนี้ยังสามารถแสดงภาพไอคอนที่กำหนดเอง
  • เส้น - ซีรีส์ของเส้นตรงบนแผนที่
  • รูปหลายเหลี่ยม - ซีรีส์ของเส้นตรงบนแผนที่และรูปร่างคือ "ปิด"
  • วงกลมและสี่เหลี่ยมผืนผ้า
  • ข้อมูล Windows - แสดงเนื้อหาภายในบอลลูนป๊อปอัพที่ด้านบนของแผนที่
  • ซ้อนทับที่กำหนดเอง

Google แผนที่ - เพิ่มเครื่องหมาย

ตัวสร้าง Marker สร้างเครื่องหมาย (โปรดทราบว่าสถานที่ให้บริการในฐานะที่จะต้องตั้งค่าสำหรับเครื่องหมายเพื่อแสดง)

เพิ่มเครื่องหมายลงในแผนที่โดยใช้ setMap() วิธีการ:

ตัวอย่าง

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

marker.setMap(map);
ลองตัวเอง»

Google แผนที่ - เคลื่อนไหวเครื่องหมาย

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

ตัวอย่าง

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

marker.setMap(map);
ลองตัวเอง»

Google แผนที่ - ไอคอนแทนของเครื่องหมาย

ตัวอย่างด้านล่างระบุภาพ (icon) ที่จะใช้แทนของเครื่องหมายเริ่มต้น:

ตัวอย่าง

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

marker.setMap(map);
ลองตัวเอง»

Google แผนที่ - Polyline

Polyline เป็นเส้นที่ลากผ่านชุดของพิกัดในลำดับที่สั่ง

เส้นสนับสนุนคุณสมบัติต่อไปนี้:

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

ตัวอย่าง

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
  path:myTrip,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2
});
ลองตัวเอง»

Google แผนที่ - รูปหลายเหลี่ยม

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

รูปหลายเหลี่ยมที่ทำจากเส้นตรงและรูปร่างจะ "closed" (ทุกสายเชื่อมต่อขึ้นไป)

รูปหลายเหลี่ยมสนับสนุนคุณสมบัติต่อไปนี้:

  • เส้นทาง - ระบุหลายละติจูดลองจิจูดพิกัดเส้น (ครั้งแรกและครั้งประสานงานมีค่าเท่ากัน)
  • strokeColor - ระบุสีฐานสิบหกสำหรับบรรทัด (format: "#FFFFFF")
  • strokeOpacity - ระบุความทึบของเส้น (ค่าระหว่าง 0.0 และ 1.0)
  • strokeWeight - ระบุน้ำหนักของโรคหลอดเลือดสมองเส้นที่เป็นพิกเซล
  • fillColor - ระบุสีฐานสิบหกสำหรับพื้นที่ภายในพื้นที่ปิดล้อม (format: "#FFFFFF")
  • fillOpacity - ระบุความทึบของสีเติมที่ (ค่าระหว่าง 0.0 และ 1.0)
  • ที่สามารถแก้ไขได้ - กำหนดไม่ว่าจะเป็นสายที่สามารถแก้ไขได้โดยผู้ใช้ (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 แผนที่ - วงกลม

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

  • ศูนย์ - ระบุ google.maps.LatLng ศูนย์ของวงกลม
  • รัศมี - ระบุรัศมีของวงกลมในเมตร
  • strokeColor - ระบุสีฐานสิบหกเส้นรอบวงกลม (format: "#FFFFFF")
  • strokeOpacity - ระบุความทึบของสีจังหวะที่ (ค่าระหว่าง 0.0 และ 1.0)
  • strokeWeight - ระบุน้ำหนักของโรคหลอดเลือดสมองเส้นที่เป็นพิกเซล
  • fillColor - ระบุสีฐานสิบหกสำหรับพื้นที่ภายในวงกลม (format: "#FFFFFF")
  • fillOpacity - ระบุความทึบของสีเติมที่ (ค่าระหว่าง 0.0 และ 1.0)
  • ที่สามารถแก้ไขได้ - กำหนดว่าวงกลมสามารถแก้ไขได้โดยผู้ใช้ (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 แผนที่ - InfoWindow

แสดง InfoWindow ที่มีเนื้อหาข้อความบางอย่างสำหรับเครื่องหมาย:

ตัวอย่าง

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

infowindow.open(map,marker);
ลองตัวเอง»

Google แผนที่ - อ้างอิงซ้อนทับ

Google Maps API อ้างอิง


❮ก่อนหน้า ถัดไปบท❯