ชั้นข้อมูล

เลือกแพลตฟอร์ม: Android iOS JavaScript

ชั้นข้อมูล Google Maps มีคอนเทนเนอร์สำหรับข้อมูลเชิงพื้นที่ที่กำหนดเอง คุณสามารถใช้ชั้นข้อมูลเพื่อจัดเก็บข้อมูลที่กำหนดเอง หรือเพื่อแสดงข้อมูล GeoJSON ใน Google Maps

ภาพรวม

ดูวิดีโอ DevBytes นี้เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับชั้นข้อมูล

Maps JavaScript API ช่วยให้คุณทำเครื่องหมายบนแผนที่ด้วยการวางซ้อนที่หลากหลาย เช่น เครื่องหมาย เส้นประกอบ รูปหลายเหลี่ยม ฯลฯ โดยคำอธิบายประกอบแต่ละรายการจะรวมข้อมูลการจัดรูปแบบเข้ากับข้อมูลตำแหน่ง คลาส google.maps.Data เป็นคอนเทนเนอร์สำหรับข้อมูลเชิงพื้นที่ที่กำหนดเอง คุณสามารถใช้ชั้นข้อมูลเพื่อเพิ่มข้อมูลทางภูมิศาสตร์ที่กำหนดเองลงในแผนที่แทนการเพิ่มการวางซ้อนเหล่านี้ได้ หากข้อมูลดังกล่าวมีเรขาคณิต เช่น จุด เส้น หรือรูปหลายเหลี่ยม API จะแสดงผลข้อมูลเหล่านี้เป็นเครื่องหมาย เส้นประกอบ และรูปหลายเหลี่ยมโดยค่าเริ่มต้น คุณสามารถจัดสไตล์ฟีเจอร์เหล่านี้ได้เหมือนกับการวางซ้อนปกติ หรือใช้กฎการจัดสไตล์ตามพร็อพเพอร์ตี้อื่นๆ ที่มีอยู่ในชุดข้อมูล

คลาส google.maps.Data ช่วยให้คุณทำสิ่งต่อไปนี้ได้

  • วาดรูปหลายเหลี่ยมบนแผนที่
  • เพิ่มข้อมูล GeoJSON ลงในแผนที่
    GeoJSON เป็นมาตรฐานสำหรับข้อมูลเชิงพื้นที่บนอินเทอร์เน็ต คลาส Data เป็นไปตามโครงสร้างของ GeoJSON ในการแสดงข้อมูลและช่วยให้แสดงข้อมูล GeoJSON ได้ง่าย ใช้เมธอด loadGeoJson() เพื่อนำเข้าข้อมูล GeoJSON และแสดงจุด เส้นสตริง และรูปหลายเหลี่ยมได้อย่างง่ายดาย
  • ใช้ google.maps.Data เพื่อจำลองข้อมูลที่กำหนดเอง
    เอนทิตีในชีวิตจริงส่วนใหญ่มีพร็อพเพอร์ตี้อื่นๆ ที่เชื่อมโยงอยู่ด้วย เช่น ร้านค้ามีเวลาทำการ ถนนมีความเร็วในการจราจร และคณะลูกเสือหญิงแต่ละคณะมีพื้นที่ขายคุกกี้ google.maps.Data ช่วยให้คุณจำลองพร็อพเพอร์ตี้เหล่านี้และจัดรูปแบบข้อมูลตามนั้นได้
  • เลือกวิธีแสดงข้อมูล และเปลี่ยนใจได้ทันที
    ชั้นข้อมูลช่วยให้คุณตัดสินใจเกี่ยวกับการแสดงข้อมูลผ่านภาพและ การโต้ตอบของข้อมูลได้ เช่น เมื่อดูแผนที่ของร้านสะดวกซื้อ คุณอาจเลือกแสดงเฉพาะร้านที่ขายตั๋วโดยสาร

วาดรูปหลายเหลี่ยม

