ドラッグ可能な方向を有効にします

経由地 を追加してマーカーをドラッグすることで、ユーザーが既定のルーティングを操作できるようにすることで、ナビゲーションの効率と精度を改善できます。

たとえば、地図上のドラッグ可能な道順案内は、倉庫業のロジスティクス管理者にとって貴重なツールになります。 特定の配達トラックのニーズに基づいてルートをカスタマイズすることで、配達を効率的かつタイムリーに行うことができます。

さらに、地図上でマーカーをドラッグすることで、特定の道路や通過したいエリアを含むようにルートをカスタマイズできます。 このレベルのパーソナライゼーションにより、ユーザーは自分の好みやニーズに合わせてカスタマイズされたルートを作成できます。

このチュートリアルでは、 Maps API for JavaScript を使用して地図上の原点と目的地のマーカーをプロットし、それらのマーカー間の最速ルートを計算して表示する方法を示します。 このチュートリアルでは、ユーザーが経由地 マーカーを追加または削除した場合、または既存のマーカーの位置を変更した場合に、デフォルトルートを動的に再計算する方法について説明します。

作業を開始する前に

マップをレンダリングする JavaScript コードのコンテナとして、基本的な HTML ページを作成します。

  1. HTML ファイル内で <head> 、次の例に示すように、要素が必要なライブラリ コンポーネントを参照していることを確認します。

     <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
 <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
 <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
 <script type="text/javascript" charset="utf-8" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" ></script>
 <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />

  2. HTML ページに CSS スタイルを追加します。 たとえば、次の基本的なスタイルを使用して、マップビューポイント を囲むコンテナの高さと幅の 100% に設定できます。

    body {width: 100%; height: 100%; position: absolute; margin: 0px; padding: 0px; overflow: hidden;} 
#map {position:absolute; top:0; bottom:0; width:100%; height: 100%;}

ベース マップ を作成します

作成した HTML コンテナに、 Maps API for JavaScript を使用してマップを表示し、マップの対話を有効にする JavaScript コードを追加します。

  1. <script> 作成した HTML ファイルの要素内で、次のコード スニペット を貼り付けるか、参照します。

     // Initiate and authenticate your connection to the HERE platform:
 const platform = new H.service.Platform({
     'apikey': 'Your API key'
 });

 // Obtain the default map types from the platform object:
 const defaultLayers = platform.createDefaultLayers();

 // Instantiate (and display) a map:
 var map = new H.Map(
     document.getElementById("map"),
     // Center the map on Great Britain with the zoom level of 6:
     defaultLayers.vector.normal.map, {
         zoom: 6,
         center: {
             lat: 53.480759,
             lng: -2.242631
         }
     });

 // MapEvents enables the event system.
 // The behavior variable implements default interactions for pan/zoom (also on mobile touch environments).
 const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

 // Enable dynamic resizing of the map, based on the current size of the enclosing cntainer
 window.addEventListener('resize', () => map.getViewPort().resize());

 // Create the default UI:
 var ui = H.ui.UI.createDefault(map, defaultLayers, );

  2. コード スニペット で apikey 、変数の値を独自の API キー に置き換えます。

結果: 結果の HTML ファイルでは、次 6の例に示すように、イギリスを中心としたベース マップ がのズーム レベル でレンダリングされます。

ベース マップ
図 1. ベース マップ

地図上に原点と目的地をプロットします

