การตั้งค่าตัวเลือกบริบทและแผนที่ในเครื่อง

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

ส่วนนี้จะพูดถึงตัวเลือกที่คุณสามารถตั้งค่าในอินสแตนซ์ LocalContextMapView และ Map ภายในที่มีใน LocalContextMapView เมื่อสร้างอินสแตนซ์ LocalContextMapView ใหม่ คุณจะระบุประเภทสถานที่ได้สูงสุด 10 ประเภท พร้อมกับจํานวนสถานที่ที่จะแสดงได้สูงสุด (สูงสุด 24 แห่ง) ด้านใน Map รองรับ MapOptions ทั้งหมดเหมือนกับ Maps JavaScript API มาตรฐาน Map

คุณอัปเดตพร็อพเพอร์ตี้การค้นหาตามบริบทในพื้นที่ได้ทุกเมื่อหลังจากที่ไลบรารีบริบทตามบริบทเริ่มต้น การอัปเดต maxPlaceCount, placeTypePreferences, locationRestriction หรือ locationBias อาจทริกเกอร์การค้นหาใหม่โดยอัตโนมัติ

การระบุประเภทสถานที่

คุณสามารถระบุประเภทสถานที่ได้สูงสุด 10 ประเภทที่ไลบรารีบริบทตามบริบทควรแสดงผล ระบุประเภทสถานที่โดยใช้พร็อพเพอร์ตี้ placeTypePreferences และส่งประเภทสถานที่อย่างน้อย 1 ประเภทตามที่แสดงในตัวอย่างต่อไปนี้

placeTypePreferences: ['restaurant', 'cafe']

การถ่วงน้ําหนักประเภทสถานที่

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

คุณกําหนดน้ําหนักสัมพัทธ์ให้กับพร็อพเพอร์ตี้แต่ละรายการได้โดยใช้แอตทริบิวต์ weight ตัวอย่างต่อไปนี้แสดงการถ่วงน้ําหนักประเภทสถานที่ที่ระบุเพื่อแสดงผลลัพธ์ restaurant และ cafe มากเป็น 2 เท่าสําหรับ primary_school

placeTypePreferences: [{type: 'restaurant', weight: 2}, {type: 'cafe', weight: 2}, {type: 'primary_school', weight: 1}]

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

การตั้งค่าจํานวนสถานที่สูงสุด

หากต้องการกําหนดจํานวนสถานที่สูงสุด (ไม่เกิน 24 ตําแหน่ง) ที่ไลบรารีบริบทตามบริบทควรแสดงผล ให้ใช้พร็อพเพอร์ตี้ maxPlaceCount ตามที่แสดงไว้ที่นี่

maxPlaceCount: 12

การตั้งค่าการจํากัดตําแหน่ง

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

กําลังเปิดใช้เส้นทาง

หากต้องการเปิดใช้เส้นทางในแผนที่ ให้ตั้งค่าพร็อพเพอร์ตี้ directionsOptions ของ LocalContextMapView ส่งออบเจ็กต์ออบเจ็กต์ LLL สําหรับจุดต้นทาง (จุดสิ้นสุดจะกําหนดโดยสถานที่ที่เลือกปัจจุบัน) หากไม่ผ่านต้นทาง ระบบจะปิดใช้เส้นทาง ตัวอย่างต่อไปนี้แสดงการตั้งค่าต้นทางเพื่อเปิดใช้เส้นทางเดินเท้าบนแผนที่

directionsOptions: {origin: {lat: 47.6532809, lng: -122.3512206}},

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

  • ปิดใช้เส้นทางเดินเท้าที่ระดับการซูมต่ํา (โดยปกติจะต่ํากว่าระดับการซูม 16)
  • กําหนด locationRestriction โดยใช้ขอบเขตที่เล็กลง วิธีนี้จะป้องกันไม่ให้จุดที่น่าสนใจแสดงอยู่นอกพื้นที่ที่จํากัด

การเปลี่ยนต้นทางเส้นทาง