คลาส Data.Polygon จะจัดการการหมุนรูปหลายเหลี่ยมให้คุณ คุณสามารถส่งอาร์เรย์ของวงแหวนเชิงเส้นอย่างน้อย 1 วงซึ่งกำหนดเป็นพิกัดละติจูด/ลองจิจูดได้ วงแหวนเชิงเส้นแรกจะกำหนดขอบเขตด้านนอกของรูปหลายเหลี่ยม หากคุณส่งผ่านวงแหวนเชิงเส้นมากกว่า 1 วง ระบบจะใช้วงแหวนเชิงเส้นวงที่ 2 และวงถัดไปเพื่อกำหนดเส้นทางด้านใน (รู) ในรูปหลายเหลี่ยม

ตัวอย่างต่อไปนี้จะสร้างรูปหลายเหลี่ยมสี่เหลี่ยมผืนผ้าที่มีรู 2 รู

TypeScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: -33.872, lng: 151.252 },
    }
  );

  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];

  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];

  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: -33.872, lng: 151.252 },
  });
  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];
  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

window.initMap = initMap;

โหลด GeoJSON

GeoJSON เป็นมาตรฐานทั่วไปสำหรับการแชร์ข้อมูลเชิงพื้นที่บนอินเทอร์เน็ต ซึ่งมีขนาดเล็กและที่มนุษย์อ่านได้ง่าย จึงเหมาะอย่างยิ่งสำหรับการแชร์และการทำงานร่วมกัน ชั้นข้อมูลช่วยให้คุณเพิ่มข้อมูล GeoJSON ลงใน Google Maps ได้ด้วยโค้ดเพียงบรรทัดเดียว

map.data.loadGeoJson('google.json');

แผนที่ทุกแผนที่มีออบเจ็กต์ map.data ซึ่งทำหน้าที่เป็นชั้นข้อมูลสำหรับข้อมูลเชิงพื้นที่ที่กำหนดเอง รวมถึง GeoJSON คุณโหลดและแสดงไฟล์ GeoJSON ได้โดยเรียกใช้เมธอด loadGeoJSON() ของออบเจ็กต์ data ตัวอย่างด้านล่างแสดงวิธีเพิ่มแผนที่และโหลดข้อมูล GeoJSON ภายนอก

TypeScript

async function init() {
    await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map')!;

    const innerMap = mapElement.innerMap;

    innerMap.data.loadGeoJson('google.json');
}

void init();

JavaScript

async function init() {
    await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map');

    const innerMap = mapElement.innerMap;

    innerMap.data.loadGeoJson('google.json');
}

void init();
ดูตัวอย่าง

คำนวณพื้นที่แปลงที่ดินและการรวมจุดในรูปหลายเหลี่ยมในฟีเจอร์ GeoJSON

หากต้องการโหลด GeoJSON FeatureCollection ในหน่วยความจำ (เช่น ที่ดิน GIS, เขตที่ดิน หรือขอบเขตเขตแดน) โดยไม่ต้องดึงข้อมูล URL ภายนอก ให้เรียกใช้ map.data.addGeoJson(geojsonObject)

หมายเหตุเกี่ยวกับขอบเขต (Data.Polygon เทียบกับ google.maps.geometry): ฟังก์ชันในไลบรารี geometry เช่น google.maps.geometry.spherical.computeArea() และ google.maps.geometry.poly.containsLocation() จะไม่ยอมรับออบเจ็กต์ google.maps.Data.Feature หรือ google.maps.Data.Polygon โดยตรง หากต้องการคำนวณพื้นที่เป็นตารางเมตรหรือตรวจสอบว่าพิกัดอยู่ภายในรูปหลายเหลี่ยม GeoJSON หรือไม่ ให้ดึงข้อมูลอาร์เรย์ LatLng ของวงแหวนรอบนอกด้วย feature.getGeometry().getAt(0).getArray() ก่อน ดังนี้

const { spherical, poly } = await google.maps.importLibrary("geometry");

