ภาพรวม
หากต้องการจัดรูปแบบการเติมและเส้นสำหรับรูปหลายเหลี่ยมขอบเขต ให้ใช้ FeatureStyleOptions
เพื่อกำหนดแอตทริบิวต์รูปแบบ และตั้งค่าพร็อพเพอร์ตี้ style
ในเลเยอร์ฟีเจอร์เป็น
google.maps.FeatureStyleFunction
ซึ่งมีตรรกะการจัดรูปแบบ
ตัวอย่างต่อไปนี้แผนที่แสดงให้เห็นการไฮไลต์รูปหลายเหลี่ยมขอบเขตสำหรับ ภูมิภาคเดียว
ใช้รูปแบบกับลักษณะขอบเขตโดยการตั้งค่าพร็อพเพอร์ตี้ style
เป็น
google.maps.FeatureStyleFunction
ซึ่งมีตรรกะการจัดรูปแบบได้ สไตล์
จะทำงานในทุกฟีเจอร์ในเลเยอร์ฟีเจอร์ที่ได้รับผลกระทบ และ
ในเวลาที่คุณกำหนดคุณสมบัติของรูปแบบ หากต้องการอัปเดต คุณต้องตั้งค่ารูปแบบ
อีกครั้ง
หากต้องการจัดรูปแบบฟีเจอร์ทั้งหมดสำหรับเลเยอร์ฟีเจอร์อย่างเท่าเทียมกัน ให้ตั้งค่าพร็อพเพอร์ตี้ style
เป็น
google.maps.FeatureStyleOptions
ในกรณีนี้ คุณไม่จำเป็นต้องใช้
ฟังก์ชันรูปแบบฟีเจอร์ เนื่องจากไม่จำเป็นต้องใช้ตรรกะ
ฟังก์ชันรูปแบบควรแสดงผลลัพธ์ที่สอดคล้องกันเสมอเมื่อนำไปใช้ เหนือฟีเจอร์ เช่น หากต้องการสุ่มสีชุดฟีเจอร์ ส่วนแบบสุ่มไม่ควรอยู่ในฟังก์ชันลักษณะของฟีเจอร์ จะทำให้เกิดผลลัพธ์ที่ไม่ตั้งใจ
เนื่องจากฟังก์ชันนี้จะทำงานทับทุกฟีเจอร์ในเลเยอร์ การเพิ่มประสิทธิภาพจึง เป็นอย่างมาก หากต้องการหลีกเลี่ยงไม่ให้ส่งผลต่อเวลาในการแสดงผล ให้ทำดังนี้
- เปิดใช้เฉพาะเลเยอร์ที่คุณต้องการ
- ตั้งค่า
style
เป็นnull
เมื่อเลเยอร์ไม่มีการใช้งานแล้ว
หากต้องการจัดรูปแบบรูปหลายเหลี่ยมในเลเยอร์คุณลักษณะของย่าน ให้ทำตามขั้นตอนต่อไปนี้
- ทำตามขั้นตอนในเริ่มต้นใช้งาน หากยังไม่ได้ทำ เพื่อสร้างรหัสแผนที่และรูปแบบแผนที่ใหม่ อย่าลืมเปิดใช้ย่าน ของฟีเจอร์
รับการอ้างอิงถึงเลเยอร์คุณลักษณะของย่านเมื่อแผนที่เริ่มต้น
featureLayer = map.getFeatureLayer("LOCALITY");
สร้างการกำหนดสไตล์ของประเภท
google.maps.FeatureStyleFunction
ตั้งค่าพร็อพเพอร์ตี้
style
ในเลเยอร์ฟีเจอร์เป็นFeatureStyleFunction
ตัวอย่างต่อไปนี้แสดงการกำหนดฟังก์ชันที่จะใช้รูปแบบเฉพาะกับgoogle.maps.Feature
ที่มีรหัสสถานที่ที่ตรงกัน:TypeScript
// Define a style with purple fill and border. //@ts-ignore const featureStyleOptions: google.maps.FeatureStyleOptions = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: '#810FCB', fillOpacity: 0.5 }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options: { feature: { placeId: string; }; }) => { if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI return featureStyleOptions; } };
JavaScript
// Define a style with purple fill and border. //@ts-ignore const featureStyleOptions = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: "#810FCB", fillOpacity: 0.5, }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options) => { if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") { // Hana, HI return featureStyleOptions; } };
หากไม่พบรหัสสถานที่ที่ระบุ หรือไม่พบ
ตรงกับประเภทสถานที่ที่เลือกไว้ รูปแบบจะไม่มีผล ตัวอย่างเช่น
กำลังพยายามจัดรูปแบบเลเยอร์ POSTAL_CODE
ที่ตรงกับรหัสสถานที่สำหรับ "นิวยอร์ก"
เมือง" จะทำให้ไม่มีการใช้รูปแบบ
นำการจัดรูปแบบออกจากเลเยอร์
หากต้องการนำการจัดรูปแบบออกจากเลเยอร์ ให้ตั้งค่า style
เป็น null
:
featureLayer.style = null;
ค้นหารหัสสถานที่เพื่อกำหนดเป้าหมายองค์ประกอบ
วิธีรับรหัสสถานที่สำหรับภูมิภาคต่างๆ
- ใช้ Places API และการระบุพิกัดทางภูมิศาสตร์เพื่อค้นหาภูมิภาคตามชื่อ และรับรหัสตำแหน่งสำหรับภูมิภาคภายในขอบเขตที่ระบุ
- รับข้อมูลจากกิจกรรมการคลิก จะแสดงผลฟีเจอร์ที่เกี่ยวข้องกับภูมิภาคที่คลิก ซึ่งให้สิทธิ์เข้าถึงรหัสสถานที่ ชื่อที่แสดง และหมวดหมู่ประเภทสถานที่
การครอบคลุมจะแตกต่างกันไปตามภูมิภาค ดูรายละเอียดได้ที่การครอบคลุมของขอบเขตของ Google
ชื่อทางภูมิศาสตร์มีที่มาจากหลายแหล่ง เช่น คณะกรรมการ USGS ว่าด้วยชื่อทางภูมิศาสตร์ และสหรัฐอเมริกา Gazetteer Files
ใส่โค้ดตัวอย่างให้ครบถ้วน
TypeScript
let map: google.maps.Map; //@ts-ignore let featureLayer; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; map = new Map(document.getElementById('map') as HTMLElement, { center: { lat: 20.773, lng: -156.01 }, // Hana, HI zoom: 12, // In the cloud console, configure this Map ID with a style that enables the // "Locality" feature layer. mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>, }); //@ts-ignore featureLayer = map.getFeatureLayer('LOCALITY'); // Define a style with purple fill and border. //@ts-ignore const featureStyleOptions: google.maps.FeatureStyleOptions = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: '#810FCB', fillOpacity: 0.5 }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options: { feature: { placeId: string; }; }) => { if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI return featureStyleOptions; } }; } initMap();
JavaScript
let map; //@ts-ignore let featureLayer; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); map = new Map(document.getElementById("map"), { center: { lat: 20.773, lng: -156.01 }, // Hana, HI zoom: 12, // In the cloud console, configure this Map ID with a style that enables the // "Locality" feature layer. mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>, }); //@ts-ignore featureLayer = map.getFeatureLayer("LOCALITY"); // Define a style with purple fill and border. //@ts-ignore const featureStyleOptions = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: "#810FCB", fillOpacity: 0.5, }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options) => { if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") { // Hana, HI return featureStyleOptions; } }; } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Boundaries Simple</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>