วิธีใช้ตัวเลขแทนตัวอักษรใน Google Custom Marker

เครื่องหมายของ Google Maps เน้นเว็บไซต์ที่เฉพาะเจาะจงบนแผนที่ ตามค่าเริ่มต้น Google จะระบุเครื่องหมายแต่ละตัวที่มีเครื่องหมายสี่เหลี่ยมและเครื่องหมายหลายตัวพร้อมตัวอักษร แต่อาจไม่เหมาะกับแอปพลิเคชันบางตัว ตัวอย่างเช่นหาก บริษัท ของคุณอ้างถึงสาขาเป็นไซต์ 1, 2 และ 3 เครื่องหมายที่มีหมายเลขจะระบุได้ชัดเจนกว่าตัวอักษร ใช้เครื่องหมายที่กำหนดเองในโปรแกรมของคุณเพื่อออกแบบฉลากของคุณเองสำหรับตำแหน่งบนแผนที่ เครื่องหมายเหล่านี้ใช้ไอคอนที่กำหนดเองซึ่งคุณสามารถใช้รหัสโดยใช้ Google Charts API

1

เปิดซอร์สโค้ดของโปรแกรมของคุณด้วยโปรแกรมพัฒนา Java เช่น Eclipse

2

เลื่อนไปที่ฟังก์ชัน "เตรียมใช้งาน" บล็อกรหัสนี้กำหนดแผนที่ของคุณและกำหนดตัวเลือกสำหรับมัน ตัวอย่างเช่นรหัสอาจอ่าน:

ฟังก์ชั่นเริ่มต้น () {

var พิกัด = google.maps.LatLng ใหม่ (42.346429, -71.097186);

var myOptions = {

ซูม: 4

ศูนย์: พิกัด

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var ourHeadquarters = new google.maps.Map (document.getElementById ("map_canvas"), myOptions);

}

3

เพิ่มบรรทัดใหม่ที่กำหนดละติจูดและลองจิจูดของเครื่องหมายของคุณ ตัวอย่างเช่นหากเครื่องหมายของคุณต้องระบุละติจูดที่ 42.349093 และลองจิจูดที่ -71.101971 ให้เพิ่มบรรทัดต่อไปนี้:

var markerCoordinates = google.maps.LatLng ใหม่ (42.349093, -71.101971);

4

เพิ่มบล็อกต่อไปนี้เพื่อสร้างเครื่องหมายของคุณ:

var marker = new google.maps.Marker ({

ตำแหน่ง: marker ผู้ใต้บังคับบัญชา,

แผนที่: สำนักงานใหญ่ของเรา

});

แทนที่ "markerCoordinates" ด้วยตัวแปรที่คุณสร้างขึ้นในขั้นตอนก่อนหน้าและแทนที่ "OurHquadquarters" ด้วยตัวแปรที่เกี่ยวข้องกับแผนที่ของคุณ

5

เพิ่มบรรทัดต่อไปนี้ภายในบล็อกมาร์กเกอร์เพื่อสร้างไอคอนสำหรับเครื่องหมาย:

ไอคอน: // chart.apis.google.com/chartchst=d_map_pin_letter&chld=A|FF0000|000000 '

6

แทนที่ "A" ในบรรทัดด้วยตัวเลข ตัวอย่างเช่นแทนที่ด้วย "1" เพื่อเปลี่ยนบรรทัดเป็น:

ไอคอน: // chart.apis.google.com/chartchst=d_map_pin_letter&chld=1|FF0000|999999 '

7

เปลี่ยน "FF0000" เป็นรหัสฐานสิบหก HTML ของพื้นหลังของเครื่องหมาย ตัวอย่างเช่นในการตั้งค่าสีพื้นหลังเป็นสีเหลืองซึ่งใช้รหัส "FFFF00" ให้แทนที่รหัสด้วย "FFFF00" เพื่อเปลี่ยนบรรทัดเป็น:

ไอคอน: // chart.apis.google.com/chartchst=d_map_pin_letter&chld=1|FFFF00|999999 '

8

เปลี่ยน "999999" เป็นรหัสฐานสิบหก HTML ของข้อความหมายเลขเครื่องหมาย ตัวอย่างเช่นหากต้องการเขียนข้อความนี้เป็นสีดำซึ่งใช้รหัส "000000" ให้แทนที่รหัสด้วย "000000" เพื่อเปลี่ยนบรรทัดเป็น:

ไอคอน: // chart.apis.google.com/chartchst=d_map_pin_letter&chld=1|FFFF00|000000 '