สัญลักษณ์ (ไอคอนแบบเวกเตอร์)

1. บทนำ
2. คุณสมบัติของสัญลักษณ์
3. สัญลักษณ์ที่กำหนดไว้ล่วงหน้า
4. เพิ่มสัญลักษณ์ลงในเครื่องหมาย
5. เพิ่มสัญลักษณ์ลงในเส้นประกอบ
6. ทำให้สัญลักษณ์เคลื่อนไหว

เกริ่นนำ

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.0
• rotation คือมุมที่ใช้หมุนสัญลักษณ์ ซึ่งแสดงตามเข็มนาฬิกาเป็นองศา โดยค่าเริ่มต้น ตัวทำเครื่องหมายสัญลักษณ์มีการหมุน 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;
index.ts

หมายเหตุ: อ่านคู่มือเกี่ยวกับการใช้ TypeScript และ Google Maps

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;
index.js

หมายเหตุ: JavaScript จะรวบรวมจากข้อมูลโค้ด TypeScript

ดูตัวอย่าง

ลองใช้ตัวอย่าง

JSFiddle.net Google Cloud Shell

เครื่องหมายรองรับการใช้รูปภาพแรสเตอร์และรูปภาพเวกเตอร์ ดูเอกสารประกอบเกี่ยวกับการกำหนดค่าไอคอนเครื่องหมาย

เพิ่มสัญลักษณ์ลงในเส้นประกอบ

หากต้องการแสดงสัญลักษณ์ในโพลีไลน์ ให้ตั้งค่าพร็อพเพอร์ตี้ icons[] ของออบเจ็กต์ PolylineOptions อาร์เรย์ icons[] จะใช้ออบเจ็กต์ IconSequence อย่างน้อย 1 รายการพร้อมด้วยพร็อพเพอร์ตี้ต่อไปนี้

• icon (ต้องระบุ) เป็นสัญลักษณ์ที่จะแสดงในบรรทัด
• offset กำหนดระยะห่างจากจุดเริ่มต้นของเส้น ที่จะแสดงไอคอน ระยะทางนี้อาจแสดงเป็นเปอร์เซ็นต์ของความยาวของเส้น (เช่น "50%") หรือเป็นพิกเซล (เช่น "50 พิกเซล") ค่าเริ่มต้นคือ "100%"
• repeat กำหนดระยะห่างระหว่างไอคอนที่อยู่ติดกันบนเส้น ระยะทางนี้อาจแสดงเป็นเปอร์เซ็นต์ของความยาวของเส้น (เช่น "50%") หรือเป็นพิกเซล (เช่น "50px") หากต้องการปิดใช้การทำซ้ำของไอคอน ให้ระบุ "0" ค่าเริ่มต้นคือ '0'

หมายเหตุ: หากโพลีไลน์เป็นภูมิศาสตร์ (กล่าวคือ หากตั้งค่าพร็อพเพอร์ตี้ geodesic เป็น true) ระยะทางที่ระบุสำหรับทั้ง offset และ repeat จะคำนวณเป็นเมตรโดยค่าเริ่มต้น การตั้งค่า offset หรือ repeat เป็นค่าพิกเซลจะทำให้ระบบคำนวณระยะทางเป็นพิกเซลบนหน้าจอ

การใช้สัญลักษณ์ร่วมกับคลาส 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;
index.ts

หมายเหตุ: อ่านคู่มือเกี่ยวกับการใช้ TypeScript และ Google Maps

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;
index.js

หมายเหตุ: JavaScript จะรวบรวมจากข้อมูลโค้ด TypeScript

ดูตัวอย่าง

ลองใช้ตัวอย่าง

JSFiddle.net Google Cloud Shell