เริ่มเลย

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

ทําตามขั้นตอนต่อไปนี้เพื่อตั้งค่าการจัดรูปแบบตามข้อมูลที่ขับเคลื่อนโดยชุดข้อมูล

รับคีย์ API และเปิดใช้ API

ก่อนที่จะใช้การจัดสไตล์ตามข้อมูลที่ขับเคลื่อนโดยชุดข้อมูล คุณต้องมีโปรเจ็กต์ Cloud ที่มีบัญชีการเรียกเก็บเงิน รวมถึงเปิดใช้ทั้ง Maps JavaScript API และ Maps Datasets API ดูข้อมูลเพิ่มเติมได้ในตั้งค่าโปรเจ็กต์ Google Cloud

รับคีย์ API

เปิดใช้ Maps JavaScript API

เปิดใช้ Maps Datasets API

สร้างรหัสแผนที่

หากต้องการสร้างรหัสแผนที่ใหม่ ให้ทําตามขั้นตอนในการปรับแต่งระบบคลาวด์ ตั้งค่าประเภทแผนที่เป็น JavaScript และเลือกตัวเลือกเวกเตอร์

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

const position = new google.maps.LatLng(40.75, -74.05);
const map = new google.maps.Map(document.getElementById('map'), {
  zoom: 11,
  center: position,
  mapId: 'YOUR_MAP_ID',
});

สร้างรูปแบบแผนที่ใหม่

หากต้องการสร้างรูปแบบแผนที่ใหม่ ให้ทําตามวิธีการในจัดการรูปแบบแผนที่เพื่อสร้างรูปแบบ และเชื่อมโยงรูปแบบกับรหัสแผนที่ที่เพิ่งสร้างขึ้น

อัปเดตรหัสการเริ่มต้นแผนที่

หากต้องการใช้การจัดรูปแบบตามข้อมูลสำหรับชุดข้อมูล ก่อนอื่นให้โหลด Maps JavaScript API โดยการเพิ่มตัวโหลด Bootstrap แบบอินไลน์ลงในโค้ดของแอปพลิเคชันดังที่แสดงที่นี่ (ใช้ v=beta ในแท็ก API script ของคุณ):

<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: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

ตรวจสอบความสามารถของแผนที่ (ไม่บังคับ)

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

• มีการใช้รหัสแผนที่ที่ถูกต้อง
• รหัสแผนที่จะเชื่อมโยงกับแผนที่เวกเตอร์

การใช้ความสามารถของแผนที่เป็นตัวเลือกที่ไม่บังคับ และแนะนําสําหรับการทดสอบและการแก้ปัญหาเท่านั้น หรือสําหรับวัตถุประสงค์สำรองรันไทม์

// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isDataDrivenStylingAvailable) {
    // Data-driven styling is *not* available, add a fallback.
    // Existing feature layers are also unavailable.
  }
});

ขั้นตอนถัดไป

• สร้างและอัปโหลดชุดข้อมูล