如何使用带有greasemonkey的谷歌地图api读取地址表并跟踪路线? [英] how to use the google maps api with greasemonkey to read a table of addresses and trace the route?

问题描述

有一个网站包含我所在城市的巴士路线(

要点:

1- 找到表格并遍历每个单元格以获取内容
2- 去除所有多余的空格并将文本保存在数组中
3-创建两个DIV，一个在另一个里面(否则位置不会固定)
4- 将 DIV 附加到页面并调用 API
5- 必须使用 unsafeWindow (google = unsafeWindow.google)

调用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 珊瑚色';DIVmapa.style.cursor = '指针';DIVmapa.style.display = '';DIVmapa.style.height = '75%';DIVmapa.style.margin = '1';DIVmapa.style.position = '固定';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';如果 (Tabela_1 || Tabela_2) {document.body.appendChild(DIVmapa);DIVmapa.appendChild(DIVinterna);}初始化 = 设置超时(函数(){谷歌 = unsafeWindow.google;路线服务 = 新的 google.maps.DirectionsService();方向显示 = 新 google.maps.DirectionsRenderer();var PortoAlegre = new google.maps.LatLng(-30.034176,-51.229212);var myOptions = {缩放:14，mapTypeId: google.maps.MapTypeId.ROADMAP,中锋:阿雷格里港}map = new google.maps.Map(document.getElementById("DIVinterna"), myOptions);方向显示.setMap(地图);函数 calcRoute() {var start = Tabela_1_cel[1].getElementsByTagName('B')[0].innerHTML.replace(/\s{2,}/g, ' ') + '阿雷格里港';var end = Tabela_1_cel[10].getElementsByTagName('B')[0].innerHTML.replace(/\s{2,}/g, ' ') + '阿雷格里港';var waypts = [];//for (var i=1; i

享受吧！:)

There is a website which holds the buses routes for my city (Porto Alegre - Brazil) in a table.

ex: EPTC

Using Greasemonkey to load de Google Maps API, id like to show a fixed map at the top right corner of the screeen.

The script must read the street names from the table, strip de extra spaces (there are a lot of them), and draw the route in the right order.

解决方案

Here is the Greasemonkey compatible script to accomplish the task: http://userscripts.org/scripts/show/116339

Key points:

1- find the table and loop through each cell to get the content
2- strip all the extra white spaces and save the text in an array
3- create two DIVs, one inside the other (otherwise the position will not be fixed)
4- append the DIVs to the page and call the API
5- "google" must be called with 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);

Enjoy! :)

这篇关于如何使用带有greasemonkey的谷歌地图api读取地址表并跟踪路线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！