0

我有以下脚本，并希望显示标记的 XML 文件中的名称而不是位置。

var map, iw, timer;
var glob = {
    marks: [],
    polies: []
};
var $id = function (a) {
    return document.getElementById(a)
};
var $make = function (a, b, d) {
    var c = document.createElement(a);
    if (b) c.id = b;
    if (d) c.className = d;
    return c
};

function normalize() {
    for (var a = 0, b; b = glob.marks[a]; a++) {
        if (b.iw_open) {
            b.iw_open = false;
            b.setIcon(icon(b.col));
            $id("member" + a).previousSibling.style.backgroundPosition = "-33px 0"
        }
    }
}

function getWindowSize() {
    var a, b;
    if (typeof (window.innerWidth) == "number") {
        a = window.innerWidth;
        b = window.innerHeight
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        a = document.documentElement.clientWidth;
        b = document.documentElement.clientHeight
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        a = document.body.clientWidth;
        b = document.body.clientHeight
    }
    return {
        width: a,
        height: b
    }
}

function fitBounds(a) {
    var b = new google.maps.LatLngBounds();
    for (var d = 0, c; c = glob.marks[d]; d++) {
        if (c.col == a) {
            b.extend(c.getPosition())
        }
    }
    map.fitBounds(b)
}

function zoomToGroup(a, b, d) {
    var c = document.forms["f" + a].elements[0];
    if (!c.checked) {
        c.click()
    } else {
        fitBounds(b)
    }
}

function icon(a, b) {
    var d = google.maps;
    var c = "http://maps.gstatic.com/mapfiles/ms/icons/" + a + "-dot.png";
    var f;
    if (b) {
        f = {
            url: c,
            size: new d.Size(38, 39),
            anchor: new d.Point(18, 39),
            scaledSize: new d.Size(38, 39)
        }
    } else {
        f = {
            url: c,
            size: new d.Size(32, 32),
            anchor: new d.Point(15, 32)
        }
    }
    return f
}

function createPoly(a, b) {
    var d = [];
    var c = {
        "red": ["#FF3300", "#FF7777"],
        "green": ["#006600", "#CC9900"],
        "blue": ["#3355FF", "#335599"]
    };
    for (var f = 0, g; g = glob.marks[f]; f++) {
        if (g.col == a) {
            d.push(g.getPosition())
        }
    }
    var h = new google.maps.Polygon({
        path: d,
        map: map,
        strokeColor: c[a][0],
        strokeOpacity: .2,
        strokeWeight: 3,
        fillColor: c[a][1],
        fillOpacity: .2
    });
    h.setVisible(false);
    h.col = a;
    glob.polies.push(h)
}

function mouseEvents(b, d) {
    var c = $id("member" + d);
    var f = c.previousSibling;
    var g = {
        "red": "0 0",
        "green": "-11px 0",
        "blue": "-22px 0"
    };
    c.onmouseover = function () {
        var a = glob.marks[d];
        if (!a.iw_open) {
            timer = setTimeout(function () {
                f.style.backgroundPosition = g[b];
                a.setIcon(icon(b, 1))
            }, 180)
        }
    };
    c.onmouseout = function () {
        var a = glob.marks[d];
        if (timer) clearTimeout(timer);
        if (!a.iw_open) {
            setTimeout(function () {
                f.style.backgroundPosition = "-33px 0";
                a.setIcon(icon(b))
            }, 180)
        }
    }
}

