Javascript 如何使用GoogleMapsAPI和greasemonkey读取地址表并跟踪路由？

有一个网站将我所在城市（巴西）的公交线路放在一张表格中

例：

使用加载de，我想在屏幕右上角显示一个固定的地图

脚本必须从表中读取街道名称，去掉多余的空格（有很多空格），并按正确的顺序绘制路线

---

以下是与Greasemonkey兼容的脚本，用于完成任务：

要点：

1-找到表格并循环遍历每个单元格以获取内容
2-去掉所有多余的空格并将文本保存在数组中
3-创建两个div，一个在另一个内（否则位置将不固定）
4-将div附加到页面并调用API
5-“google”必须用unsafeWindow调用（

google=unsafeWindow.google

）

API_js_回调=”http://maps.google.com/maps/api/js?sensor=false®ion=BR&callback=initialize";
var script=document.createElement（'script'）；
script.src=API\u js\u回调；
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='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'；
如果（表1 | |表2）{
document.body.appendChild（DIVmapa）；
DIVmapa.appendChild（DIVinterna）；
}
初始化=设置超时（函数（）{
google=unsafeWindow.google；
directionsService=new google.maps.directionsService（）；
directionsDisplay=new google.maps.DirectionsRenderer（）；
var PortoAlegre=newgoogle.maps.LatLng（-30.034176，-51.229212）；
变量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'，）+'Porto Alegre'；
var end=Tabela_1_cel[10]。getElementsByTagName（'B'）[0]。innerHTML.replace（/\s{2，}/g'，）+'Porto Alegre'；
var-waypts=[]；
//对于（var i=1；ii）我想回答我自己的问题并发布代码，如下所述：，但我必须等待8个小时。
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);