การปรับแต่งเครื่องหมายพื้นฐาน

เลือกแพลตฟอร์ม แอนดรอยด์ iOS JavaScript

เครื่องหมายขั้นสูงใช้ 2 คลาสในการกําหนดเครื่องหมาย ได้แก่ คลาส AdvancedMarkerElement มีพารามิเตอร์พื้นฐาน (position, title และ map) และคลาส PinElement มีตัวเลือกสําหรับการปรับแต่งเพิ่มเติม ข้อมูลโค้ดต่อไปนี้แสดงโค้ดในการสร้าง PinElement ใหม่ แล้วนำไปใช้กับเครื่องหมาย

// Create a pin element.
const pin = new PinElement({
    scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pin.element,
});

ในแผนที่ที่สร้างขึ้นโดยใช้ HTML ระบบจะประกาศพารามิเตอร์พื้นฐานสำหรับเครื่องหมายโดยใช้ องค์ประกอบ HTML gmp-advanced-marker การปรับแต่งใดๆ ที่ใช้ ต้องใช้คลาส PinElement แบบเป็นโปรแกรม ในการดำเนินการนี้ โค้ดของคุณต้อง เรียกองค์ประกอบ gmp-advanced-marker จากหน้า HTML ข้อมูลโค้ดต่อไปนี้แสดงโค้ดสำหรับค้นหาคอลเล็กชันองค์ประกอบ gmp-advanced-marker จากนั้นวนดูผลลัพธ์เพื่อใช้การปรับแต่งที่ประกาศไว้ใน PinElement

// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];

// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  marker.appendChild(pin.element);
}

หน้านี้จะแสดงวิธีปรับแต่งเครื่องหมายดังต่อไปนี้

ส่วนต่างๆ ของเครื่องหมายขั้นสูง
รูปที่ 1: ส่วนต่างๆ ของเครื่องหมายขั้นสูง

เพิ่มข้อความชื่อ

ข้อความชื่อจะปรากฏขึ้นเมื่อเคอร์เซอร์วางอยู่เหนือเครื่องหมาย โปรแกรมอ่านหน้าจออ่านข้อความชื่อได้

หากต้องการเพิ่มข้อความชื่อแบบเป็นโปรแกรม ให้ใช้ตัวเลือก AdvancedMarkerElement.title ดังนี้

// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.03 },
  title: "Title text for the marker at lat: 37.419, lng: -122.03",
});
index.js

หากต้องการเพิ่มข้อความชื่อลงในเครื่องหมายที่สร้างขึ้นโดยใช้ HTML ให้ใช้แอตทริบิวต์ title ดังนี้

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

ปรับขนาดเครื่องหมาย

หากต้องการปรับขนาดเครื่องหมาย ให้ใช้ตัวเลือก scale

TypeScript

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pinScaled.element,
});
index.ts

JavaScript

// Adjust the scale.
const pinScaled = new PinElement({
  scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
  content: pinScaled.element,
});
index.js

เปลี่ยนสีพื้นหลัง

ใช้ตัวเลือก PinElement.background เพื่อเปลี่ยนสีพื้นหลังของเครื่องหมาย

TypeScript

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerViewBackground = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.01 },
    content: pinBackground.element,
});
index.ts

JavaScript

// Change the background color.
const pinBackground = new PinElement({
  background: "#FBBC04",
});
const markerViewBackground = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
  content: pinBackground.element,
});
index.js

เปลี่ยนสีเส้นขอบ

ใช้ตัวเลือก PinElement.borderColor เพื่อเปลี่ยนสีเส้นขอบของ เครื่องหมาย:

TypeScript

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.035 },
    content: pinBorder.element,
});
index.ts

JavaScript

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerViewBorder = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.035 },
  content: pinBorder.element,
});
index.js

เปลี่ยนสีรูปอักขระ

ใช้ตัวเลือก PinElement.glyphColor เพื่อเปลี่ยนสีรูปอักขระของเครื่องหมาย

TypeScript

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.025 },
    content: pinGlyph.element,
});
index.ts

JavaScript

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerViewGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.025 },
  content: pinGlyph.element,
});
index.js

เพิ่มข้อความลงในสัญลักษณ์

ใช้ตัวเลือก PinElement.glyph เพื่อแทนที่สัญลักษณ์เริ่มต้นด้วยอักขระข้อความ สัญลักษณ์ข้อความของ PinElement จะปรับขนาดตาม PinElement และสีเริ่มต้นจะตรงกับ glyphColor เริ่มต้นของ PinElement

TypeScript

const pinTextGlyph = new PinElement({
    glyph: 'T',
    glyphColor: 'white',
});
const markerViewGlyphText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.015 },
    content: pinTextGlyph.element,
});
index.ts

JavaScript

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerViewGlyphText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
  content: pinTextGlyph.element,
});
index.js

ซ่อนรูปอักขระ

ตั้งค่าตัวเลือก PinElement.glyph เป็นสตริงว่างเพื่อซ่อนสัญลักษณ์ของเครื่องหมาย

TypeScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyph: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.005 },
    content: pinNoGlyph.element,
});
index.ts

JavaScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
  glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.005 },
  content: pinNoGlyph.element,
});
index.js

หรือตั้งค่า PinElement.glyphColor เป็นค่าเดียวกับ PinElement.background ซึ่งจะส่งผลต่อการซ่อนการแสดงภาพสัญลักษณ์

ขั้นตอนถัดไป