Problems with adding an event on a google maps v3

2019-08-25 05:02发布

问题:

This code below works fine in Chrome and IE 9. But breaks in IE 8.

The errant line is here. I think it's the bind.

google.maps.event.addListener(this.map, "click", (this.leftClick).bind(this));

Has anyone else had this problem? It's not clear if someone has this on SO.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style>
    html, body, #map
    {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }
</style>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&sensor=true" type="text/javascript"></script>
<script language="javascript">

    var MyPage = function () {
        this.map = null; //google map
    };

    MyPage.prototype.initialize = function () {
        this.map = new google.maps.Map(document.getElementById("map"),
        {
            zoom: 8,
            center: new google.maps.LatLng(30, -97),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        google.maps.event.addListener(this.map, "click", (this.leftClick).bind(this));
    }

    MyPage.prototype.leftClick = function (event) {
        alert('hi');
    }

    $(window).load(function(){
        var my = new MyPage();
        my.initialize();
    });

</script>
</head>
<body>
<div id="map"></div>
</body>
</html>

the bind Method is not supported in IE8 or below see http://msdn.microsoft.com/en-us/library/ff841995(v=vs.94).aspx