เริ่มใช้งาน

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

หากต้องการใช้การจัดรูปแบบตามข้อมูลสำหรับขอบเขต คุณต้องสร้างรหัสแผนที่ที่ใช้แผนที่เวกเตอร์ JavaScript จากนั้นคุณต้องสร้างรูปแบบแผนที่ใหม่ เลือกเลเยอร์ของฟีเจอร์ขอบเขต และเชื่อมโยงรูปแบบกับรหัสแผนที่

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

หากต้องการสร้างรหัสแผนที่ใหม่ ให้ทำตามขั้นตอนใน การปรับแต่งระบบคลาวด์ ตั้งค่าประเภทแผนที่เป็น JavaScript แล้วเลือกตัวเลือกเวกเตอร์ เลือกเอียง และหมุน เพื่อเปิดใช้การเอียงและการหมุนบนแผนที่ หากการใช้การเอียงหรือส่วนหัวส่งผลเสียต่อแอป ให้ยกเลิกการเลือกเอียง และหมุน เพื่อไม่ให้ผู้ใช้ปรับได้

สร้างรหัสแผนที่เวกเตอร์

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

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

เลือกเลเยอร์ฟีเจอร์

คุณสามารถเลือกเลเยอร์ของฟีเจอร์ที่จะแสดงในคอนโซล Google API ซึ่งจะเป็นตัวกำหนดขอบเขตประเภทใดที่จะปรากฏบนแผนที่ (เช่น ท้องถิ่น รัฐ และอื่นๆ)

วิธีจัดการเลเยอร์ฟีเจอร์

  1. ไปที่หน้า "รูปแบบแผนที่" ใน Google API Console
  2. เลือกโปรเจ็กต์หากได้รับข้อความแจ้ง
  3. เลือกรูปแบบแผนที่
  4. คลิกเมนูแบบเลื่อนลงเลเยอร์ฟีเจอร์ เพื่อเพิ่มหรือนำเลเยอร์ออก
  5. คลิกบันทึก เพื่อบันทึกการเปลี่ยนแปลงและทำให้การเปลี่ยนแปลงพร้อมใช้งานในแผนที่

ภาพหน้าจอแสดงเมนูแบบเลื่อนลง

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

การดำเนินการนี้ต้องใช้รหัสแผนที่ที่คุณเพิ่งสร้าง ซึ่งจะอยู่ในหน้าการจัดการ Maps Management

  1. โหลด Maps JavaScript API โดยเพิ่มตัวโหลด Bootstrap แบบอินไลน์ลงในโค้ดของแอปพลิเคชัน ดังที่แสดงในข้อมูลโค้ดต่อไปนี้
<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>

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

    map = new
google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled.
});

ดูข้อมูลเพิ่มเติมเกี่ยวกับการโหลด Maps JavaScript API

เพิ่มเลเยอร์ฟีเจอร์ลงในแผนที่

หากต้องการรับข้อมูลอ้างอิงถึงเลเยอร์ของฟีเจอร์บนแผนที่ ให้เรียกใช้ map.getFeatureLayer() เมื่อแผนที่เริ่มต้น

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 20.773, lng: -156.01 },
    zoom: 12,
    mapId: 'MAP_ID',
  });

  // Add a feature layer for localities.
  localityLayer = map.getFeatureLayer('LOCALITY');
  ...
}

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

การจัดรูปแบบตามข้อมูลสำหรับขอบเขตต้องใช้ความสามารถที่เปิดใช้ใน คอนโซล Google API และเชื่อมโยงกับรหัสแผนที่ เนื่องจากรหัสแผนที่อาจมีการเปลี่ยนแปลง คุณจึงเรียกใช้ map.getMapCapabilities() เพื่อตรวจสอบว่าความสามารถบางอย่าง (เช่น การจัดรูปแบบตามข้อมูล) พร้อมใช้งานหรือไม่ก่อนที่จะเรียกใช้ การตรวจสอบนี้ไม่บังคับ

ตัวอย่างต่อไปนี้แสดงการเพิ่ม Listener เพื่อสมัครรับข้อมูลการเปลี่ยนแปลงความสามารถของแผนที่

// subscribe to 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.
  }
});

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