ชั้นข้อมูล Google Maps เป็นที่เก็บข้อมูลเชิงพื้นที่ที่กำหนดเอง คุณสามารถใช้ชั้นข้อมูลเพื่อจัดเก็บข้อมูลที่กำหนดเองหรือเพื่อแสดง GeoJSON ข้อมูลบนแผนที่ Google
ภาพรวม
ดูวิดีโอ 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
จะจัดการกับการขดรูปหลายเหลี่ยมให้ก็ได้ คุณสามารถส่งต่ออาร์เรย์
วงแหวนเชิงเส้น หมายถึงพิกัดละติจูด/ลองจิจูด ริงเส้นแรก
กำหนดขอบเขตด้านนอกของรูปหลายเหลี่ยม หากคุณส่งวิดีโอเชิงเส้นมากกว่าหนึ่งรายการ
วงแหวน วงแหวนวงที่ 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 ด้วยโค้ดเพียงบรรทัดเดียว
map.data.loadGeoJson('google.json');
ทุกแผนที่จะมีmap.data
ซึ่งทำหน้าที่เป็นชั้นข้อมูลสำหรับข้อมูลเชิงพื้นที่ที่กำหนดเอง ซึ่งรวมถึง
GeoJSON คุณสามารถโหลดและแสดงไฟล์ GeoJSON โดยเรียกใช้ loadGeoJSON()
ของออบเจ็กต์ data
ตัวอย่างด้านล่างแสดงวิธีเพิ่มแผนที่และโหลด
ข้อมูล GeoJSON ภายนอก
TypeScript
let map: google.maps.Map; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { zoom: 4, center: { lat: -28, lng: 137 }, }); // NOTE: This uses cross-domain XHR, and may not work on older browsers. map.data.loadGeoJson( "https://storage.googleapis.com/mapsdevsite/json/google.json" ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: -28, lng: 137 }, }); // NOTE: This uses cross-domain XHR, and may not work on older browsers. map.data.loadGeoJson( "https://storage.googleapis.com/mapsdevsite/json/google.json", ); } window.initMap = initMap;
ลองใช้ตัวอย่าง
ตัวอย่าง 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()
จะใช้
วันที่ StyleOptions
ออบเจ็กต์ลิเทอรัล หรือฟังก์ชันที่คำนวณรูปแบบสำหรับแต่ละจุดสนใจ
กฎรูปแบบอย่างง่าย
วิธีที่ง่ายที่สุดในการจัดรูปแบบฟีเจอร์คือการส่งผ่านแอตทริบิวต์ลิเทอรัลของออบเจ็กต์ StyleOptions
ไปยัง setStyle()
ซึ่งจะตั้งค่ารูปแบบเดียวสำหรับแต่ละฟีเจอร์ใน
คอลเล็กชัน โปรดทราบว่าฟีเจอร์แต่ละประเภทสามารถแสดงผล
ตัวเลือกที่มีให้เลือก ซึ่งหมายความว่าสามารถรวมสไตล์สำหรับ
ประเภทใหม่ใน Object Literal ประเภทเดียว เช่น ชุดข้อมูลโค้ดด้านล่าง
ทั้ง icon
ที่กำหนดเอง ซึ่งจะมีผลกับเรขาคณิตของจุดเท่านั้นและ fillColor
ซึ่งจะมีผลกับรูปหลายเหลี่ยมเท่านั้น
map.data.setStyle({ icon: '//example.com/path/to/image.png', fillColor: 'green' });
ดูข้อมูลเพิ่มเติมเกี่ยวกับชุดค่าผสมของสไตล์/ฟีเจอร์ที่ถูกต้องได้ในรูปแบบ ตัวเลือก
ด้านล่างเป็นตัวอย่างการตั้งค่าเส้นโครงร่างและสีเติมสำหรับหลายๆ ฟีเจอร์
โดยใช้ Object Literal ของ StyleOptions
โปรดสังเกตว่ารูปหลายเหลี่ยมแต่ละรูปมีการจัดรูปแบบองค์ประกอบ
เดียวกัน
// Set the stroke width, and fill color for each polygon map.data.setStyle({ fillColor: 'green', strokeWeight: 1 });
กฎรูปแบบการประกาศ
ถ้าคุณต้องการอัปเดตรูปแบบของการวางซ้อนจำนวนมาก เช่น เครื่องหมาย หรือเส้นประกอบสองเส้น โดยปกติคุณจะต้องวนซ้ำแต่ละการวางซ้อนบนแผนที่ และตั้งสไตล์แยกกัน ชั้นข้อมูลช่วยให้คุณตั้งกฎ อย่างชัดเจน และจะนำไปใช้กับชุดข้อมูลทั้งหมด เมื่อทำอย่างใดอย่างหนึ่ง เมื่อมีการอัปเดตข้อมูลหรือกฎ ระบบจะใช้การจัดรูปแบบโดยอัตโนมัติ กับทุกฟีเจอร์ คุณสามารถใช้คุณสมบัติของฟีเจอร์เพื่อปรับแต่งรูปแบบได้
ตัวอย่างเช่น โค้ดด้านล่างจะกำหนดสีของอักขระแต่ละตัวใน
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
: กำหนดการแมปรูปภาพที่ใช้สำหรับการตรวจหา Hittitle
: ข้อความเมื่อวางเมาส์
พร้อมใช้งานสำหรับเรขาคณิตของเส้น
strokeColor
: สีของเส้นโครงร่าง รองรับสี CSS3 ทั้งหมดยกเว้น สีที่มีชื่อแบบขยายstrokeOpacity
: ความทึบแสงของเส้นโครงร่างระหว่าง 0.0 ถึง 1.0strokeWeight
: ความกว้างของเส้นโครงร่าง หน่วยเป็นพิกเซล
ใช้ได้กับเรขาคณิตของรูปหลายเหลี่ยม
fillColor
: สีเติม รองรับสี CSS3 ทั้งหมดยกเว้น สีที่มีชื่อแบบขยายfillOpacity
: ความทึบแสงของการเติมสีระหว่าง0.0
ถึง1.0.
strokeColor
: สีของเส้นโครงร่าง รองรับสี CSS3 ทั้งหมดยกเว้น สีที่มีชื่อแบบขยายstrokeOpacity
: ความทึบแสงของเส้นโครงร่างระหว่าง 0.0 ถึง 1.0strokeWeight
: ความกว้างของเส้นโครงร่าง หน่วยเป็นพิกเซล
เพิ่มเครื่องจัดการกิจกรรม
ฟีเจอร์ตอบสนองต่อเหตุการณ์ เช่น mouseup
หรือ mousedown
คุณสามารถเพิ่มกิจกรรม
Listener เพื่อให้ผู้ใช้โต้ตอบกับข้อมูลบนแผนที่ได้ ในด้านล่าง
เช่น เราเพิ่มเหตุการณ์เมาส์โอเวอร์
ที่แสดงข้อมูลเกี่ยวกับคุณลักษณะนั้น
ใต้เคอร์เซอร์ของเมาส์
// Set mouseover event for each feature. map.data.addListener('mouseover', function(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(); });