Question

通过运行此代码，我在Chrome和IE中出现以下控制台错误，未显示任何控制台错误..它适用于Firefox。

 **Console Error Message in Chrome Only**
 //Image from origin 'file://' has been blocked from 
 //  loading by Cross-Origin Resource Sharing policy: 
 //  Invalid response. Origin 'null' is therefore not allowed access.

请提供任何指导，任何缺少属性以使用chrome

        <!--https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>simple markers Example in gMaps</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false">     </script>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<style>
#map_canvas { 
border:1px solid black;
height: 400px;
width: 100%;
border-radius: 4px;
}
</style>
</head>
<body>
    <div id="map_canvas"></div>
</body>
<script>

 var RotateIcon = function(options){
        this.options = options || {};
        this.rImg = new Image();
        this.rImg.setAttribute('crossOrigin', 'anonymous');
    this.rImg.crossOrigin = 'Anonymous';

        this.rImg.src = this.rImg.src || this.options.url || '/static/groups/img/car_map_state_go.png';
        this.options.width = this.options.width || this.rImg.width || 52;
        this.options.height = this.options.height || this.rImg.height || 60;
        canvas = document.createElement("canvas");
        canvas.width = this.options.width;
        canvas.height = this.options.height;
        this.context = canvas.getContext("2d");
        this.canvas = canvas;
    };

    RotateIcon.makeIcon = function(url) {
        return new RotateIcon({url: url});
    };

    RotateIcon.prototype.setRotation = function(options){
        var canvas = this.context,
            angle = options.deg ? options.deg * Math.PI / 180:
                options.rad,
            centerX = this.options.width/2,
            centerY = this.options.height/2;

        canvas.clearRect(0, 0, this.options.width, this.options.height);
        canvas.save();
        canvas.translate(centerX, centerY);
        canvas.rotate(angle);
        canvas.translate(-centerX, -centerY);
        canvas.drawImage(this.rImg, 0, 0);
        canvas.restore();
        return this;
    };

    RotateIcon.prototype.getUrl = function(){
        return this.canvas.toDataURL('image/png');
    };

    var map
    ,   markers = []
    ,   center = new google.maps.LatLng(45.4214, -75.6919)

    function init() {
        map = new google.maps.Map(document.getElementById('map_canvas'), {
            zoom: 8,
            center: center,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });


        for (var i = 0; i < 50; i++) {
            markers[i] = new google.maps.Marker({
                position: {lat:center.lat() + Math.random() - 1.0, lng:center.lng() + Math.random() - 0.9},
                map: map,
                html: 'jsdlkf',label: {
          text: "X",
          fontWeight: "bold"
        }
            });
        }

        var firstTime = false;
        setTimeout(function() {
            for (var i = 0; i < 50; i++) {
                var degree = parseInt(i % 2) === 0 ? 45 : parseInt(i % 3) === 0 ? 90 : 180; 
                markers[i].setOptions({
                  icon: RotateIcon.makeIcon("driverTethered.png")
                  .setRotation({deg: degree})
                  .getUrl()
                })
            }
        }, 100);
    }
    init();
    </script>
    </html>

Chrome不允许资源访问，而firefox工作正常

0 个答案: