Javascript谷歌地图更改图标

Javascript Google Maps Changing Icons

本文关键字:图标 谷歌地图 Javascript      更新时间:2023-09-26

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

打开的第一个窗口都是正确的,但第二次点击窗口会打开,但唯一正确的是点信息Lat&Lng如果我把couston图标移回默认值,一切都会正常工作。我在一个网站上找到了这些信息,并试图将其复制到我的脚本中。我只是在学习javascript,我不确定哪里错了。

日期时间转换速度和路线在第一个窗口上都可以,但在点击窗口上失败了,图标现在是蓝色的,如果我从语句var marker=createMarker(point,customIcons[call])中删除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;
}

看起来您正在使用Google Map API的V2(哪种是旧的)。在这个版本中,您试图传递给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