วิธี การปักหมุดบนแผนที่ (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 » 03/07/2017 5:44 pm

การปัดหมุดหลายตำแหน่งโดยการใช้ 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 ลงไปเท่านั้น

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน