làm thế nào để sử dụng api bản đồ google với greasemonkey để đọc một bảng địa chỉ và theo dõi các tuyến đường?

Question

Có một trang web chứa các tuyến xe buýt cho thành phố của tôi (Porto Alegre - Brazil) trong một bảng.

ví dụ: EPTC

Sử dụng Greasemonkey để tải de Google Maps API, id muốn hiển thị Bản đồ cố định ở góc trên cùng bên phải của screeen.

Tập lệnh phải đọc tên đường phố từ bảng, bỏ các khoảng trống thừa (có nhiều khoảng trống) và vẽ đường theo đúng thứ tự.

Answer 1

Đây là kịch bản tương thích Greasemonkey để hoàn thành nhiệm vụ: http://userscripts.org/scripts/show/116339

Những điểm mấu chốt:

1- tìm bảng và vòng lặp qua từng tế bào để có được nội dung
2- dải tất cả các khoảng trắng thừa và lưu văn bản trong một mảng
3 - tạo hai DIV, một cái ở bên kia (nếu không vị trí sẽ không được sửa)
4 gắn DIV để trang và gọi API
5 "google" phải được gọi với unsafeWindow (google = unsafeWindow.google)

API_js_callback = "http://maps.google.com/maps/api/js?sensor=false&region=BR&callback=initialize"; 

var script = document.createElement('script'); 
    script.src = API_js_callback; 
    var head = document.getElementsByTagName("head")[0]; 
    (head || document.body).appendChild(script); 

if (document.getElementsByTagName('TABLE')[0] != null) { 
    var Tabela_1 = document.getElementsByTagName('TABLE')[0]; 
    var Tabela_1_cel = Tabela_1.getElementsByTagName('TD'); 
    var Tabela_1_lin = Tabela_1.getElementsByTagName('TR'); 
} 

if (document.getElementsByTagName('TABLE')[1] != null) { 
    var Tabela_2 = document.getElementsByTagName('TABLE')[1]; 
    var Tabela_2_cel = Tabela_2.getElementsByTagName('TD'); 
    var Tabela_2_lin = Tabela_2.getElementsByTagName('TR'); 
} 

var DIVmapa = document.createElement('div'); 
    DIVmapa.id = 'DIVmapa'; 
    DIVmapa.style.border = '2px coral solid'; 
    DIVmapa.style.cursor = 'pointer'; 
    DIVmapa.style.display = ''; 
    DIVmapa.style.height = '75%'; 
    DIVmapa.style.margin = '1'; 
    DIVmapa.style.position = 'fixed'; 
    DIVmapa.style.padding = '1'; 
    DIVmapa.style.right = '1%'; 
    DIVmapa.style.top = '1%'; 
    DIVmapa.style.width = '30%'; 
    DIVmapa.style.zIndex = '99'; 

var DIVinterna = document.createElement('div'); 
    DIVinterna.id = 'DIVinterna'; 
    DIVinterna.style.height = '100%'; 
    DIVinterna.style.width = '100%'; 
    DIVinterna.style.zIndex = '999'; 

if (Tabela_1 || Tabela_2) { 
    document.body.appendChild(DIVmapa); 
    DIVmapa.appendChild(DIVinterna); 
} 

initialize = setTimeout(function() { 
    google = unsafeWindow.google; 
    directionsService = new google.maps.DirectionsService(); 
    directionsDisplay = new google.maps.DirectionsRenderer(); 

    var PortoAlegre = new google.maps.LatLng(-30.034176,-51.229212); 
    var myOptions = { 
     zoom: 14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: PortoAlegre 
    } 

    map = new google.maps.Map(document.getElementById("DIVinterna"), myOptions); 
    directionsDisplay.setMap(map); 

    function calcRoute() { 
     var start = Tabela_1_cel[1].getElementsByTagName('B')[0].innerHTML.replace(/\s{2,}/g, ' ') + ' Porto Alegre'; 
     var end = Tabela_1_cel[10].getElementsByTagName('B')[0].innerHTML.replace(/\s{2,}/g, ' ') + ' Porto Alegre'; 
     var waypts = []; 
     //for (var i=1; i<Tabela_1_cel.length; i++) { 
     for (var i=2; i<10; i++) { 
      ponto_1 = Tabela_1_cel[i].getElementsByTagName('B')[0].innerHTML; 
      semespacos_1 = ponto_1.replace(/\s{2,}/g, ' ') + ' Porto Alegre'; 
      waypts.push({location: semespacos_1, stopover: true}); 
     } 

     var request = { 
      origin: start, 
      destination: end, 
      waypoints: waypts, 
      optimizeWaypoints: false, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
     }; 

     directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) {directionsDisplay.setDirections(response)}; 
      //alert(status); 
     }); 
    } 

    calcRoute(); 
}, 1000); 

Thưởng thức! :)