地図で、原点と目的地を表すマーカーを追加します。

  1. getMarkerIcon() カスタム SVG スタイルを各マーカーに適用する関数を作成します。

     /**
  * Returns an instance of H.map.Icon to style the markers
  * @param {number|string} id An identifier that will be displayed as marker label
  *
  * @return {H.map.Icon}
  */
 function getMarkerIcon(id) {
     const svgCircle = `<svg width="30" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
                           <g id="marker">
                             <circle cx="15" cy="15" r="10" fill="#0099D8" stroke="#0099D8" stroke-width="4" />
                             <text x="50%" y="50%" text-anchor="middle" fill="#FFFFFF" font-family="Arial, sans-serif" font-size="12px" dy=".3em">${id}</text>
                           </g></svg>`;
     return new H.map.Icon(svgCircle, {
         anchor: {
             x: 10,
             y: 10
         }
     });
 }

    スタイルによって、マーカー ID に対応するテキストが中央にある青い円のマーカーが作成されます。

  2. addMarker() マップにオブジェクトマーカーを追加し、カスタム SVG スタイルを適用する関数を作成します。

     /**
  * Create an instance of H.map.Marker and add it to the map
  *
  * @param {object} position  An object with 'lat' and 'lng' properties defining the position of the marker
  * @param {string|number} id An identifier that will be displayed as marker label
  * @return {H.map.Marker} The instance of the marker that was created
  */
 function addMarker(position, id) {
     const marker = new H.map.Marker(position, {
         data: {
             id
         },
         icon: getMarkerIcon(id),
     });

     map.addObject(marker);
     return marker;
 }

  3. 次の例に示すように、原点マーカーと目的地マーカーの座標を定義します。

     const origin = {
     lat: 55.953251,
     lng: -3.188267
 }; // Edinburgh
 const destination = {
     lat: 51.507797,
     lng: -0.128604
 }; // London

  4. addMarker() この関数を呼び出して、異なる ID を使用して、指定した場所の地図上に原点マーカーと目的地マーカーをプロットします。

     const originMarker = addMarker(origin, 'A');
 const destinationMarker = addMarker(destination, 'B');

結果: 次の図に示すように、地図には原点と目的地の座標の静的マーカーが表示されます。

原点マーカーと目的地マーカーを使用したベース マップ
図 2. 原点マーカーと目的地マーカーを使用したベース マップ

マーカーの詳細について は、「マーカーオブジェクト」を参照してください。

出発地点と目的地の間の最速ルートを計算します

HERE Routing API V8 を使用して、デザイン地点と目的地地点の間の最速ルートを決定します。

  1. ルーティングパラメータを指定します。

     const routingParams = {
     'origin': `${origin.lat},${origin.lng}`,
     'destination': `${destination.lat},${destination.lng}`,
     'transportMode': 'car',
     'return': 'polyline'
 };

    ここで、

    • origin ルートの出発地点の緯度 と経度 を表す文字列です。
    • destination ルートの宛先の緯度 および経度 を表す文字列です。
    • transpotMode ルートに使用する輸送手段を指定する文字列です。 この例では、に設定 carされています。これは、ルートが車での移動に最適化されることを意味します。
    • return API からの応答の形式を示す文字列です。この例では、に設定 polylineされています。これは、応答がポリライン としてルートを表す文字列であることを意味します。

  2. H.service.RoutingService8 オブジェクトを初期化 :

     const router = platform.getRoutingService(null, 8);

  3. マップ上の計算ルートを表すポリライン を保持するために、空の変数を初期化します。

     let routePolyline;

  4. H.service.RoutingService8 オブジェクトのcalculateRouteメソッドのコールバック 関数として使用するrouteResponseHandler()関数を定義します。

     /**
  * Handler for the H.service.RoutingService8#calculateRoute call
  *
  * @param {object} response The response object returned by calculateRoute method
  */
 function routeResponseHandler(response) {
     const sections = response.routes[0].sections;
     const lineStrings = [];
     sections.forEach((section) => {
         // convert Flexible Polyline encoded string to geometry
         lineStrings.push(H.geo.LineString.fromFlexiblePolyline(section.polyline));
     });
     const multiLineString = new H.geo.MultiLineString(lineStrings);
     const bounds = multiLineString.getBoundingBox();

     // Create the polyline for the route
     if (routePolyline) {
         // If the routePolyline we just set the new geometry
         routePolyline.setGeometry(multiLineString);
     } else {
         // routePolyline is not yet defined, instantiate a new H.map.Polyline
         routePolyline = new H.map.Polyline(multiLineString, {
             style: {
                 lineWidth: 5
             }
         });
     }

     // Add the polyline to the map
     map.addObject(routePolyline);
 }

  5. updateRoute 定義済みのパラメータを使用してルーティングサービスを呼び出す機能を定義します。

     function updateRoute() {
     router.calculateRoute(routingParams, routeResponseHandler, console.error);
 }

    calculateRoute メソッドは、で指定されたパラメータに基づい routingParamsて、 2 つ以上のポイント間の最速ルートを決定します。 ルートが計算されると routeResponseHandler() 、応答オブジェクトをパラメータとして使用して関数が呼び出されます。

  6. updateRoute 関数を呼び出して、起点と終点の間のルートを表示します。

     updateRoute();

結果: 次の図に示すように、エジンバラからロンドン への最速ルートが車で表示されます。

出発地と目的地の間の最速ルートがポリライン として示されます
図 3. 出発地と目的地の間の最速ルートがポリライン として示されます

ルーティングの詳細について は、 HERE Routing API V8 を参照してください。

マーカーをドラッグ可能にします

ユーザーが、対応するマーカーを新しい位置にドラッグして、最初の原点と目的地を編集できるようにします。 マーカーの位置が変更されたときにルートを動的に再計算するようにマップを設定できます。

  1. addMarker 機能内で、マーカーオブジェクトのドラッグを有効にします。

    1. marker 変数で 、H.map.Markerオブジェクトのvolatile設定オプションを true に設定して、スムーズなドラッグを有効にします。

    2. marker.draggable プロパティをに設定 trueします。

      更新された関数定義のリファレンスを参照してください。

      function addMarker(position, id) {
 const marker = new H.map.Marker(position, {
     data: {
         id
     },
     icon: getMarkerIcon(id),
     // Enable smooth dragging
     volatility: true
 });
 // Enable draggable markers
 marker.draggable = true;

 map.addObject(marker);
 return marker;
}

  2. dragstart イベントのマップイベントリスナーを追加します。

     /**
  * Listen to the dragstart and store the relevant position information of the marker
  */
 map.addEventListener('dragstart', function(ev) {
     const target = ev.target;
     const pointer = ev.currentPointer;
     if (target instanceof H.map.Marker) {
         // Disable the default draggability of the underlying map
         behavior.disable(H.mapevents.Behavior.Feature.PANNING);

         var targetPosition = map.geoToScreen(target.getGeometry());
         // Calculate the offset between mouse and target's position
         // when starting to drag a marker object
         target['offset'] = new H.math.Point(
             pointer.viewportX - targetPosition.x, pointer.viewportY - targetPosition.y);
     }
 }, false);

    このイベントは、ユーザーが地図上でマーカーのドラッグを開始したときにトリガーされます。 このイベントリスナーの関数は、イベントのターゲットがマーカーオブジェクトであるかどうかを確認します。 true の場合、この関数は、基本となるマップの既定のドラッグ可否を無効にし、マーカーオブジェクトのドラッグを開始したときに、マウスとターゲットの位置の間のオフセット を計算します。 オフセット を使用して、地図上でドラッグされたマーカーの新しい位置が計算されます。

  3. drag イベントのマップイベントリスナーを追加します。

     /**
  * Listen to the drag event and move the position of the marker as necessary
  */
 map.addEventListener('drag', function(ev) {
     const target = ev.target;
     const pointer = ev.currentPointer;
     if (target instanceof H.map.Marker) {
         target.setGeometry(
             map.screenToGeo(pointer.viewportX - target['offset'].x, pointer.viewportY - target['offset'].y)
         );
     }
 }, false);

    このイベントリスナーの関数は、ポインターの現在の位置に基づいてマーカーがドラッグされると、マップ上のマーカーの位置を更新します。

  4. dragend イベントのマップイベントリスナーを追加します。

     /**
  * Listen to the dragend and update the route
  */
 map.addEventListener('dragend', function(ev) {
     const target = ev.target;
     if (target instanceof H.map.Marker) {
         // re-enable the default draggability of the underlying map
         // when dragging has completed
         behavior.enable(H.mapevents.Behavior.Feature.PANNING);
         const coords = target.getGeometry();
         const markerId = target.getData().id;

         // Update the routing params `origin` and `destination` properties
         // in case we dragging either the origin or the destination marker
         if (markerId === 'A') {
             routingParams.origin = `${coords.lat},${coords.lng}`;
         } else if (markerId === 'B') {
             routingParams.destination = `${coords.lat},${coords.lng}`;
         }

         updateRoute();
     }
 }, false);

    dragend イベントは updateRoute 、更新されたマーカー座標に基づいて、新しいルートを動的に再計算して表示するように関数をトリガーするように定義されます。

結果: 次の図に示すように、原点マーカーと目的地マーカーを新しい場所に移動し、地図が最速ルートを動的に再計算できるようになりました。