function createMarker(b, d, c, f, g, h) {
    var i = google.maps;
    var m = "http://maps.gstatic.com/mapfiles/";
    var j = {
        "red": "0 0",
        "green": "-11px 0",
        "blue": "-22px 0"
    };
    var k = {
        url: m + "ms/icons/" + g + "-dot.png",
        size: new i.Size(32, 32),
        anchor: new i.Point(15, 32)
    };
    var r = {
        url: m + "kml/paddle/A_maps.shadow.png",
        size: new i.Size(59, 32),
        anchor: new i.Point(15, 32)
    };
    var l = new i.Marker({
        position: b,
        map: map,
        clickable: true,
        icon: k,
        shadow: r,
        title: d
    });
    l.setVisible(false);
    l.col = g;
    l.loc = d;
    glob.marks.push(l);
    i.event.addListener(l, "click", function () {
        var a = "<div class='iw'><b>" + c + "<\/b><p>" + f + "<br \/>" + d + "<\/p><\/div>";
        iw.setContent(a);
        iw.open(map, this);
        normalize();
        glob.marks[h].iw_open = true;
        this.setIcon(icon(g, 1));
        $id("member" + h).previousSibling.style.backgroundPosition = j[g]
    });
    return l
}

function readData() {
    var t = "http://maps.gstatic.com/mapfiles/ms/icons/";
    var n;
    try {
        if (typeof ActiveXObject != "undefined") {
            n = new ActiveXObject("Microsoft.XMLHTTP")
        } else if (window["XMLHttpRequest"]) {
            n = new XMLHttpRequest()
        }
    } catch (e) {}
    n.open("GET", "http://3d-car-shows.com/wp-content/uploads/gmaps/groups-data.xml", true);
    n.onreadystatechange = function () {
        if (n.readyState == 4) {
            var a = n.responseXML;
            var b = a.documentElement.getElementsByTagName("marker");
            for (var d = 0, c; c = b[d]; d++) {
                var f = parseFloat(c.getAttribute("lat"));
                var g = parseFloat(c.getAttribute("lng"));
                var h = new google.maps.LatLng(f, g);
                var i = c.getAttribute("loc");
                var m = c.getAttribute("addr");
                var j = c.getAttribute("nr");
                var k = c.getAttribute("name");
                var r = c.getAttribute("group");
                createMarker(h, i, k, m, r, d)
            }
            var l = a.documentElement.getElementsByTagName("group");
            for (var p = 0, o; o = l[p]; p++) {
                var k = o.getAttribute("name");
                var q = o.getAttribute("color");
                var j = o.getAttribute("nr");
                var u = o.getAttribute("members");
                var s = $make("div", j);
                s.style.marginTop = "20px";
                s.innerHTML = "<form id=" + 'f' + p + "><input type='checkbox' onclick='toggleGroup(\"" + q + "\", \"" + j + "\", this.checked)'><img style='vertical-align: middle' src=" + t + q + "-dot.png>&nbsp;<a href='#' onclick=\"zoomToGroup(" + p + ", '" + q + "', '" + j + "');return false;\"><b>" + k + "<\/b><\/a> (" + u + ")<\/form>";
                $id("listing").appendChild(s);
                createPoly(q, j)
            }
        }
    };
    n.send(null)
}

function myresize() {
    $id("gmap").style.height = getWindowSize().height - 70 + "px";
    $id("allpanelCards").style.height = getWindowSize().height - 123 + "px";
    if (document.all) google.maps.event.trigger(map, "resize")
}

function init() {
    $id("allpanelCards").style.height = getWindowSize().height - 123 + "px";
    var a = $id("gmap");
    a.style.height = getWindowSize().height - 70 + "px";
    var b = google.maps;
    var d = new b.LatLng(-26.245325, 27.982386);
    var c = {
        zoom: 16,
        center: d,
        scaleControl: true,
        streetViewControl: true,
        draggableCursor: 'auto',
        mapTypeId: b.MapTypeId.ROADMAP,
        overviewMapControl: true,
        overviewMapControlOptions: {
            opened: false
        }
    };
    map = new b.Map(a, c);
    iw = new b.InfoWindow();
    b.event.addListener(iw, "closeclick", function () {
        normalize()
    });
    b.event.addListener(map, "click", function () {
        normalize();
        iw.close()
    });
    var f = $id("minimize");
    map.getDiv().appendChild(f);
    var g = $id("addr");
    var h = new b.places.Autocomplete(g);
    if (document.all) a.onresize = myresize;
    readData()
}

function triggerClick(a) {
    google.maps.event.trigger(glob.marks[a], "click")
}

function toggleGroup(a, b, d) {
    var c = $id(b);
    if (d) fitBounds(a);
    for (var f = 0, g; g = glob.marks[f]; f++) {
        if (g.col == a) {
            g.setVisible(d);
            if (d) {
                var h = $make("p", null, a);
                h.innerHTML = "<span class='circle'><\/span><a class='memberlink' id='member" + f + "' href='javascript:triggerClick(" + f + ")'>" + g.loc + "<\/a>";
                c.appendChild(h);
                mouseEvents(a, f)
            } else {
                normalize();
                for (var i = 0, m; m = c.getElementsByTagName("p")[i]; i++) {
                    c.removeChild(m)
                }
                iw.close()
            }
        }
    }
    for (var j = 0, k; k = glob.polies[j]; j++) {
        if (k.col == a) {
            k.setVisible(d)
        }
    }
}

function togglePanel(a) {
    var b = $id("minimize"),
        d = $id("leftpanel"),
        c = $id("gmap"),
        f = $id("panel-foot"),
        g = map.getCenter();
    if (a == "left") {
        b.style.display = "block";
        d.className = "hidden";
        c.style.marginLeft = "0";
        f.style.display = "none"
    } else {
        b.style.display = "none";
        d.className = "";
        c.style.marginLeft = "374px";
        f.style.display = "block"
    }
    google.maps.event.trigger(map, "resize");
    map.setCenter(g)
}

function flipTab(a) {
    var b = $id("panel-tabs").getElementsByTagName("span");
    var d = ["listing", "favorites", "mysearches"];
    for (var c = 0, f, g; g = d[c], f = b[c]; c++) {
        $id(g).style.display = (a == g) ? "block" : "none";
        f.style.backgroundColor = (a == g) ? "#e7e7e7" : "#f5f5f5"
    }
}

function showAddress(d) {
    var c = google.maps;
    var f = new c.Geocoder();
    f.geocode({
        'address': d
    }, function (a, b) {
        if (b == c.GeocoderStatus.OK) {
            map.setCenter(a[0].geometry.location);
            map.setZoom(10)
        } else {
            alert(d + " not found: " + b)
        }
    })
}
window.onload = init;
window.onresize = myresize;

这是 XML 文件

<?xml version="1.0" encoding="UTF-8"?>
<entries>
  <group members="2" color="red" name="Virtual Tours" nr="g1"/>
  <marker name="Johannesburg Boat Show 2013" nr="m1" group="red" lng="27.982386" lat="-26.245325" addr="Nasrec Road, Johannesburg, Gauteng, South Africa" loc="Nasrec Road, Johannesburg, South Africa"/>
  <marker name="Amid Motorcycle Show" nr="m2" group="red" lng="27.982852" lat="-26.244955" addr="Nasrec Road 1, Johannesburg, Gauteng, South Africa" loc="Nasrec Road, Johannesburg, South Africa"/>
</entries>

到目前为止，我已经确定这一行设置了 Google 自定义地图上的信息框，其中变量 c = 标记名称。

i.event.addListener(l,"click",function(){var a="<div class='iw'><b>"+c+"<\/b><p>"+f+"<br \/>"+d+"<\/p><\/div>";

我还发现这个值设置了侧边栏中的链接

h.innerHTML="<span class='circle'><\/span><a class='memberlink' id='member"+f+"' href='javascript:triggerClick("+f+")'>"+g.loc+"<\/a>";

我尝试将变量替换g.loc为c没有任何成功。

如何更改变量以显示xml 文件g.loc中的 XML 值（标记）？name

这是我使用脚本Google Maps Sidebar Example的页面的链接

4

0 回答 0