หน้านี้ได้รับการแปลโดย Cloud Translation API

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

บทนำ
คุณสมบัติของสัญลักษณ์
สัญลักษณ์ที่กําหนดไว้ล่วงหน้า
เพิ่มสัญลักษณ์ลงในเครื่องหมาย
เพิ่มสัญลักษณ์ลงในโพลีไลน์
ทําให้สัญลักษณ์เคลื่อนไหว

ข้อมูลเบื้องต้น

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

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

ดูตัวอย่าง

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

JSFiddle.net CodeSandbox.io Google Cloud Shell

เพิ่มสัญลักษณ์ลงในโพลีไลน์

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

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

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

ด้วยการแสดงสัญลักษณ์และคลาส PolylineOptions ร่วมกัน คุณจึงควบคุม Polylines จํานวนมากบนแผนที่ได้ ตัวอย่างการกําหนดค่าที่คุณสามารถนําไปใช้ได้มีดังนี้

ลูกศร

ใช้พร็อพเพอร์ตี้ 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

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

ดูตัวอย่าง

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

JSFiddle.net CodeSandbox.io Google Cloud Shell