javascript - 传单路线图方向

问题描述

我是传单地图的新手。我想创建一个路线方向的地图，如“ flixbus ”。我正在尝试创建像“ flixbus ”这样的传单路线图方向。我尝试了很多方法来创建像 flixbus 这样的地图，但我不能做到完美。我尽力了，但我不能对 flixbus 做同样的事情。我怎样才能做到这一点？请帮帮我。在下面查看我的代码：

var map = L.map('map', {
    center: [33.384439582098224, -104.52255249023438],
    zoomControl: false,
}).setView([33.384439582098224, -104.52255249023438], 8);

L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoidGFuYmlyYmQiLCJhIjoiY2s5OG0yZHdnMTc0eTNnbXVqY25vaXU0aCJ9.FJwTBFqYw1FOGFLzcyHBUw', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="http://mapbox.com">Mapbox</a>',}).addTo(map);
var control = L.Routing.control({
    // waypoints: waypointsData,
    routeWhileDragging: true,
    showAlternatives: false,
    reverseWaypoints: false,
    position:'topleft',
    geocoder: L.Control.Geocoder.nominatim,
    lineOptions: {
        styles: [
            { color: 'black', opacity: 0.15, weight: 9 },
            { color: 'white', opacity: 0.8, weight: 6 },
            { color: 'steelblue', opacity: 1, weight: 4 }
        ]
    },
    altLineOptions: {
        styles: [
            { color: 'black', opacity: 0.15, weight: 9 },
            { color: 'white', opacity: 0.8, weight: 6 },
            { color: 'hotpink', opacity: 1, weight: 4 }
        ]
    },

}).addTo(map);
var planes = [
    ['Roswell', 33.393131, -104.522758],
    ['Roswell UP', 33.687781758439364, -104.4580078125],
    ['LinCoin National Forest', 33.623768, -105.448152],
    ['Alamogordo', 32.953368, -105.965932],
    ['Ciudad Juarez', 31.541090, -106.493628],
    ['Aldo Leopold Wilderness', 33.136401, -107.869910],
];

for (var i = 0; i < planes.length; i++) {

    L.circleMarker([planes[i][1],planes[i][2]], {
        pane: 'markerPane',
        radius: 7,
        weight: 2,
        fillColor: '#89e321',
        fillOpacity: 1,
        className: 'circle-class-here'
    }).addTo(map).setStyle({color: '#ffffff'});

    var tooltip = L.tooltip({
        direction: 'top',
        permanent: true,
        interactive: true,
        noWrap: true,
        opacity: 1,
    }).setContent( planes[i][0] )
        .setLatLng(new L.LatLng(planes[i][1], planes[i][2]))
        .addTo(map);
    tooltip.getElement().style.cursor = 'pointer';
}
function createButton(label, container) {
    var btn = L.DomUtil.create('button', '', container);
    btn.setAttribute('type', 'button');
    btn.innerHTML = label;
    return btn;
}
map.on('click', function(e) {
    var container = L.DomUtil.create('div'),
        startBtn = createButton('Start from this location', container),
        destBtn = createButton('Go to this location', container);
    container.setAttribute('class', 'leaflet-popup-btn-box');
    L.popup()
        .setContent(container)
        .setLatLng(e.latlng)
        .openOn(map);
    L.DomEvent.on(startBtn, 'click', function() {
        control.spliceWaypoints(0, 1, e.latlng);
        map.closePopup();
    });
    L.DomEvent.on(destBtn, 'click', function() {
        control.spliceWaypoints(control.getWaypoints().length - 1, 1, e.latlng);
        map.closePopup();
    });
});

#map {
            width: 100%;
            height: 500px !important;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="author" content="Author">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.12/leaflet-routing-machine.css"/>
</head>
<body>
<section class="route-map-are bus-route-map-area">
    <div class="map-container">
        <div id="map" class="route-map"></div>
    </div><!-- end map-container -->
</section><!-- end route-map-area -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.12/leaflet-routing-machine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/perliedman-leaflet-control-geocoder/2.2.0/Control.Geocoder.min.js"></script>
</body>
</html>

请大家帮帮我:(

标签： javascriptleaflet

javascript - 传单路线图方向

问题描述

解决方案

推荐阅读