- บทนำ
- คุณสมบัติของสัญลักษณ์
- สัญลักษณ์ที่กำหนดไว้ล่วงหน้า
- เพิ่มสัญลักษณ์ลงในเครื่องหมาย
- เพิ่มสัญลักษณ์ลงในเส้นประกอบ
- ทำให้สัญลักษณ์เคลื่อนไหว
บทนำ
Symbol คือไอคอนแบบเวกเตอร์ที่แสดงบน Marker หรือ Polyline ได้ รูปร่างของสัญลักษณ์จะกำหนดโดยเส้นทางที่ใช้การเขียนเส้นทาง SVG แม้ว่า path จะเป็นพร็อพเพอร์ตี้ที่จำเป็นเพียงรายการเดียว แต่ออบเจ็กต์ Symbol รองรับพร็อพเพอร์ตี้ที่หลากหลาย ซึ่งช่วยให้คุณปรับแต่งลักษณะที่มองเห็นได้ เช่น สีและความหนาของเส้นขอบและสีของพื้น ดูรายการพร็อพเพอร์ตี้
สัญลักษณ์ที่กําหนดไว้ล่วงหน้าหลายรายการมีให้ใช้งานผ่านคลาส SymbolPath ดูรายการด้านล่าง
คุณสมบัติของสัญลักษณ์
โปรดทราบว่าลักษณะการทำงานเริ่มต้นของ Symbol จะแตกต่างกันเล็กน้อย ขึ้นอยู่กับว่าปรากฏบนเครื่องหมายหรือเส้นประกอบ ความแตกต่างเหล่านี้อธิบายอยู่ในรายการพร็อพเพอร์ตี้ด้านล่าง
Symbol รองรับพร็อพเพอร์ตี้ต่อไปนี้
path(ต้องระบุ) คือเส้นทางที่กําหนดรูปร่างของสัญลักษณ์ คุณสามารถใช้เส้นทางที่กําหนดไว้ล่วงหน้าในgoogle.maps.SymbolPathหรือกําหนดเส้นทางที่กําหนดเองโดยใช้การเขียนเส้นทาง SVG หมายเหตุ: เส้นทางเวกเตอร์ในเส้นประกอบต้องพอดีภายในสี่เหลี่ยมจัตุรัสขนาด 22x22 พิกเซล หากเส้นทางมีจุดที่อยู่นอกสี่เหลี่ยมจัตุรัสนี้ คุณต้องปรับพร็อพเพอร์ตี้scaleของสัญลักษณ์ให้เป็นค่าทศนิยม เช่น 0.2 เพื่อให้จุดที่ปรับขนาดแล้วพอดีกับสี่เหลี่ยมจัตุรัสanchorกำหนดตำแหน่งของสัญลักษณ์สัมพันธ์กับเครื่องหมายหรือเส้นประกอบ พิกัดของเส้นทางของสัญลักษณ์จะเลื่อนไปทางซ้ายและขึ้นด้านบนตามพิกัด x และ y ของจุดยึดตามลำดับ โดยค่าเริ่มต้น สัญลักษณ์จะยึดอยู่ที่(0, 0)ตำแหน่งจะแสดงในระบบพิกัดเดียวกับเส้นทางของสัญลักษณ์fillColorคือสีของเส้นขอบของสัญลักษณ์ (คือบริเวณที่มีเส้นขอบ) ระบบรองรับสี CSS3 ทั้งหมด ยกเว้นสีที่มีชื่อเพิ่มเติม สำหรับสัญลักษณ์บนเครื่องหมาย ค่าเริ่มต้นคือ "สีดํา" สำหรับสัญลักษณ์บนเส้นประกอบ สีเริ่มต้นคือสีเส้นโครงร่างของเส้นประกอบที่เกี่ยวข้องfillOpacityกำหนดความทึบแสงแบบสัมพัทธ์ (นั่นคือ ระดับการไม่โปร่งใส) ของสีเติมของสัญลักษณ์ ค่ามีตั้งแต่ 0.0 (โปร่งใสทั้งหมด) ถึง 1.0 (ทึบแสงทั้งหมด) ค่าเริ่มต้นคือ 0.0rotationคือมุมที่จะหมุนสัญลักษณ์ ซึ่งแสดงเป็นองศาตามเข็มนาฬิกา โดยค่าเริ่มต้น เครื่องหมายสัญลักษณ์จะมีการหมุน 0 และสัญลักษณ์บนเส้นประกอบจะหมุนตามมุมของขอบที่วางอยู่ การตั้งค่าการหมุนของสัญลักษณ์บนเส้นประกอบจะแก้ไขการหมุนของสัญลักษณ์เพื่อไม่ให้สัญลักษณ์นั้นไปตามเส้นโค้งอีกต่อไปscaleกำหนดขนาดการปรับขนาดสัญลักษณ์ สเกลเริ่มต้นสำหรับเครื่องหมายสัญลักษณ์คือ 1 หลังจากปรับขนาดแล้ว สัญลักษณ์อาจมีขนาดใดก็ได้ สําหรับสัญลักษณ์บนเส้นประกอบ มาตราส่วนเริ่มต้นคือความหนาของเส้นของเส้นประกอบ หลังจากปรับขนาดแล้ว สัญลักษณ์ต้องอยู่ภายในสี่เหลี่ยมจัตุรัสขนาด 22x22 พิกเซล โดยให้อยู่กึ่งกลางที่จุดยึดของสัญลักษณ์strokeColorคือสีของเส้นขอบของสัญลักษณ์ ระบบรองรับสี CSS3 ทั้งหมด ยกเว้นสีที่มีชื่อเพิ่มเติม สำหรับสัญลักษณ์บนเครื่องหมาย ค่าเริ่มต้นคือ "สีดํา" สำหรับสัญลักษณ์บนเส้นประกอบ สีเริ่มต้นคือสีเส้นโครงร่างของเส้นประกอบstrokeOpacityกำหนดความทึบแสงสัมพัทธ์ (นั่นคือ ความไม่โปร่งใส) ของเส้นของสัญลักษณ์ ค่ามีตั้งแต่ 0.0 (โปร่งใสทั้งหมด) ถึง 1.0 (ทึบแสงทั้งหมด) สําหรับเครื่องหมายสัญลักษณ์ ค่าเริ่มต้นคือ 1.0 สำหรับสัญลักษณ์บนเส้นประกอบ ค่าเริ่มต้นคือความทึบของเส้นของเส้นประกอบstrokeWeightกำหนดความหนาของเส้นขอบของสัญลักษณ์ ค่าเริ่มต้นคือscaleของสัญลักษณ์
สัญลักษณ์ที่กำหนดไว้ล่วงหน้า
Maps JavaScript API มีสัญลักษณ์ในตัวบางรายการที่คุณเพิ่มลงในเครื่องหมายหรือเส้นประกอบได้ผ่านคลาส SymbolPath
สัญลักษณ์เริ่มต้น ได้แก่ วงกลมและลูกศร 2 ประเภท ทั้งลูกศรเดินหน้าและย้อนกลับมีให้ใช้งาน ซึ่งมีประโยชน์อย่างยิ่งสําหรับเส้นประกอบ เนื่องจากการวางแนวของสัญลักษณ์บนเส้นประกอบจะคงที่ ไปข้างหน้าจะถือว่าอยู่ในทิศทางของจุดสิ้นสุดของเส้นประกอบ
คุณแก้ไขเส้นโครงร่างหรือสีเติมของสัญลักษณ์ที่กำหนดไว้ล่วงหน้าได้โดยใช้ตัวเลือกสัญลักษณ์เริ่มต้น
สัญลักษณ์ที่กําหนดไว้ล่วงหน้ามีดังนี้
| ชื่อ | คำอธิบาย | ตัวอย่าง |
|---|---|---|
google.maps.SymbolPath.CIRCLE | วงกลม |  |
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW | ลูกศรชี้กลับที่ปิดอยู่ทุกด้าน |  |
google.maps.SymbolPath.FORWARD_CLOSED_ARROW | ลูกศรชี้ไปข้างหน้าที่ปิดอยู่ทุกด้าน |  |
google.maps.SymbolPath.BACKWARD_OPEN_ARROW | ลูกศรชี้ไปด้านหลังที่เปิดอยู่ด้านหนึ่ง |  |
google.maps.SymbolPath.FORWARD_OPEN_ARROW | ลูกศรชี้ไปข้างหน้าที่เปิดอยู่ด้านหนึ่ง |  |
เพิ่มสัญลักษณ์ลงในเครื่องหมาย
หากต้องการแสดงไอคอนแบบเวกเตอร์บนเครื่องหมาย ให้ส่งลิเทอรัลออบเจ็กต์ Symbol ที่มีเส้นทางที่ต้องการไปยังพร็อพเพอร์ตี้ icon ของเครื่องหมาย ตัวอย่างต่อไปนี้ใช้การเขียนเส้นทาง SVG เพื่อสร้างไอคอนที่กำหนดเองสำหรับเครื่องหมาย
TypeScript
// This example uses SVG path notation to add a vector-based symbol // as the icon for a marker. The resulting icon is a marker-shaped // symbol with a blue fill and no border. function initMap(): void { const center = new google.maps.LatLng(-33.712451, 150.311823); const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 9, center: center, } ); const svgMarker = { path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z", fillColor: "blue", fillOpacity: 0.6, strokeWeight: 0, rotation: 0, scale: 2, anchor: new google.maps.Point(0, 20), }; new google.maps.Marker({ position: map.getCenter(), icon: svgMarker, map: map, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example uses SVG path notation to add a vector-based symbol // as the icon for a marker. The resulting icon is a marker-shaped // symbol with a blue fill and no border. function initMap() { const center = new google.maps.LatLng(-33.712451, 150.311823); const map = new google.maps.Map(document.getElementById("map"), { zoom: 9, center: center, }); const svgMarker = { path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z", fillColor: "blue", fillOpacity: 0.6, strokeWeight: 0, rotation: 0, scale: 2, anchor: new google.maps.Point(0, 20), }; new google.maps.Marker({ position: map.getCenter(), icon: svgMarker, map: map, }); } window.initMap = initMap;
ลองใช้ตัวอย่าง
เพิ่มสัญลักษณ์ลงในเส้นประกอบ
หากต้องการแสดงสัญลักษณ์บนเส้นประกอบ ให้ตั้งค่าพร็อพเพอร์ตี้ icons[] ของออบเจ็กต์ PolylineOptions อาร์เรย์ icons[] ใช้ลิเทอรัลออบเจ็กต์ IconSequence อย่างน้อย 1 รายการ โดยมีพร็อพเพอร์ตี้ต่อไปนี้
icon(ต้องระบุ) คือสัญลักษณ์ที่จะแสดงผลในบรรทัดoffsetกำหนดระยะห่างจากจุดเริ่มต้นของเส้นที่จะแสดงผลไอคอน ระยะทางนี้อาจแสดงเป็นเปอร์เซ็นต์ของความยาวของเส้น (เช่น "50%") หรือเป็นพิกเซล (เช่น "50px") ค่าเริ่มต้นคือ "100%"repeatกำหนดระยะห่างระหว่างไอคอนที่อยู่ติดกันในบรรทัด ระยะทางนี้อาจแสดงเป็นเปอร์เซ็นต์ของความยาวของเส้น (เช่น "50%") หรือเป็นพิกเซล (เช่น "50px") หากต้องการปิดใช้การซ้ำของไอคอน ให้ระบุ "0" ค่าเริ่มต้นคือ "0"
เมื่อใช้สัญลักษณ์ร่วมกับคลาส PolylineOptions คุณจะสามารถควบคุมรูปลักษณ์ของเส้นประกอบในแผนที่ได้ ด้านล่างนี้คือตัวอย่างการปรับแต่งที่คุณทำได้
ลูกศร
ใช้พร็อพเพอร์ตี้ IconSequence.offset เพื่อเพิ่มลูกศรที่จุดเริ่มต้นหรือจุดสิ้นสุดของเส้นประกอบ
// Define a symbol using a predefined path (an arrow) // supplied by the Google Maps JavaScript API. var lineSymbol = { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW }; // Create the polyline and add the symbol via the 'icons' property. var line = new google.maps.Polyline({ path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}], icons: [{ icon: lineSymbol, offset: '100%' }], map: map });
เส้นประ
คุณสร้างเอฟเฟกต์เส้นประได้โดยตั้งค่าความทึบของเส้นประกอบเป็น 0 และวางสัญลักษณ์ทึบทับเส้นเป็นระยะๆ
// Define a symbol using SVG path notation, with an opacity of 1. var lineSymbol = { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 4 }; // Create the polyline, passing the symbol in the 'icons' property. // Give the line an opacity of 0. // Repeat the symbol at intervals of 20 pixels to create the dashed effect. var line = new google.maps.Polyline({ path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}], strokeOpacity: 0, icons: [{ icon: lineSymbol, offset: '0', repeat: '20px' }], map: map });
เส้นทางที่กำหนดเอง
สัญลักษณ์ที่กำหนดเองช่วยให้คุณเพิ่มรูปร่างต่างๆ ลงในเส้นประกอบได้หลายแบบ
// Define the custom symbols. All symbols are defined via SVG path notation. // They have varying stroke color, fill color, stroke weight, // opacity and rotation properties. var symbolOne = { path: 'M -2,0 0,-2 2,0 0,2 z', strokeColor: '#F00', fillColor: '#F00', fillOpacity: 1 }; var symbolTwo = { path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3', strokeColor: '#00F', rotation: 45 }; var symbolThree = { path: 'M -2,-2 2,2 M 2,-2 -2,2', strokeColor: '#292', strokeWeight: 4 }; // Create the polyline and add the symbols via the 'icons' property. var line = new google.maps.Polyline({ path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}], icons: [ { icon: symbolOne, offset: '0%' }, { icon: symbolTwo, offset: '50%' }, { icon: symbolThree, offset: '100%' } ], map: map });
สร้างภาพเคลื่อนไหวของสัญลักษณ์
คุณสร้างภาพเคลื่อนไหวของสัญลักษณ์ตามเส้นทางได้โดยใช้ฟังก์ชัน window.setInterval() ของ DOM เพื่อเปลี่ยนออฟเซตของสัญลักษณ์เป็นระยะที่กําหนดไว้
TypeScript
// This example adds an animated symbol to a polyline. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { center: { lat: 20.291, lng: 153.027 }, zoom: 6, mapTypeId: "terrain", } ); // Define the symbol, using one of the predefined paths ('CIRCLE') // supplied by the Google Maps JavaScript API. const lineSymbol = { path: google.maps.SymbolPath.CIRCLE, scale: 8, strokeColor: "#393", }; // Create the polyline and add the symbol to it via the 'icons' property. const line = new google.maps.Polyline({ path: [ { lat: 22.291, lng: 153.027 }, { lat: 18.291, lng: 153.027 }, ], icons: [ { icon: lineSymbol, offset: "100%", }, ], map: map, }); animateCircle(line); } // Use the DOM setInterval() function to change the offset of the symbol // at fixed intervals. function animateCircle(line: google.maps.Polyline) { let count = 0; window.setInterval(() => { count = (count + 1) % 200; const icons = line.get("icons"); icons[0].offset = count / 2 + "%"; line.set("icons", icons); }, 20); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example adds an animated symbol to a polyline. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 20.291, lng: 153.027 }, zoom: 6, mapTypeId: "terrain", }); // Define the symbol, using one of the predefined paths ('CIRCLE') // supplied by the Google Maps JavaScript API. const lineSymbol = { path: google.maps.SymbolPath.CIRCLE, scale: 8, strokeColor: "#393", }; // Create the polyline and add the symbol to it via the 'icons' property. const line = new google.maps.Polyline({ path: [ { lat: 22.291, lng: 153.027 }, { lat: 18.291, lng: 153.027 }, ], icons: [ { icon: lineSymbol, offset: "100%", }, ], map: map, }); animateCircle(line); } // Use the DOM setInterval() function to change the offset of the symbol // at fixed intervals. function animateCircle(line) { let count = 0; window.setInterval(() => { count = (count + 1) % 200; const icons = line.get("icons"); icons[0].offset = count / 2 + "%"; line.set("icons", icons); }, 20); } window.initMap = initMap;