เริ่มเลย

เลือกแพลตฟอร์ม แอนดรอยด์ 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>

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

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

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