ドラッグ可能なマーカーと動的ルート再計算
図 4. ドラッグ可能なマーカーと動的ルート再計算

経由地 を追加または削除します

ユーザーがドラッグ可能な経由地 マーカーを追加または削除できるようにすることで、マップの対話性をさらに向上できます。 この機能により、ルート計画の柔軟性と効率性が向上します。

  1. ルート経由地 に対応するマーカーの空の配列を初期化します。

     // This array holds instances of H.map.Marker representing the route waypoints
 const waypoints = []

  2. 次 の例に示すように、ルーティングロジックでroutingParams変数を更新して新しいviaパラメータを追加します。

     const routingParams = {
   'origin':      `${origin.lat},${origin.lng}`,
   'destination': `${destination.lat},${destination.lng}`,
   // defines multiple waypoints
   'via': new H.service.Url.MultiValueQueryParameter(waypoints),
   'transportMode': 'car',
   'return': 'polyline'
 };

    は MultiValueQueryParameter 、原点と終点の間に複数の経由地 の座標を保持する文字列パラメーターを作成します。 この文字列が HERE Routing API クエリに追加されます。

  3. updateRoute() 次の例に示すように、経由地 を含めるように機能を調整します。

     function updateRoute() {
     // Add waypoints the route must pass through
     routingParams.via = new H.service.Url.MultiValueQueryParameter(
         waypoints.map(wp => `${wp.getGeometry().lat},${wp.getGeometry().lng}`));

     router.calculateRoute(routingParams, routeResponseHandler, console.error);
 }

    via このパラメータでは、オリジンと宛先の間でルートが通過する必要がある追加の経由地 が追加されます。

  4. tap イベントのマップイベントリスナーを追加します。

     /**
  * Listen to the tap event to add a new waypoint
  */
 map.addEventListener('tap', function(ev) {
     const target = ev.target;
     const pointer = ev.currentPointer;
     const coords = map.screenToGeo(pointer.viewportX, pointer.viewportY);

     if (!(target instanceof H.map.Marker)) {
         const marker = addMarker(coords, waypoints.length + 1);
         waypoints.push(marker);
         updateRoute();
     }
 });

    このイベントハンドラでは、目的の場所にある地図をクリックして新しい経由地 をマーカーとして追加できます。これにより、ルートが更新されます。

  5. dbltap イベントのマップイベントリスナーを追加します。

     /**
  * Listen to the dbltap event to remove a waypoint
  */
 map.addEventListener('dbltap', function(ev) {
     const target = ev.target;

     if (target instanceof H.map.Marker) {
         // Prevent the origin or destination markers from being removed
         if (['origin', 'destination'].indexOf(target.getData().id) !== -1) {
             return;
         }

         const markerIdx = waypoints.indexOf(target);
         if (markerIdx !== -1) {
             // Remove the marker from the array of way points
             waypoints.splice(markerIdx, 1)
             // Iterate over the remaining waypoints and update their data
             waypoints.forEach((marker, idx) => {
                 const id = idx + 1;
                 // Update marker's id
                 marker.setData({
                     id
                 });
                 // Update marker's icon to show its new id
                 marker.setIcon(getMarkerIcon(id))
             });
         }

         // Remove the marker from the map
         map.removeObject(target);

         updateRoute();
     }
 });

    このイベントリスナーの関数は、ユーザーがマーカーをダブルタップしたときに経由地 の削除を処理します。

    ユーザーがマーカーをダブルタップすると、まずマーカーが原点マーカーまたは宛先マーカーかどうかを確認します。 マーカーが削除されている場合、この機能ではマーカーを削除できません。 それ以外の場合 waypoints は、配列内のマーカーのインデックスが検索され、配列からマーカーが削除されます。

    waypoints 配列からマーカーを削除すると、配列内の残りのマーカーのデータとアイコンが更新 waypoints され、新しい順序が反映されます。 最後 updateRoute() に、この関数はマップからマーカーを削除し、この関数を呼び出して、新しい経由地 のセットに基づいてルートを更新します。

    詳細について は、「複数の経由地を使用したルート」経由地 を参照してください。

  6. マーカーをダブルタップしたときにマップのズームを無効にするマップビヘイビアーを追加します。

     behavior.disable(H.mapevents.Behavior.Feature.DBL_TAP_ZOOM);

