2

我的网站上有一个显示标记和折线的 Google Maps v3。每组标记+折线都有自己的颜色（红色、黄色、蓝色等）。这在 FF/Chrome/Safari 中运行良好，但在 IE7/8 中运行良好（在 IE9 中运行良好）。

以下是 IE8/XP 中标记的样子：没有颜色的标记

标记应如下所示（在 Chrome 中）：带有颜色的标记

DevTool 或 Firebug Lite 中没有 js 错误。

这是我用来显示标记和折线的代码：

Maps = {
    googleMap: null,
    paths: [],
    wayPoints: null,
    colors: ["#00aeef", "#ec008c", "#41ad49", "#d2232a", "#fff200"],
    minZoomLevel: 2,

    init: function () {
        var mapOptions = {
          zoom: Maps.minZoomLevel,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        Maps.googleMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        google.maps.event.addListener(Maps.googleMap, 'zoom_changed', function() {
            if (Maps.googleMap.getZoom() < Maps.minZoomLevel)
                Maps.googleMap.setZoom(Maps.minZoomLevel);
        });
    },

    plotPaths: function (paths) {
        if (paths && paths.length === 0) {
            var latLng = new google.maps.LatLng(41.850033,-87.6500523);
            Maps.googleMap.setCenter(latLng);
            return;
        }

        Maps.paths = paths;
        //console.log(Maps.paths);
        Maps.wayPoints = [];
        for (pathIndex in Maps.paths) {
            Maps.wayPoints[pathIndex] = [];
        }

        for (pathIndex in Maps.paths) {
            for (addressIndex in Maps.paths[pathIndex]) {
                Maps.getLatLong(Maps.paths[pathIndex][addressIndex], pathIndex, Maps.addWaypoint);
            }
        }
    },

    addWaypoint: function(pathIndex, latLng, address) {
        // console.log("pathIndex: " + pathIndex);

        if (latLng === null) {
            Maps.googleMap.setCenter(new google.maps.LatLng(32.1574351, -82.90712300000001));
            return;
        }
        // console.log("callback - latLng: " + latLng.toString());

        Maps.wayPoints[pathIndex].push(latLng);

        if (Maps.wayPoints[pathIndex].length == Maps.paths[pathIndex].length) {
            if (typeof console !== "undefined") {
                console.log("Address: " + address);
                console.log(Maps.wayPoints[pathIndex]);
                console.log("Color: " + Maps.colors[pathIndex - 1]);
            }
            Maps.setShipmentPath(Maps.wayPoints[pathIndex], Maps.colors[pathIndex - 1]);
        }


        var marker = new google.maps.Marker({
            position: latLng,
            map: Maps.googleMap,
            title: address,
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: 4,
                fillColor: Maps.colors[pathIndex - 1],
                fillOpacity: 1.0,
                strokeColor: Maps.colors[pathIndex - 1]
            }
        });

        Maps.googleMap.setCenter(latLng);
    },

    setShipmentPath: function (wayPoints, color) {
        var lineSymbol = {
            path: 'M 0,-1 0,1',
            strokeOpacity: 1,
            scale: 4
        };

        var shipmentPath = new google.maps.Polyline({
            path: wayPoints,
            strokeColor: color,
            strokeOpacity: 0,
            strokeWeight: 10,
            geodesic: true,
            icons: [{
                icon: lineSymbol,
                offset: '0',
                repeat: '20px'
            }]
        });

        shipmentPath.setMap(Maps.googleMap);
    },

    getLatLong: function (address, pathIndex, callback) {
        // console.log("Address: " + address);

        var geocoder = new google.maps.Geocoder();
        geocoder.geocode(
            {'address': address},
            function(results, status) {
                var latLng = null;

                if (status !== google.maps.GeocoderStatus.OK) {
                    if (typeof console !== "undefined") {
                        console.log("Error!");
                        console.log(status);
                    }
                    return;
                }

                if (results && results.length > 0) {
                    // console.log("Formatted Address: " + results[0].formatted_address);
                    // console.log("Lat Long: " + results[0].geometry.location.toString());
                    latLng = results[0].geometry.location;

                    if (callback) {
                        callback(pathIndex, latLng, results[0].formatted_address);
                    }
                }
            }
        );
    }
};

其中函数中的路径plotPaths()是地址列表的二维数组。例如

var addresses = new Array();
addresses["1"] = ["London  UK EC1", "Paris  FR "];
addresses["2"] = ["Vancouver BC CA "];
addresses["3"] = ["Melborne Vic AU "];
addresses["4"] = ["Cape Town  ZA "];
addresses["5"] = ["Tokyo  JP ", "Seoul Seoul KR 9199"];
4

1 回答 1

0

对我来说，它最终成为这行代码：

<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

在我的 HTML 标题的顶部。

于 2012-10-15T14:46:54.923 回答