2016-05-09 5 views
1

ウェイポイントをクリックしたとき、またはルートの開始点と終了点からでもポップアップを表示しようとしています。あなたがポイント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> 

実行中のコードがあれば非常に役に立ちますが、自分のコードを編集してそれを動作させることができれば、私にとっては大いに役立ちます。そんなに進んでいただきありがとうございます。

答えて

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

だから基本的に、私はハハ......スタックと、彼らはこの問題に遭遇する場合、誰が解決できるように、これはあることの唯一のポイントに天才の人のいずれかからこの答えを得ました:)

関連する問題