หน้า 1 จากทั้งหมด 1

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

โพสต์แล้ว: 03/07/2017 5:44 pm
โดย 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 ลงไปเท่านั้น