วิธี การปักหมุดบนแผนที่ (Marker) หลายตำแหน่ง (Array) บน Google Maps API

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Ik Kat
PHP Super Member
PHP Super Member
โพสต์: 291
ลงทะเบียนเมื่อ: 26/06/2017 2:32 pm

วิธี การปักหมุดบนแผนที่ (Marker) หลายตำแหน่ง (Array) บน Google Maps API

โพสต์ที่ยังไม่ได้อ่าน โดย Ik Kat »

การปัดหมุดหลายตำแหน่งโดยการใช้ JavaScript ที่เป็น Array จะทำให้ง่ายต่อการจัดการตำแหน่งที่ตั้งที่หลากหลาย เพราะสามารถลูปค่าจาก Array แล้วปักลงบน Google Maps ได้ทันที่

รูปภาพ
การสร้างตัวแปร Array :

โค้ด: เลือกทั้งหมด

var locations = [
  ['Test1', 13.836760, 100.582560],
  ['Test2', 13.836328, 100.582123],
  ['Test3', 13.837205, 100.581205]
];
การ Loop :

โค้ด: เลือกทั้งหมด

for (i = 0; i < locations.length; i++) {  

}
การปักหมุด ค่าที่ได้จาก Array :

โค้ด: เลือกทั้งหมด

var marker, i, info;

for (i = 0; i < locations.length; i++) {  

	marker = new google.maps.Marker({
	   position: new google.maps.LatLng(locations[i][1], locations[i][2]),
	   map: maps,
	   title: locations[i][0]
	});

	info = new google.maps.InfoWindow();

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
	return function() {
	  info.setContent(locations[i][0]);
	  info.open(maps, marker);
	}
  })(marker, i));

}
จากตัวอย่างโค้ดด้านบนจะเห็นได้ว่า การเพิ่มจำนวนการปักหมุดโดยใช้ Array จะสามารถจัดการได้ง่ายกว่า เพียงแค่เพิ่มตัวแปร Array ลงไปเท่านั้น
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 24