map.data.forEach((feature) => {
  const geom = feature.getGeometry();
  if (geom.getType() === "Polygon") {
    const outerRingCoords = geom.getAt(0).getArray(); // Array<google.maps.LatLng>
    const areaSqMeters = spherical.computeArea(outerRingCoords);
    const isInside = poly.containsLocation(pointLatLng, new google.maps.Polygon({ paths: outerRingCoords }));
  }
});

ตัวอย่าง GeoJSON

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

หมายเหตุ: หากต้องการโหลดไฟล์ JSON จากโดเมนอื่น โดเมนนั้นต้องเปิดใช้การแชร์ทรัพยากรแบบข้ามต้นทาง

คุณดูข้อความทั้งหมดของไฟล์ได้ที่ด้านล่างโดยขยายลูกศรเล็กๆ ข้างคำว่า google.json

google.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

จัดรูปแบบข้อมูล GeoJSON

ใช้เมธอด Data.setStyle() เพื่อระบุลักษณะที่ข้อมูลควรเป็น เมธอด setStyle() จะใช้ Object Literal StyleOptions หรือฟังก์ชันที่คำนวณสไตล์สำหรับแต่ละฟีเจอร์

กฎของรูปแบบเรียบง่าย

วิธีที่ง่ายที่สุดในการจัดสไตล์ฟีเจอร์คือการส่งออบเจ็กต์นิยามคู่ StyleOptions ไปยัง setStyle() ซึ่งจะเป็นการตั้งค่ารูปแบบเดียวสำหรับแต่ละฟีเจอร์ในคอลเล็กชัน โปรดทราบว่าฟีเจอร์แต่ละประเภทจะแสดงผลได้เฉพาะชุดย่อยของตัวเลือกที่ใช้ได้เท่านั้น ซึ่งหมายความว่าคุณสามารถรวมสไตล์สำหรับฟีเจอร์ประเภทต่างๆ ไว้ในออบเจ็กต์นิยามคู่เดียวได้ ตัวอย่างเช่น ข้อมูลโค้ดด้านล่างจะตั้งค่าทั้ง icon ที่กำหนดเองซึ่งส่งผลต่อเรขาคณิตของจุดเท่านั้น และ fillColor ซึ่งส่งผลต่อรูปหลายเหลี่ยมเท่านั้น

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

ดูข้อมูลเพิ่มเติมเกี่ยวกับชุดค่าผสมของสไตล์/ฟีเจอร์ที่ถูกต้องได้ในตัวเลือกสไตล์

ด้านล่างนี้เป็นตัวอย่างการตั้งค่าสีเส้นและสีเติมสำหรับฟีเจอร์หลายรายการโดยใช้ StyleOptions Object Literal สังเกตว่ารูปหลายเหลี่ยมแต่ละรูปมีสไตล์เหมือนกัน

TypeScript

async function init() {
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    const mapElement = document.querySelector('gmp-map')!;

    const innerMap = mapElement.innerMap;

    // Load GeoJSON.
    event.addListenerOnce(innerMap, 'idle', () => {
        innerMap.data.loadGeoJson('google.json');
    });

    // Set the stroke width, and fill color for each polygon
    innerMap.data.setStyle({
        fillColor: 'green',
        strokeWeight: 1,
    });
}

void init();

JavaScript

async function init() {
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    const mapElement = document.querySelector('gmp-map');

    const innerMap = mapElement.innerMap;

    // Load GeoJSON.
    event.addListenerOnce(innerMap, 'idle', () => {
        innerMap.data.loadGeoJson('google.json');
    });

    // Set the stroke width, and fill color for each polygon
    innerMap.data.setStyle({
        fillColor: 'green',
        strokeWeight: 1,
    });
}

void init();

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

HTML

<html>
    <head>
        <title>Data Layer: Styling</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map center="-28,137" zoom="4"></gmp-map>
    </body>
</html>
ดูตัวอย่าง

กฎรูปแบบการประกาศ

