如何使用传单路由机在路标标记上添加弹出窗口，包括开始和结束？ [英] How to add popup on waypoints markers including start and end using leaflet routing machine?

问题描述

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

I am trying to put the popup when you click on the waypoint or even from start and end points on the route. So in simple words if you have point A, B and C and I need popup on all those A, B and c Markers.

我试过这个但是到目前为止我我只管理一个标记，而不是全部，所以让我知道我们如何做到这一点.......

I have tried this but so far I have manage on only one marker and not the all so let me know how we can do this.......

这是我的代码：

    <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>

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

Any running code on fiddle would be very helpful but if you can edit my code and make it work even that's help me a lot. Thank you so much in advanced.

推荐答案

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 = [];

所以基本上，我从堆叠中的一个天才人那里得到了这个答案如果他们遇到这个问题，其他任何人都可以解决......哈哈：）

So basically, I got this answer from one of the genius person on the stack and only point of doing this is so that anyone else can resolve if they come across to this issue......haha:)

这篇关于如何使用传单路由机在路标标记上添加弹出窗口，包括开始和结束？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！