ชั้นข้อมูล 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 ได้โดยใช้โค้ดเพียงบรรทัดเดียว
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() ซึ่งจะตั้งค่ารูปแบบเดียวสำหรับแต่ละฟีเจอร์ในคอลเล็กชันของคุณ โปรดทราบว่าฟีเจอร์แต่ละประเภทจะแสดงผลตัวเลือกที่ใช้ได้เพียงบางส่วนเท่านั้น ซึ่งหมายความว่าคุณสามารถรวมสไตล์สำหรับฟีเจอร์ประเภทต่างๆ ไว้ในลิเทอรัลออบเจ็กต์เดียวได้ ตัวอย่างเช่น ข้อมูลโค้ดด้านล่างจะตั้งค่าทั้ง 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 คุณสามารถเพิ่มตัวฟังเหตุการณ์
เพื่อให้ผู้ใช้โต้ตอบกับข้อมูลบนแผนที่ได้ ในตัวอย่างด้านล่าง เราเพิ่มเหตุการณ์เมาส์โอเวอร์ที่แสดงข้อมูลเกี่ยวกับฟีเจอร์ใต้เคอร์เซอร์ของเมาส์
// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
document.getElementById('info-box').textContent =
event.feature.getProperty('letter');
});
เหตุการณ์ชั้นข้อมูล
เหตุการณ์ต่อไปนี้มีอยู่ในจุดสนใจทั้งหมด โดยไม่คำนึงถึงประเภทเรขาคณิต
addfeatureclickdblclickmousedownmouseoutmouseovermouseupremovefeatureremovepropertyrightclicksetgeometrysetproperty
ดูข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์เหล่านี้ได้ในเอกสารประกอบอ้างอิงสำหรับคลาส 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();
});