หากต้องการอัปเดตรูปแบบของภาพซ้อนทับจำนวนมาก เช่น เครื่องหมายหรือเส้นประกอบ โดยปกติแล้วคุณจะต้องทำซ้ำภาพซ้อนทับแต่ละรายการบนแผนที่และตั้งค่ารูปแบบทีละรายการ เมื่อใช้ชั้นข้อมูล คุณจะตั้งกฎแบบประกาศได้ และระบบจะนำกฎเหล่านั้นไปใช้กับชุดข้อมูลทั้งหมด เมื่อมีการอัปเดตข้อมูลหรือกฎ ระบบจะใช้การจัดรูปแบบกับฟีเจอร์ทุกรายการโดยอัตโนมัติ คุณใช้พร็อพเพอร์ตี้ของฟีเจอร์เพื่อปรับแต่งสไตล์ได้

ตัวอย่างเช่น โค้ดด้านล่างจะกำหนดสีของอักขระแต่ละตัวใน google.json โดยตรวจสอบตำแหน่งในชุดอักขระ ASCII ในกรณีนี้ เราได้เข้ารหัสตำแหน่งอักขระพร้อมกับข้อมูลของเรา

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

นำรูปแบบออก

หากต้องการนำสไตล์ที่ใช้ออก ให้ส่งออบเจ็กต์นิยามคู่ที่ว่างเปล่าไปยังเมธอด setStyles()

// Remove custom styles.
map.data.setStyle({});

การดำเนินการนี้จะนำรูปแบบที่กำหนดเองที่คุณระบุไว้ออก และฟีเจอร์จะแสดงผลโดยใช้รูปแบบเริ่มต้น หากต้องการไม่แสดงฟีเจอร์อีกต่อไป ให้ตั้งค่าพร็อพเพอร์ตี้ visible ของ StyleOptions เป็น false

// Hide the Data layer.
map.data.setStyle({visible: false});

ลบล้างรูปแบบเริ่มต้น

โดยปกติแล้ว กฎการจัดรูปแบบจะใช้กับฟีเจอร์ทุกรายการในชั้นข้อมูล อย่างไรก็ตาม มีบางครั้งที่คุณอาจต้องการใช้กฎการจัดรูปแบบพิเศษกับฟีเจอร์ที่เฉพาะเจาะจง เช่น เพื่อไฮไลต์ฟีเจอร์เมื่อมีการคลิก

หากต้องการใช้กฎการจัดรูปแบบพิเศษ ให้ใช้เมธอด overrideStyle() พร็อพเพอร์ตี้ใดๆ ที่คุณเปลี่ยนแปลงด้วยเมธอด overrideStyle() จะมีผลนอกเหนือจากสไตล์ส่วนกลางที่ระบุไว้แล้วใน setStyle() ตัวอย่างเช่น โค้ดด้านล่างจะเปลี่ยนสีเติมของรูปหลายเหลี่ยมเมื่อคลิก แต่จะไม่ตั้งค่ารูปแบบอื่นๆ

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

เรียกใช้เมธอด revertStyle() เพื่อนำการลบล้างสไตล์ทั้งหมดออก

ตัวเลือกสไตล์

ตัวเลือกที่มีให้สำหรับการจัดรูปแบบแต่ละฟีเจอร์จะขึ้นอยู่กับประเภทฟีเจอร์ ตัวอย่างเช่น fillColor จะแสดงผลเฉพาะในเรขาคณิตรูปหลายเหลี่ยม ส่วน icon จะปรากฏเฉพาะในเรขาคณิตจุดเท่านั้น ดูข้อมูลเพิ่มเติมได้ในเอกสารอ้างอิงสำหรับ StyleOptions

ใช้ได้กับเรขาคณิตทั้งหมด

  • clickable: หากเป็น true ฟีเจอร์จะรับการโต้ตอบด้วยเมาส์และการโต้ตอบแบบสัมผัส
  • visible: หาก true ฟีเจอร์จะปรากฏขึ้น
  • zIndex: ฟีเจอร์ทั้งหมดจะแสดงบนแผนที่ตามลำดับzIndex โดยค่าที่สูงกว่าจะแสดงอยู่ด้านหน้าฟีเจอร์ที่มีค่าต่ำกว่า เครื่องหมายจะแสดงอยู่ด้านหน้าสตริงเส้นและรูปหลายเหลี่ยมเสมอ

