Javascript谷歌地图更改图标

时间:2012-01-28 04:10:29

标签: javascript google-maps

我一直在玩谷歌地图,但是当我尝试将图标更改为蓝色时,我在弹出的窗口中丢失了一些信息。

打开的第一个窗口都是正确的,但是第二次点击窗口会打开,但唯一正确的是Lat& amp; Lng如果我将couston Icon移回默认设置就可以了。我在网站上找到了这些信息并尝试将其复制到我的脚本中。我只是在学习javascript而且我不确定我哪里错了。

日期时间alt速度和路线在第一个窗口都没问题但在点击窗口上失败,图标现在是蓝色,如果我从语句var marker = createMarker(point,customIcons []中删除customIcons [call]呼叫]);并用datetime替换它似乎工作。我感谢所有人,如果您认为有什么可能会有所帮助,请告知。

我的剧本......

function load() {
    if (GBrowserIsCompatible()) {

        // Get map (Version 2)
        var map = new GMap2(document.getElementById("map"));
        map.setUIToDefault();
        // Default user interface
        var icon = new GIcon();
        icon.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
        icon.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
        icon.iconSize = new GSize(12, 20);
        icon.shadowSize = new GSize(22, 20);
        icon.iconAnchor = new GPoint(6, 20);
        icon.infoWindowAnchor = new GPoint(5, 1);

        var customIcons = [];
        customIcons["VE9SC-9"] = icon;

        // Get course
        GDownloadUrl("http://guardian.no-ip.org/track/phpsqlajax_genxml_track_25.php",
        function(data) {
            var xml = GXml.parse(data);
            var markers =
            xml.documentElement.getElementsByTagName("marker");
            var points = new Array(0);
            // For polyline
            // Loop through the markers
            for (var i = 0; i < markers.length; i++) {
                var datetime = markers[i].getAttribute("datetime");
                var speed = markers[i].getAttribute("speed");
                var course = markers[i].getAttribute("course");
                var alt = markers[i].getAttribute("alt");
                var call = markers[i].getAttribute("call");
                var point =
                new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
                points[i] =
                new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
                var marker = createMarker(point, customIcons[call]);
                map.addOverlay(marker);
            }
            // End loop
            // Polyline
            var polyline = new GPolyline(points, "#0066cc", 2);
            map.addOverlay(polyline);
            // Set map centre (to last point), zoom level
            map.setCenter(point, 13);
            // InfoWindow HTML (last marker)
            var html = "";
            html += "<div id=\"infobox\">";
            html += "VE9SC-9";
            html += "<br />This is my last position on";
            html += "<br />" + datetime;
            html += " UTC";
            html += "<br />" + point;
            html += "<br />Aluitude ";
            html += +alt;
            html += " Feet ";
            html += "<br />" + speed;
            html += " MPH  Last Recorded Speed";
            html += "<br />" + course;
            html += " deg Last Recorded Course";
            html += "<br />ve9sc@rogers.com";
            html += "<br /><a href=\"/index.html\">ve9sc.no-ip.org</a></div>";
            html += "<br />Updated Via MySql PHP.";
            html += "</div>";
            map.openInfoWindowHtml(point, html);
        });
    }
}

// General markers
function createMarker(point, datetime) {
    var marker = new GMarker(point, datetime);

    var html = "";
    html += "<div id=\"infobox\">";
    html += "VE9SC-9";
    html += "<br />This is my position on";
    html += "<br />" + datetime;
    html += " UTC";
    html += "<br />" + point;
    html += "<br />Aluitude ";
    html += +alt;
    html += " Feet ";
    html += "<br />" + speed;
    html += " MPH  Last Recorded Speed";
    html += "<br />" + course;
    html += " deg Last Recorded Course";
    html += "<br />ve9sc@rogers.com";
    html += "<br /><a href=\"/index.html\">ve9sc.no-ip.org</a></div>";
    html += "<br />Updated Via MySql PHP.";
    html += "</div>";

    GEvent.addListener(marker, 'click',
    function() {
        marker.openInfoWindowHtml(html);
    });
    return marker;
}

1 个答案:

答案 0 :(得分:1)

看起来你正在使用谷歌地图API的V2(哪种旧的)。在此版本中,您尝试传递给GMarker的第二个参数应该是GMarkerOptions而不是GIcon(假设API版本2.5 +)

从您的代码中我认为您试图从GIcon传递customIcons[]对象,其中不正确。我认为您应该检查此处的datetime对象,以确保它是GmarkerOptions而不是GIcon

var marker = new GMarker(point, datetime);

http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GMarker