如何在航點標記上添加彈出窗口，包括使用傳單路由機器的開始和結束？

Question

我試圖在點擊航點或甚至從路線上的起點和終點點擊彈出窗口。所以用簡單的話來說，如果你有A，B，C和A點，我需要在所有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 = []; 

所以基本上，我從棧和這樣做的只有一點上天才的人之一這個答案讓其他人可以解決，如果他們遇到這個問題......哈哈:)