เริ่มใช้งาน

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

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

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

ก่อนใช้การจัดรูปแบบตามข้อมูลสำหรับชุดข้อมูล คุณต้องมีโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google 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 ในแท็ก script ของ API)

<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>

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

การจัดรูปแบบตามข้อมูลสำหรับชุดข้อมูลต้องใช้รหัสแผนที่ หากไม่มีรหัสแผนที่หรือมีการส่งรหัสแผนที่ที่ไม่ถูกต้อง ฟีเจอร์ข้อมูลจะโหลดไม่ได้ ในขั้นตอนการแก้ปัญหา คุณสามารถเพิ่ม Listener 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.
  }
});

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

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