เอกสารนี้อธิบายวิธีปรับแต่งรูปลักษณ์ของแผนที่ รวมถึงวิธีควบคุมการแสดงข้อมูลและตัวเลือกวิวพอร์ต ซึ่งทำได้ด้วยวิธีต่อไปนี้
- ใช้การจัดรูปแบบแผนที่ในระบบคลาวด์
- ตั้งค่าตัวเลือกรูปแบบแผนที่ในโค้ดของคุณเองโดยตรง
จัดรูปแบบแผนที่ด้วยการจัดรูปแบบแผนที่ในระบบคลาวด์
หากต้องการใช้รูปแบบแผนที่กับแผนที่การแชร์การเดินทางของผู้บริโภคที่ใช้ JavaScript ให้ระบุ mapId
และ mapOptions
อื่นๆ เมื่อสร้าง JourneySharingMapView
ตัวอย่างต่อไปนี้แสดงวิธีใช้รูปแบบแผนที่ที่มีรหัสแผนที่
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
จัดรูปแบบแผนที่ในโค้ดของคุณเองโดยตรง
นอกจากนี้ คุณยังปรับแต่งรูปแบบแผนที่ได้ด้วยการตั้งค่าตัวเลือกแผนที่เมื่อสร้าง
JourneySharingMapView
ตัวอย่างต่อไปนี้แสดงวิธีจัดรูปแบบแผนที่โดยใช้ตัวเลือกแผนที่ ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกแผนที่ที่คุณตั้งค่าได้
mapOptions
ในข้อมูลอ้างอิง Google Maps JavaScript API
JavaScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
TypeScript
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
แสดงข้อมูลบนแผนที่
แสดงข้อมูลเพิ่มเติมเกี่ยวกับยานพาหนะหรือเครื่องหมายตำแหน่งโดยใช้
InfoWindow
ดูข้อมูลเพิ่มเติมได้ที่ InfoWindow
ตัวอย่างต่อไปนี้แสดงวิธีสร้าง InfoWindow
และแนบกับเครื่องหมายยานพาหนะ
JavaScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount = e.trip.remainingWaypoints.length;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
TypeScript
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
const stopsCount = e.trip.remainingWaypoints.length;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
ปิดใช้การปรับขนาดอัตโนมัติ
คุณหยุดไม่ให้แผนที่ปรับการแสดงผลในมุมมองให้เหมาะกับยานพาหนะและเส้นทางที่คาดการณ์ไว้โดยอัตโนมัติได้ด้วยการปิดใช้การปรับอัตโนมัติ ตัวอย่างต่อไปนี้แสดงวิธีปิดใช้การปรับขนาดอัตโนมัติเมื่อคุณกำหนดค่ามุมมองแผนที่การแชร์เส้นทาง
JavaScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});