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

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

User avatar
Ik Kat
PHP Super Member
PHP Super Member
Posts: 291
Joined: 26/06/2017 2:32 pm

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

Post by Ik Kat »

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

Image
การสร้างตัวแปร Array :

Code: Select all

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

Code: Select all

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

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

Code: Select all

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
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 5 guests