คุณสามารถเปลี่ยนค่าของพร็อพเพอร์ตี้ directionsOptions ได้ทุกเมื่อในระหว่างวงจรการใช้งานของ LocalContextMapView ตัวอย่างต่อไปนี้แสดงการตั้งค่าใหม่สําหรับ directionsOptions

localContextMapView.directionsOptions = {
  origin: {lat: 47.6532809, lng: -122.3512206},
};

หรือ

localContextMapView.directionsOptions.origin = {lat: 47.6532809, lng: -122.3512206};

การตั้งค่าเลย์เอาต์และระดับการเข้าถึง

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

การตั้งค่าตําแหน่งเลย์เอาต์ตัวเลือกสถานที่

คุณกําหนดตําแหน่งเลย์เอาต์ของตัวเลือกสถานที่ได้เมื่อเริ่มต้น LocalContextMapView ตําแหน่งของเลย์เอาต์จะสัมพันธ์กับทิศทางของเอกสาร และจะแตกต่างกันไป ขึ้นอยู่กับว่าแอปเป็นแบบซ้ายไปขวา (LTR) หรือขวาไปซ้าย (RTL)

ตัวเลือกสถานที่มี 3 ตัวเลือก ได้แก่

  • INLINE_START กําหนดให้ตัวเลือกสถานที่แสดงที่จุดเริ่มต้นของโฟลว์เนื้อหา (ทางด้านซ้ายของแผนที่สําหรับ LTR ทางด้านขวาสําหรับ RTL)
  • INLINE_END กําหนดให้ตัวเลือกสถานที่แสดงที่ตอนท้ายของโฟลว์เนื้อหา (ทางด้านขวาของแผนที่สําหรับ LTR ทางด้านซ้ายสําหรับ RTL)
  • BLOCK_END ตั้งค่าตัวเลือกตัวเลือกให้แสดงที่ BOTTOM ของหน้าเว็บ (แบบเดียวกันสําหรับทั้ง LTR และ RTL)

เมื่อตั้งค่าตําแหน่งตัวเลือกสถานที่เป็น INLINE_START หรือ INLINE_END แล้ว คุณต้องตั้งค่าตําแหน่งมุมมองรายละเอียดสถานที่เป็นค่าเดียวกันเสมอ คุณสามารถเลือกตั้งค่ามุมมองรายละเอียดสถานที่ให้แสดงในหน้าต่างข้อมูลได้ สําหรับ BLOCK_END ต้องตั้งค่าโหมดเลย์เอาต์มุมมองรายละเอียดสถานที่เป็น "INFO_WINDOW" เสมอ

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

เราขอแนะนําให้ใช้ฟังก์ชันการทํางานเพื่อกําหนดค่าตําแหน่งเริ่มต้นของตัวเลือกสถานที่ การประกาศค่าเหล่านี้โดยตรงจะลบล้างการเปลี่ยนแปลงเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์

แสดงตัวเลือกสถานที่ในตอนต้นของโฟลว์เนื้อหา

หากต้องการกําหนดตัวเลือกสถานที่ให้ปรากฏในจุดเริ่มต้นของโฟลว์เนื้อหา (ทางด้านซ้ายของแผนที่สําหรับ LTR) ทางด้านขวาสําหรับ RTL) ให้ตั้งค่า position เป็น INLINE_START สําหรับทั้ง placeChooserViewSetup และ placeDetailsViewSetup ดังที่แสดงในตัวอย่างต่อไปนี้

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
});

การแสดงตัวเลือกสถานที่ในตอนท้ายของโฟลว์เนื้อหา

หากต้องการกําหนดตัวเลือกสถานที่ให้ปรากฏที่ท้ายโฟลว์เนื้อหา (ทางด้านขวาสําหรับ LTR) ให้ตั้งค่า position เป็น INLINE_END สําหรับทั้ง placeChooserViewSetup และ placeDetailsViewSetup ดังที่แสดงในตัวอย่างต่อไปนี้

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
});

