เริ่มต้น

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

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

ก่อนที่จะใช้การจัดรูปแบบจากข้อมูลสำหรับการแสดงตัวอย่างชุดข้อมูล คุณต้องมีโปรเจ็กต์ที่อยู่ในระบบคลาวด์ด้วยบัญชีสำหรับการเรียกเก็บเงิน รวมถึงเปิดใช้ทั้ง 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: "beta",
    // 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.
  }
});

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

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