結果: 次の例に示すように、経由地 マーカーを新しい場所に追加、削除、またはドラッグできるようになりました。また、マップは各イベントの後で最速のレートを動的に再計算します。

Interactive 経由地
図 5. Interactive 経由地

ソースコード

次のセクションでは、このチュートリアルで使用したすべてのソースコードについて説明します。

注

次のコードを試す前 apikey に、パラメーターの値をご自身の API キー に置き換えてください。

//BOILERPLATE CODE TO INITIALIZE THE MAP
const platform = new H.service.Platform({
    'apikey': 'Your API Key'
});

// Obtain the default map types from the platform object:
const defaultLayers = platform.createDefaultLayers();

// Instantiate (and display) a map:
var map = new H.Map(
    document.getElementById("map"),
    defaultLayers.vector.normal.map, {
        zoom: 6,
        center: {
            lat: 53.480759,
            lng: -2.242631
        }
    });

// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Disable zoom on double-tap to allow removing waypoints on double-tap
behavior.disable(H.mapevents.Behavior.Feature.DBL_TAP_ZOOM);

window.addEventListener('resize', () => map.getViewPort().resize());

// Create the default UI:
var ui = H.ui.UI.createDefault(map, defaultLayers, );

// ROUTING LOGIC STARTS HERE

// This variable holds the instance of the route polyline
let routePolyline;

/**
 * Handler for the H.service.RoutingService8#calculateRoute call
 *
 * @param {object} response The response object returned by calculateRoute method
 */
function routeResponseHandler(response) {
    const sections = response.routes[0].sections;
    const lineStrings = [];
    sections.forEach((section) => {
        // convert Flexible Polyline encoded string to geometry
        lineStrings.push(H.geo.LineString.fromFlexiblePolyline(section.polyline));
    });
    const multiLineString = new H.geo.MultiLineString(lineStrings);
    const bounds = multiLineString.getBoundingBox();

    // Create the polyline for the route
    if (routePolyline) {
        // If the routePolyline we just set has the new geometry
        routePolyline.setGeometry(multiLineString);
    } else {
        // If routePolyline is not yet defined, instantiate a new H.map.Polyline
        routePolyline = new H.map.Polyline(multiLineString, {
            style: {
                lineWidth: 5
            }
        });
    }

    // Add the polyline to the map
    map.addObject(routePolyline);
}

/**
 * Returns an instance of H.map.Icon to style the markers
 * @param {number|string} id An identifier that will be displayed as marker label
 *
 * @return {H.map.Icon}
 */
function getMarkerIcon(id) {
    const svgCircle = `<svg width="30" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g id="marker">
    <circle cx="15" cy="15" r="10" fill="#0099D8" stroke="#0099D8" stroke-width="4" />
    <text x="50%" y="50%" text-anchor="middle" fill="#FFFFFF" font-family="Arial, sans-serif" font-size="12px" dy=".3em">${id}</text>
  </g></svg>`;
    return new H.map.Icon(svgCircle, {
        anchor: {
            x: 10,
            y: 10
        }
    });
}

/**
 * Create an instance of H.map.Marker and add it to the map
 *
 * @param {object} position  An object with 'lat' and 'lng' properties defining the position of the marker
 * @param {string|number} id An identifier that will be displayed as marker label
 * @return {H.map.Marker} The instance of the marker that was created
 */
function addMarker(position, id) {
    const marker = new H.map.Marker(position, {
        data: {
            id
        },
        icon: getMarkerIcon(id),
        // Enable smooth dragging
        volatility: true
    });

    // Enable draggable markers
    marker.draggable = true;

    map.addObject(marker);
    return marker;
}

/**
 * This method calls the routing service to retrieve the route line geometry
 */
function updateRoute() {
    routingParams.via = new H.service.Url.MultiValueQueryParameter(
        waypoints.map(wp => `${wp.getGeometry().lat},${wp.getGeometry().lng}`));

    // Call the routing service with the defined parameters
    router.calculateRoute(routingParams, routeResponseHandler, console.error);
}

