0

我试图在谷歌地图的几个位置绘制 pi 图表。我想出了一个代码，它使用 for 循环在多个位置绘制饼图。我需要向所有饼图添加一个点击事件，以显示一个带有饼图详细信息的窗口。但是 on click 事件运行不正常。谁能帮我解决这个问题。以下是我尝试使用的代码。

<html>
<head>
    <link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
    <script  src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.10&sensor=false&.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi?.js"></script>
    <script type="text/javascript">
        google.load( 'visualization', '1', { packages:['corechart'] });
        ChartMarker.prototype = new google.maps.OverlayView;
        ChartMarker.prototype.onAdd = function() {
            $( this.getPanes().overlayMouseTarget ).append( this.$div );
        };

        ChartMarker.prototype.onRemove = function() {
            this.$div.remove();
        };

        ChartMarker.prototype.draw = function() {
            var marker = this;
            var projection = this.getProjection();
            var position = projection.fromLatLngToDivPixel( this.get('position') );

            this.$div.css({
                left: position.x,
                top: position.y,
                display: 'block'
            })

            this.$inner
                    .html( '<img src="' + this.get('image') + '"/>' )
                    .click( function( event ) {
                        var events = marker.get('events');
                        events && events.click( event );
                    });

            this.chart = new google.visualization.PieChart( this.$inner[0] );
            this.chart.draw( this.get('chartData'), this.get('chartOptions') );
        };


        function drawChart(marker, data, event, location) {


            var options = {'title':'Event : '+event+'  Location : '+location,
                'width':400,
                'height':150,
                slices: {0: {color: 'orange'}, 1:{color: 'green'}, 2:{color: 'yellow'}, 3: {color: 'blue'}, 4:{color: 'red'}}};

            var node        = document.createElement('div'),
                    infoWindow  = new google.maps.InfoWindow(),
                    chart       = new google.visualization.PieChart(node);
            chart.draw(data, options);
            infoWindow.setContent(node);
            infoWindow.open(marker.getMap(),marker);
        }
        function ChartMarker( options ) {
            this.setValues( options );
            this.$inner = $('<div>').css({
                position: 'relative',
                left: '-50%', top: '-50%',
                width: options.width,
                height: options.height,
                fontSize: '1px',
                lineHeight: '1px',
                padding: '2px',
                backgroundColor: 'transparent',
                cursor: 'default'
            });
            this.$div = $('<div>')
                    .append( this.$inner )
                    .css({
                        position: 'absolute',
                        display: 'none'
                    });
        };
        function drawPieCharts(map,latlang){
            var data = google.visualization.arrayToDataTable([
                [ 'Task', 'Hours per Day' ],
                [ 'Work', 11 ],
                [ 'Eat', 2 ],
                [ 'Commute', 2 ],
                [ 'Watch TV', 2 ],
                [ 'Sleep', 7 ]
            ]);
            var options = {
                fontSize: 8,
                backgroundColor: 'transparent',
                legend: {position: 'none'}
            };
            var marker = new ChartMarker({
                map: map,
                position: latlang,
                width: '250px',
                height: '100px',
                chartData: data,
                chartOptions: options,
                events: {
                    click: function( event ) {
                        drawChart(marker,data)
                    }
                }
            });
        }
        function initialize() {
            var latLng = new google.maps.LatLng(-33.890542, 151.274856)
            var markers = [
                [ -33.890542, 151.274856, 50,40,21,40],
                [-33.923036, 151.259052, 67,89,23,67],
                [-34.028249, 151.157507, 45,67,23,90],
                [-33.80010128657071, 151.28747820854187,456,234,789,90],
                [-33.950198, 151.259302,456,34,90,23]
            ];
            var mapOptions = {
                center: latLng,
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"),
                    mapOptions);
            for(var k=0;k<markers.length;k++){
                var location = new google.maps.LatLng(markers[k][0],markers[k][1])
                var data = google.visualization.arrayToDataTable([
                    [ 'Task', 'Hours per Day' ],
                    [ 'Work', markers[k][2] ],
                    [ 'Eat', markers[k][3] ],
                    [ 'Commute',markers[k][4] ],
                    [ 'Watch TV', markers[k][5] ],
                    [ 'Sleep', markers[k][6] ]
                ]);
                var options = {
                    fontSize: 8,
                    backgroundColor: 'transparent',
                    legend: {position: 'none'}
                };
                var marker = new ChartMarker({
                    map: map,
                    position: location,
                    width: '250px',
                    height: '100px',
                    chartData: data,
                    chartOptions: options,
                    events: {
                        click: function( event ) {
                            drawChart(marker,data)
                        }
                    }
                });
            }
        };
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body >
<div id="map_canvas" style="width: 900px; height: 500px;"></div>
</body>
</html>
4

1 回答 1

1

主要问题是：

var marker = new ChartMarker({
                    map: map,
                    position: location,
                    width: '250px',
                    height: '100px',
                    chartData: data,
                    chartOptions: options,
                    events: {
                        click: function( event ) {
                            drawChart(marker,data)
                        }
                    }
                });

在循环内部，您覆盖marker并 data在每次迭代时，因此传递给的参数drawChart将始终是相同的参数（在最后一次迭代中创建）。

使用带有闭包的匿名函数来避免它：

(function(location,data){
    var marker = new ChartMarker({
                        map: map,
                        position: location,
                        width: '250px',
                        height: '100px',
                        chartData: data,
                        chartOptions: options,
                        events: {
                            click: function( event ) {
                                drawChart(marker,data)
                            }
                        }
                    });

})(location,data);
于 2013-08-22T13:44:25.910 回答