จัดรูปแบบแผนที่

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

จัดรูปแบบแผนที่ด้วยการจัดรูปแบบแผนที่ในระบบคลาวด์

หากต้องการใช้รูปแบบแผนที่กับแผนที่การแชร์การเดินทางของผู้บริโภคใน 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" }
        ]
      }
    ]
  }
});

ปิดใช้การปรับอัตโนมัติ

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

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,
  ...
});

แทนที่แผนที่ที่มีอยู่

คุณสามารถแทนที่แผนที่ที่มีอยู่ซึ่งมีเครื่องหมายหรือการปรับแต่งอื่นๆ โดยไม่สูญเสียการปรับแต่งเหล่านั้น

เช่น สมมติว่าคุณมีหน้าเว็บที่มีgoogle.maps.Map เอนทิตีมาตรฐานซึ่งแสดงเครื่องหมาย

    <!DOCTYPE html>
    <html>
      <head>
        <style>
           /* Set the size of the div element that contains the map */
          #map {
            height: 400px;  /* The height is 400 pixels */
            width: 100%;  /* The width is the width of the web page */
           }
        </style>
      </head>
      <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>
        <script>
    // Initialize and add the map
    function initMap() {
      // The location of Pier 39 in San Francisco
      var pier39 = {lat: 37.809326, lng: -122.409981};
      // The map, initially centered at Mountain View, CA.
      var map = new google.maps.Map(document.getElementById('map'));
      map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

      // The marker, now positioned at Pier 39
      var marker = new google.maps.Marker({position: pier39, map: map});
    }
        </script>
        <!-- Load the API from the specified URL.
           * The async attribute allows the browser to render the page while the API loads.
           * The key parameter will contain your own API key (which is not needed for this tutorial).
           * The callback parameter executes the initMap() function.
        -->
        <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>
      </body>
    </html>

วิธีเพิ่มไลบรารีการติดตามกองยานพาหนะ JavaScript

  1. เพิ่มโค้ดสำหรับโรงงานโทเค็นการตรวจสอบสิทธิ์
  2. เริ่มต้นผู้ให้บริการตำแหน่งในฟังก์ชัน initMap()
  3. เริ่มต้นมุมมองแผนที่ในinitMap()ฟังก์ชัน มุมมองนี้มีแผนที่
  4. ย้ายการปรับแต่งไปยังฟังก์ชันเรียกกลับสำหรับการเริ่มต้นมุมมองแผนที่
  5. เพิ่มไลบรารีตำแหน่งลงในตัวโหลด API

ตัวอย่างการแทนที่แผนที่โดยใช้การตั้งค่างานที่กำหนดเวลาไว้

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

    <!DOCTYPE html>
    <html>
      <head>
        <style>
           /* Set the size of the div element that contains the map */
          #map {
            height: 400px;  /* The height is 400 pixels */
            width: 100%;  /* The width is the width of the web page */
           }
        </style>
      </head>
      <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id="map"></div>
        <script>
    let locationProvider;

    // (1) Authentication Token Fetcher
    function authTokenFetcher(options) {
      // options is a record containing two keys called
      // serviceType and context. The developer should
      // generate the correct SERVER_TOKEN_URL and request
      // based on the values of these fields.
      const response = await fetch(SERVER_TOKEN_URL);
          if (!response.ok) {
            throw new Error(response.statusText);
          }
          const data = await response.json();
          return {
            token: data.Token,
            expiresInSeconds: data.ExpiresInSeconds
          };
    }

    // Initialize and add the map
    function initMap() {
      // (2) Initialize location provider. Use FleetEngineDeliveryVehicleLocationProvider
      // as appropriate.
      locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
        YOUR_PROVIDER_ID,
        authTokenFetcher,
      });

      // (3) Initialize map view (which contains the map).
      const mapView = new google.maps.journeySharing.JourneySharingMapView({
        element: document.getElementById('map'),
        locationProviders: [locationProvider],
        // any styling options
      });

    mapView.addListener('ready', () => {
      locationProvider.deliveryVehicleId = DELIVERY_VEHICLE_ID;

        // (4) Add customizations like before.
        // The location of Pier 39 in San Francisco
          var pier39 = {lat: 37.809326, lng: -122.409981};
        // The map, initially centered at Mountain View, CA.
        var map = mapView.map;
        map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
        // The marker, now positioned at Pier 39
        var marker = new google.maps.Marker({position: pier39, map: map});
      };
    }
        </script>
        <!-- Load the API from the specified URL
          * The async attribute allows the browser to render the page while the API loads
          * The key parameter will contain your own API key (which is not needed for this tutorial)
          * The callback parameter executes the initMap() function
          *
          * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
        -->
        <script defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
        </script>
      </body>
    </html>

หากคุณขับขี่ยานพาหนะนำส่งที่มีรหัสที่ระบุใกล้กับท่าเรือ 39 ระบบจะแสดงยานพาหนะดังกล่าวบนแผนที่

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