Javascript 谷歌地图上的饼图_Javascript_Google Maps

Javascript 谷歌地图上的饼图

javascript google-maps

Javascript 谷歌地图上的饼图,javascript,google-maps,Javascript,Google Maps,我想在谷歌地图的几个位置上画一个饼图。有没有办法在谷歌地图中的特定位置绘制谷歌饼图来表示数据集（如特定位置/城镇的人口）我提出了一个解决方案，下面显示了我为在特定位置显示饼图图标而编写的代码。我还有一些其他要求，需要将事件侦听器添加到pi图表图标，以显示一个包含更详细饼图的窗口。我提出了下面的代码作为此需求的解决方案，但当单击图标时，它不会显示窗口。你能帮我找到这个问题吗 <html> <head> <link href="http://code.go

我想在谷歌地图的几个位置上画一个饼图。有没有办法在谷歌地图中的特定位置绘制谷歌饼图来表示数据集（如特定位置/城镇的人口）

我提出了一个解决方案，下面显示了我为在特定位置显示饼图图标而编写的代码。我还有一些其他要求，需要将事件侦听器添加到pi图表图标，以显示一个包含更详细饼图的窗口。我提出了下面的代码作为此需求的解决方案，但当单击图标时，它不会显示窗口。你能帮我找到这个问题吗

<html>
<head>
    <link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">
    <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" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        google.load( 'visualization', '1', { packages:['corechart'] });

        function drawChart(marker, data) {


            var options = {'title':'Perception Analysis '+
                    marker.getPosition().toString(),
                'width':400,
                'height':150};

            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'
                    });
        };

        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 initialize() {
            var latLng = new google.maps.LatLng( 40.708762, -74.006731 );
            var mapOptions = {
                center: latLng,
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("map_canvas"),
                    mapOptions);

            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: latLng,
                width: '250px',
                height: '100px',
                chartData: data,
                chartOptions: options,
                events: {
                    click: function( event ) {
                        drawChart(this,data)
                    }
                }
            });

        };

    </script>
</head>

<body onload="initialize()">

<div id="map_canvas" style="width: 900px; height: 500px;"></div>
</body>
</html>


load（'visualization'，'1'，{packages:['corechart']}）；
功能绘图图（标记、数据）{
var options={'title'：'Perception Analysis'+
marker.getPosition（）.toString（），
“宽度”：400，
‘高度’：150}；
var node=document.createElement（'div'），
infoWindow=新建google.maps.infoWindow（），
chart=新的google.visualization.PieChart（节点）；
图表绘制（数据、选项）；
infoWindow.setContent（节点）；
打开（marker.getMap（），marker）；
}
功能图表标记（选项）{
此选项。设置值（选项）；
此.$inner=$（''）.css({
位置：'相对'，
左：“-50%”，上：“-50%”，
宽度：options.width，
高度：options.height，
fontSize:'1px'，
线宽：“1px”，
填充：“2px”，
背景色：“透明”，
光标：“默认值”
});
此.$div=$（''）
.append（此.$inner）
.css({
位置：'绝对'，
显示：“无”
});
};
ChartMarker.prototype=new google.maps.overlyview；
ChartMarker.prototype.onAdd=函数（）{
$（this.getPanes（）.overlyMouseTarget）.append（this.getPanes（）.overlyMouseTarget）；
};
ChartMarker.prototype.onRemove=函数（）{
此.$div.remove（）；
};
ChartMarker.prototype.draw=函数（）{
var标记=这个；
var projection=this.getProjection（）；
var position=projection.fromlantnodivpix（this.get（'position'）；
这是$div.css({
左：位置.x，
顶部：位置y，
显示：“块”
})
这是内线
.html（“”）
。单击（功能（事件）{
var events=marker.get（'events'）；
事件&事件。单击（事件）；
});
this.chart=新的google.visualization.PieChart（this.$inner[0]）；
this.chart.draw（this.get（'chartData'）、this.get（'chartOptions'）；
};
函数初始化（）{
var latLng=新的google.maps.latLng（40.708762，-74.006731）；
变量映射选项={
中心：拉特林，
缩放：15，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
var data=google.visualization.arrayToDataTable([
[“任务”，“每天工作小时数”]，
[‘工作’，11]，
[Eat'，2]，
[‘通勤’，2]，
[“看电视”，2]，
[Sleep'，7]
]);
变量选项={
字体大小：8，
背景色：“透明”，
图例：{位置：'none'}
};
var标记=新的图表标记({
地图：地图，
位置：latLng，
宽度：'250px'，
高度：“100px”，
图表数据：数据，
图表选项：选项，
活动：{
单击：功能（事件）{
绘图图（此，数据）
}
}
});
};

如果您谈论的是用绘制的饼图，则可以使用自定义HTML覆盖，如：

google.load（'visualization'，'1'，{packages:['corechart']}）；
功能图表标记（选项）{
此选项。设置值（选项）；
此.$inner=$（''）.css({
位置：'相对'，
左：“-50%”，上：“-50%”，
宽度：options.width，
高度：options.height，
fontSize:'1px'，
线宽：“1px”，
边框：“1px实心#888”，
填充：“2px”，
背景颜色：“白色”，
光标：“默认值”
});
此.$div=$（''）
.append（此.$inner）
.css({
位置：'绝对'，
显示：“无”
});
};
ChartMarker.prototype=new google.maps.overlyview；
ChartMarker.prototype.onAdd=函数（）{
$（this.getPanes（）.overlyMouseTarget）.append（this.getPanes（）.overlyMouseTarget）；
};
ChartMarker.prototype.onRemove=函数（）{
此.$div.remove（）；
};
ChartMarker.prototype.draw=函数（）{
var标记=这个；
var projection=this.getProjection（）；
var position=projection.fromlantnodivpix（this.get（'position'）；
这是$div.css({
左：位置.x，
顶部：位置y，
显示：“块”
})
这是内线
.html（“”）
。单击（功能（事件）{
var events=marker.get（'events'）；
事件&事件。单击（事件）；
});
this.chart=新的google.visualization.PieChart（this.$inner[0]）；
this.chart.draw（this.get（'chartData'）、this.get（'chartOptions'）；
};
函数初始化（）{
var latLng=新goog
google.load( 'visualization', '1', { packages:['corechart'] });

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',
        border: '1px solid #888',
        padding: '2px',
        backgroundColor: 'white',
        cursor: 'default'
    });

    this.$div = $('<div>')
        .append( this.$inner )
        .css({
            position: 'absolute',
            display: 'none'
        });
};

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 initialize() {
    var latLng = new google.maps.LatLng( 40.708762, -74.006731 );

    var map = new google.maps.Map( $('#map_canvas')[0], {
        zoom: 15,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var data = google.visualization.arrayToDataTable([
        [ 'Task', 'Hours per Day' ],
        [ 'Work', 11 ],
        [ 'Eat', 2 ],
        [ 'Commute', 2 ],
        [ 'Watch TV', 2 ],
        [ 'Sleep', 7 ]
    ]);

    var options = {
        title: 'My Daily Activities',
        fontSize: 8
    };

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

$( initialize );