Places UI Kit: ไลบรารีที่พร้อมใช้งานซึ่งช่วยให้นักพัฒนาซอฟต์แวร์ปรับแต่งและควบคุมได้ ลองใช้ดู แล้วแชร์ความคิดเห็นเกี่ยวกับประสบการณ์การใช้ UI Kit

Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

ชั้นข้อมูล

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

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

ภาพรวม

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Data Layer ได้ในวิดีโอ DevBytes นี้

Maps JavaScript API ช่วยให้คุณมาร์กอัปแผนที่ด้วย ภาพซ้อนทับที่หลากหลาย เช่น เครื่องหมาย เส้นหลายเส้น รูปหลายเหลี่ยม ฯลฯ คำอธิบายประกอบแต่ละรายการ จะรวมข้อมูลการจัดรูปแบบกับข้อมูลตำแหน่ง คลาส google.maps.Data เป็นคอนเทนเนอร์สำหรับข้อมูลเชิงพื้นที่ที่กำหนดเอง คุณสามารถใช้ Data Layer เพื่อเพิ่มข้อมูลทางภูมิศาสตร์ที่กำหนดเองลงในแผนที่แทนการเพิ่มภาพซ้อนทับเหล่านี้ได้ หากข้อมูลดังกล่าวมีเรขาคณิต เช่น จุด เส้น หรือรูปหลายเหลี่ยม 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;index.ts

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

โหลด GeoJSON

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

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();index.ts

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

ดูตัวอย่าง

ตัวอย่าง GeoJSON

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

หมายเหตุ: หากต้องการโหลดไฟล์ 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()จะรับ StyleOptions ออบเจ็กต์ลิเทอรัล หรือฟังก์ชันที่คำนวณสไตล์สำหรับแต่ละฟีเจอร์

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

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

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

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

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

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();index.ts

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

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;
}
style.css

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>index.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});

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

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

หากต้องการใช้กฎการจัดรูปแบบพิเศษ ให้ใช้วิธี 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 คุณเพิ่มเครื่องรับเหตุการณ์ เพื่ออนุญาตให้ผู้ใช้โต้ตอบกับข้อมูลบนแผนที่ได้ ในตัวอย่างด้านล่าง เราจะเพิ่มเหตุการณ์เมาส์โอเวอร์ ซึ่งจะแสดงข้อมูลเกี่ยวกับฟีเจอร์ ใต้เคอร์เซอร์ของเมาส์

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

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

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

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

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

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

คุณตั้งค่าสไตล์ของ Data Layer ได้โดยส่งฟังก์ชันที่คำนวณ สไตล์ของฟีเจอร์แต่ละรายการไปยังเมธอด 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();
});