ใช้ได้กับเรขาคณิตแบบจุด

  • cursor: เคอร์เซอร์เมาส์ที่จะแสดงเมื่อวางเมาส์เหนือองค์ประกอบ
  • icon: ไอคอนที่จะแสดงสำหรับเรขาคณิตของจุด
  • shape: กำหนดแผนที่รูปภาพที่ใช้สำหรับการตรวจจับการคลิก
  • title: ข้อความเมื่อวางเมาส์เหนือ

ใช้ได้กับเรขาคณิตแบบเส้น

  • strokeColor: สีเส้น ระบบรองรับสี CSS3 ทั้งหมด ยกเว้นสีที่มีชื่อแบบขยาย
  • strokeOpacity: ความทึบแสงของเส้นขอบระหว่าง 0.0 ถึง 1.0
  • strokeWeight: ความกว้างของเส้นขอบเป็นพิกเซล

ใช้ได้กับเรขาคณิตรูปหลายเหลี่ยม

  • fillColor: สีเติม ระบบรองรับสี CSS3 ทั้งหมด ยกเว้นสีที่มีชื่อแบบขยาย
  • fillOpacity: ความทึบของสีเติมระหว่าง 0.0 ถึง 1.0.
  • strokeColor: สีเส้น ระบบรองรับสี CSS3 ทั้งหมด ยกเว้นสีที่มีชื่อแบบขยาย
  • strokeOpacity: ความทึบแสงของเส้นขอบระหว่าง 0.0 ถึง 1.0
  • strokeWeight: ความกว้างของเส้นขอบเป็นพิกเซล

เพิ่มเครื่องจัดการเหตุการณ์

ฟีเจอร์จะตอบสนองต่อเหตุการณ์ต่างๆ เช่น mouseup หรือ mousedown คุณสามารถเพิ่ม Listener เหตุการณ์เพื่อให้ผู้ใช้โต้ตอบกับข้อมูลบนแผนที่ได้ ในตัวอย่างด้านล่าง เราเพิ่มเหตุการณ์เมาส์โอเวอร์ ซึ่งจะแสดงข้อมูลเกี่ยวกับฟีเจอร์ใต้เคอร์เซอร์เมาส์

// Set mouseover event for each feature.
innerMap.data.addListener('mouseover', (event) => {
    document.getElementById('info-box').textContent =
        event.feature.getProperty('letter');
});

เหตุการณ์ชั้นข้อมูล

เหตุการณ์ต่อไปนี้เป็นเหตุการณ์ที่พบได้ทั่วไปในฟีเจอร์ทั้งหมด ไม่ว่าจะมีประเภทเรขาคณิตใดก็ตาม

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

ดูข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์เหล่านี้ได้ในเอกสารอ้างอิงสำหรับคลาส google.maps.data

เปลี่ยนลักษณะที่ปรากฏแบบไดนามิก

คุณสามารถกำหนดรูปแบบของชั้นข้อมูลได้โดยส่งฟังก์ชันที่คำนวณรูปแบบของแต่ละฟีเจอร์ไปยังเมธอด google.maps.data.setStyle() ระบบจะเรียกใช้ฟังก์ชันนี้ทุกครั้งที่มีการอัปเดตพร็อพเพอร์ตี้ของฟีเจอร์

ในตัวอย่างด้านล่าง เราจะเพิ่ม Listener เหตุการณ์สำหรับเหตุการณ์ click ที่อัปเดตพร็อพเพอร์ตี้ isColorful ของฟีเจอร์ การจัดรูปแบบฟีเจอร์จะได้รับการอัปเดตเพื่อแสดงการเปลี่ยนแปลงทันทีที่มีการตั้งค่าพร็อพเพอร์ตี้

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {!google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});