Question

我试图在你点击航点时甚至从航线上的起点和终点点击弹出窗口。所以简单来说，如果你有A，B和C点，我需要弹出所有A，B和c标记。

我试过这个但是到目前为止我只管理过一个标记而不是所有标记所以让我知道我们怎么能这样做.......

这是我的代码：

    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="<?php echo PLUGINS_DIR;?>leaflet_routing_machine/dist/leaflet-routing-machine.js"></script>
<script src="<?php echo PLUGINS_DIR;?>leaflet_control_geocoder/Control.Geocoder.js"></script>

    <script>

    var map = L.map('mapid').setView([-36.85625, 174.76141], 5);

L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all//{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',

    id: 'mapbox.streets'
}).addTo(map);

var geocoder = L.Control.Geocoder.nominatim(),
    routeControl = L.Routing.control({
    geocoder: geocoder,
  routeWhileDragging: false,
}).addTo(map),
    waypoints = [];

geocoder.geocode('94 Dominion Road, Mount Eden Auckland', function(a, b) {
    // depending on geocoder results may be either in a or b 
   // console.log(a);
    // choose the best result here. probably the first one in array
    var point = a[0];
    // create waypoint object
    var wpt = L.Routing.waypoint(L.latLng(point.center.lat, point.center.lng), point.name)
    waypoints.push(wpt);
  routeControl.setWaypoints(waypoints);

  var marker_first = L.marker([point.center.lat, point.center.lng], {
      draggable: false
    }).addTo(map);
    marker_first.bindPopup('<strong>Journey Start:</strong>94 Dominion Road, Mount Eden Auckland');
})

geocoder.geocode('5 Flower Street, Eden Terrace, Auckland', function(a, b) {
    // depending on geocoder results may be either in a or b 
    //console.log(a);
    // choose the best result here. probably the first one in array
    var point = a[0];
    // create waypoint object
    var wpt = L.Routing.waypoint(L.latLng(point.center.lat, point.center.lng), point.name)
    waypoints.push(wpt);

  routeControl.setWaypoints(waypoints);
  var marker_second = L.marker([point.center.lat, point.center.lng], {
      draggable: false
    }).addTo(map);
    marker_second.bindPopup('<strong>Waypoint:</strong>5 Flower Street, Eden Terrace, Auckland');
/*  var popup = L.popup()
   .setLatLng(L.latLng(point.center.lat, point.center.lng))
    .setContent('<p>Hello world!<br />This is a nice popup.</p>')
    .addTo(map);*/
}) 


geocoder.geocode('280 Queen Street, Auckland 1010', function(a, b) {
    // depending on geocoder results may be either in a or b 
    //console.log(a);
    // choose the best result here. probably the first one in array
    var point = a[0];
    // create waypoint object
    var wpt = L.Routing.waypoint(L.latLng(point.center.lat, point.center.lng), point.name)
    waypoints.push(wpt);
  routeControl.setWaypoints(waypoints);
  var marker_third = L.marker([point.center.lat, point.center.lng], {
      draggable: false
    }).addTo(map);
    marker_third.bindPopup('<strong>End Journey:</strong>280 Queen Street, Auckland 1010');

})
//.on('click', function(e) { console.log("hello"); });
    </script>

小提琴上的任何正在运行的代码都会非常有用，但是如果你可以编辑我的代码并使其工作，即使这对我帮助很大。非常感谢你的进步。

Answer 1

var message = ["Custom <strong>mesage1</strong>","Custom <strong>message2</strong>","Custom <strong>mesasge3</strong>"];
    var geocoder = L.Control.Geocoder.nominatim(),
    routeControl = L.Routing.control({
     plan: L.Routing.plan(waypoints, {
                createMarker: function(i, wp) {
                    if(waypoints[0]) {
                        return L.marker(wp.latLng, {
                        draggable: false
                    }).bindPopup(message[i]).openPopup();

                    }

                },
    geocoder: geocoder,
  routeWhileDragging: false
  })
}).addTo(map),
    waypoints = [];

所以基本上，我从堆叠中的一个天才人那里得到了这个答案，只有这样才能让其他人能够解决，如果他们遇到这个问题......哈哈：）

如何使用传单路由机在路标标记上添加弹出窗口，包括开始和结束？

1 个答案: