Bỏ qua

Dẫn đường giữa nhiều điểm tùy chỉnh

Dẫn đường giữa nhiều điểm tùy chỉnh với dịch vụ dẫn đường MapVina API.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>Direction between multiple custom points</title>
        <meta property="og:description" content="Example routing multiple points using plugin MapVina GL Directions, custom points with Marker and Popup." />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/mapvina-gl.css" />
        <script src="https://unpkg.com/[email protected]/dist/mapvina-gl.js"></script>
        <style>
            body {
                margin: 0;
                padding: 0;
            }

            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }

            .custom-marker {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background: orange;

                display: inline-block;
                position: relative;
                border-bottom-left-radius: 0;
                transform: rotate(-45deg);
            }

            .custom-marker .custom-marker-content {
                top: 50%;
                left: 50%;
                font-size: 20px;
                position: absolute;
                transform: rotate(45deg) translate(-100%, -25%);
            }

            .custom-marker::before {
                content: '';
                background: white;
                width: 75%;
                height: 75%;
                border-radius: 100%;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }

            .custom-popup .mapvinagl-popup-content {
                background-color: lightyellow;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>

        <script>
            const originLatLng = [106.62, 10.76];
            const waypointsLatLng = [[106.667, 10.76], [106.661, 10.7777], [106.698, 10.78], [106.691, 10.759]];
            const destinationLatLng = [106.7, 10.8];

            var map = new mapvinagl.Map({
                container: 'map',
                style: 'https://maps.mapvina.com/styles/v2/streets.json?key=public_key',
                center: { "lat": 10.762622, "lng": 106.660172 },
                zoom: 11
            });

            function createMarkerElement(textContent, color) {
                let markerEl = document.createElement('div');
                let customMarkerEl = document.createElement('div');
                let contentEl = document.createElement('div');

                if (color) {
                    customMarkerEl.style.backgroundColor = color;
                }
                customMarkerEl.classList.add('custom-marker');
                contentEl.classList.add('custom-marker-content');

                contentEl.textContent = textContent;

                customMarkerEl.appendChild(contentEl);
                markerEl.appendChild(customMarkerEl);

                return markerEl;
            }

            function createPopup(content) {
                let popup = new mapvinagl.Popup({
                    offset: 5,
                    className: 'custom-popup'
                }).setText(content);
                return popup;
            }

            map.on('load', () => {
                // add marker for origin
                const originMarker = new mapvinagl.Marker(
                    {element: createMarkerElement('A', '#34A853')}
                );
                originMarker.setLngLat(originLatLng);
                originMarker.setPopup(createPopup('Starting!'));
                originMarker.addTo(map);

                // add waypoints
                for (let index = 0; index < waypointsLatLng.length; index++) {
                    const waypointLatLng = waypointsLatLng[index];
                    const marker = new mapvinagl.Marker(
                        {element: createMarkerElement(`${index + 1}`)}
                    );
                    marker.setLngLat(waypointLatLng);
                    marker.setPopup(createPopup(`Waypoint: ${index + 1}`));
                    marker.addTo(map);
                }

                // add marker for destination
                const destinationMarker = new mapvinagl.Marker(
                    {element: createMarkerElement('B', '#EA4335')}
                );
                destinationMarker.setLngLat(destinationLatLng);
                destinationMarker.setPopup(createPopup('Ending!'));
                destinationMarker.addTo(map);

                // Fetch route from MapVina Routing API
                const coordinates = [originLatLng, ...waypointsLatLng, destinationLatLng];
                const coordsString = coordinates.map(c => c.join(',')).join(';');
                const url = `https://maps.mapvina.com/route/v1/car/${coordsString}?overview=full&geometries=geojson&key=public_key`;

                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        if (data.routes && data.routes.length > 0) {
                            const route = data.routes[0].geometry;
                            map.addSource('route', {
                                'type': 'geojson',
                                'data': {
                                    'type': 'Feature',
                                    'properties': {},
                                    'geometry': route
                                }
                            });

                            // Add a line casing for premium look
                            map.addLayer({
                                'id': 'route-casing',
                                'type': 'line',
                                'source': 'route',
                                'layout': {
                                    'line-join': 'round',
                                    'line-cap': 'round'
                                },
                                'paint': {
                                    'line-color': '#2d5f99',
                                    'line-width': 8
                                }
                            });

                            // Add the actual route line
                            map.addLayer({
                                'id': 'route-line',
                                'type': 'line',
                                'source': 'route',
                                'layout': {
                                    'line-join': 'round',
                                    'line-cap': 'round'
                                },
                                'paint': {
                                    'line-color': '#4882c5',
                                    'line-width': 4
                                }
                            });

                            // Fit map to route bounds
                            const bounds = coordinates.reduce(function(bounds, coord) {
                                return bounds.extend(coord);
                            }, new mapvinagl.LngLatBounds(coordinates[0], coordinates[0]));

                            map.fitBounds(bounds, {
                                padding: 50
                            });
                        }
                    });
            });
        </script>
    </body>

</html>