Javascript 谷歌地图更改图标

Question

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

打开的第一个窗口都是正确的，但是第二次单击窗口会打开，但唯一正确的是纬度和经度的点信息，如果我将 couston 图标恢复为默认值，则一切正常。我在一个网站上找到了该信息并试图将其复制到我的脚本中。我只是在学习 javascript，我不知道我什么时候错了。

日期时间替代速度和课程在第一个窗口上都可以，但在点击窗口时失败，图标现在是蓝色的，如果我从语句 var marker = createMarker(point,customIcons[称呼]）;并用 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;
}

Answer 1

看起来您正在使用 V2 的 Google Map API（哪种旧）。在此版本中，您尝试传递给 GMarker 的第二个参数应该是 GMarkerOptions 而不是 GIcon（假设 API 版本 2.5+）

从您的代码中，我认为您正在尝试从 customIcons[] 传递 GIcon 对象，其中不正确。我认为你应该在这里检查datetime 对象，以确保它是GmarkerOptions 而不是GIcon

var marker = new GMarker(point, datetime);

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