// ADD MARKERS FOR ORIGIN/DESTINATION
const origin = {
    lat: 55.953251,
    lng: -3.188267
}; // Edinburgh
const destination = {
    lat: 51.507797,
    lng: -0.128604
}; // London

const originMarker = addMarker(origin, 'A');
const destinationMarker = addMarker(destination, 'B');

// CALCULATE THE ROUTE BETWEEN THE TWO WAYPOINTS
// This array holds instances of H.map.Marker representing the route waypoints
const waypoints = []

// Define the routing service parameters
const routingParams = {
    'origin': `${origin.lat},${origin.lng}`,
    'destination': `${destination.lat},${destination.lng}`,
    // defines multiple waypoints
    'via': new H.service.Url.MultiValueQueryParameter(waypoints),
    'transportMode': 'car',
    'return': 'polyline'
};

// Get an instance of the H.service.RoutingService8 service
const router = platform.getRoutingService(null, 8);

// Call the routing service with the defined parameters and display the route
updateRoute();

/**
 * Listen to the dragstart and store relevant position information of the marker
 */
map.addEventListener('dragstart', function(ev) {
    const target = ev.target;
    const pointer = ev.currentPointer;
    if (target instanceof H.map.Marker) {
        // Disable the default draggability of the underlying map
        behavior.disable(H.mapevents.Behavior.Feature.PANNING);

        var targetPosition = map.geoToScreen(target.getGeometry());
        // Calculate the offset between mouse and target's position
        // when starting to drag a marker object
        target['offset'] = new H.math.Point(
            pointer.viewportX - targetPosition.x, pointer.viewportY - targetPosition.y);
    }
}, false);

/**
 * Listen to the dragend and update the route
 */
map.addEventListener('dragend', function(ev) {
    const target = ev.target;
    if (target instanceof H.map.Marker) {
        // re-enable the default draggability of the underlying map
        // when dragging has completed
        behavior.enable(H.mapevents.Behavior.Feature.PANNING);
        const coords = target.getGeometry();
        const markerId = target.getData().id;

        // Update the routing params `origin` and `destination` properties
        // in case we dragging either the origin or the destination marker
        if (markerId === 'A') {
            routingParams.origin = `${coords.lat},${coords.lng}`;
        } else if (markerId === 'B') {
            routingParams.destination = `${coords.lat},${coords.lng}`;
        }

        updateRoute();
    }
}, false);

/**
 * Listen to the drag event and move the position of the marker as necessary
 */
map.addEventListener('drag', function(ev) {
    const target = ev.target;
    const pointer = ev.currentPointer;
    if (target instanceof H.map.Marker) {
        target.setGeometry(
            map.screenToGeo(pointer.viewportX - target['offset'].x, pointer.viewportY - target['offset'].y)
        );
    }
}, false);

/**
 * Listen to the tap event to add a new waypoint
 */
map.addEventListener('tap', function(ev) {
    const target = ev.target;
    const pointer = ev.currentPointer;
    const coords = map.screenToGeo(pointer.viewportX, pointer.viewportY);

    if (!(target instanceof H.map.Marker)) {
        const marker = addMarker(coords, waypoints.length + 1);
        waypoints.push(marker);
        updateRoute();
    }
});

/**
 * Listen to the dbltap event to remove a waypoint
 */
map.addEventListener('dbltap', function(ev) {
    const target = ev.target;

    if (target instanceof H.map.Marker) {
        // Prevent origin or destination markers from being removed
        if (['origin', 'destination'].indexOf(target.getData().id) !== -1) {
            return;
        }

        const markerIdx = waypoints.indexOf(target);
        if (markerIdx !== -1) {
            // Remove the marker from the array of way points
            waypoints.splice(markerIdx, 1)
            // Iterate over the remaining waypoints and update their data
            waypoints.forEach((marker, idx) => {
                const id = idx + 1;
                // Update marker's id
                marker.setData({
                    id
                });
                // Update marker's icon to show its new id
                marker.setIcon(getMarkerIcon(id))
            });
        }

        // Remove the marker from the map
        map.removeObject(target);

        updateRoute();
    }
});

次のステップ

  • 他の Maps API for JavaScript の使用例については 、例を参照してください。
  • Maps API for JavaScript の設計と機能については 、『 API リファレンス』を参照してください。

「」に一致する結果は 件です

    「」に一致する結果はありません