แสดงตัวเลือกสถานที่ด้านล่าง

หากต้องการกําหนดตัวเลือกสถานที่ให้แสดงที่ด้านล่างของแผนที่ ให้ตั้งค่า position ของ placeChooserViewSetup เป็น BLOCK_END และ layoutMode ของ placeDetailsViewSetup เป็น INFO_WINDOW ดังที่แสดงในตัวอย่างต่อไปนี้

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'BLOCK_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {layoutMode: 'INFO_WINDOW'};
    }
  },
});

การซ่อนตัวเลือกสถานที่

ตัวเลือกสถานที่จะแสดงโดยค่าเริ่มต้น หากต้องการซ่อนตัวเลือกสถานที่ ให้ตั้งค่า layoutMode เป็น HIDDEN ดังที่แสดงในตัวอย่างต่อไปนี้

placeChooserViewSetup: {layoutMode: 'HIDDEN'},

ตัวอย่างต่อไปนี้ซ่อนการซ่อนตัวเลือกสถานที่เมื่อตําแหน่งเริ่มต้นเปลี่ยนเป็น BLOCK_END

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  placeChooserViewSetup: ({defaultPosition}) => {
    if (defaultPosition === 'BLOCK_END') {
      return {layoutMode: 'HIDDEN'};
    }
  },
});

การแสดงมุมมองรายละเอียดสถานที่ในหน้าต่างข้อมูล

หากต้องการให้มุมมองรายละเอียดสถานที่แสดงในหน้าต่างข้อมูล ให้ตั้งค่า layoutMode เป็น INFO_WINDOW ดังที่แสดงในตัวอย่างต่อไปนี้

placeDetailsViewSetup: {layoutMode: 'INFO_WINDOW'},

คุณใช้การตั้งค่านี้ร่วมกับตําแหน่งตัวเลือกสถานที่ใดก็ได้ (ซ้าย ขวา หรือด้านล่าง)

การซ่อนมุมมองรายละเอียดสถานที่โดยใช้โปรแกรม

คุณซ่อนมุมมองรายละเอียดสถานที่แบบเป็นโปรแกรมได้โดยเรียกใช้ hidePlaceDetailsView() บนอินสแตนซ์ LocalContextMapView ตามตัวอย่างต่อไปนี้

localContextMapView.hidePlaceDetailsView()

โดยค่าเริ่มต้น การคลิกที่แผนที่จะเป็นการซ่อนมุมมองรายละเอียดสถานที่ คุณตั้งค่าตัวเลือก hidesOnMapClick ใน placeDetailsViewSetup เป็น false เพื่อป้องกันลักษณะการทํางานเริ่มต้นนี้ได้

// Prevent hiding the place details view when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: {hidesOnMapClick: false},
});

หากต้องการซ่อนหน้าต่างข้อมูลรายละเอียดสถานที่เมื่อผู้ใช้คลิกแผนที่ คุณสามารถควบคุมการตั้งค่า hidesOnMapClick ตามเงื่อนไขดังที่แสดงในตัวอย่างต่อไปนี้

// Only hides the place details Info Window when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    return {hidesOnMapClick: defaultLayoutMode === 'INFO_WINDOW'};
  },
});

ตั้งค่าตัวเลือก Map ภายใน

เมื่อมีอินสแตนซ์ LocalContextMapView แล้ว คุณจะตั้งค่า MapOptions ในอินสแตนซ์ Map ภายในได้ Map ที่มีอยู่โดย LocalContextMapView รองรับตัวเลือกแผนที่ทั้งหมดเหมือนกับแผนที่ Maps JavaScript API มาตรฐาน ตัวอย่างต่อไปนี้แสดงการสร้างอินสแตนซ์ LocalContextMapView ใหม่และตั้งค่าตัวเลือก 2-3 รายการภายใน Map

// Instantiate LocalContextMapView.
function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
  });

  // Set inner map options.
  localContextMapView.map.setOptions({
    center: pos,
    zoom: 14,
    mapTypeId: 'satellite',
  });
}