Google地图上的饼图 [英] Pie Chart on Google map

查看：91
本文介绍了Google地图上的饼图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想在Google地图的多个位置绘制饼图。有没有一种方法可以在谷歌地图的特定位置绘制谷歌饼图来表示数据集（如特定位置/城镇中的人口）？



我想出了一个解决方案，下面显示了我编写的用于在特定位置显示饼图图标的代码。
我还有其他一些要求将事件监听器添加到pi图表图标中，以显示更详细的饼图窗口。我想出下面的代码作为这个需求的解决方案，但是当点击图标时它不显示窗口。你可以帮忙找到问题吗？

 < html> 
< head> 
< link href =http://code.google.com//apis/maps/documentation/javascript/examples/default.css =stylesheettype =text / css> 
< script src =https://maps.googleapis.com/maps/api/js?v=3.10&sensor=false&.js>< / script> 
< script type =text / javascriptsrc =https://www.google.com/jsapi?.js>< / script> 
< script type =text / javascriptsrc =js / jquery-1.7.1.min.js>< / script> 
< script type =text / javascript> 
 google.load（'visualization'，'1'，{packages：['corechart']}）; 
 
函数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）; 
} 
 
函数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'
}）; 
 $ b $ 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'）+'/>'）
。点击（功能（事件）{
 var events = marker.get（'events'）; 
 events&& event.click（event）; 
}）; 
 
 this.chart = new google.visualization.PieChart（this。$ inner [0]）; 
 this.chart.draw（this.get（'chartData'），this.get（'chartOptions'））; 
}; 
 
函数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]，
 ['吃'，2]，
 ['Commute'，2]，
 ['看电视'，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_canvasstyle =width：900px; height：500px;>< / div> 
< / body> 
< / html>


解决方案

Visualization API ，您可以使用自定义的HTML覆盖图这个小提琴：

  google.load（'visualization'，'1'，{packages：['corechart']}）; 
 
函数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'
}）; 
 $ b $ 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'）+'/>'）
。点击（功能（事件）{
 var events = marker.get（'events'）; 
 events&& event.click（event）; 
}）; 
 
 this.chart = new google.visualization.PieChart（this。$ inner [0]）; 
 this.chart.draw（this.get（'chartData'），this.get（'chartOptions'））; 
}; 
 
函数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]，
 ['吃'，2]，
 ['Commute'，2]，
 ['看电视'，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'）; 
} 
} 
}）; 
}; 
 
 $（初始化）;


I want to draw a pie charts on several locations in a Google Map. Is there a way to draw a google pie chart in a particular location in a Google Map to represent a data set (like population in a particular location/town)?

I came up with a solution and below displays the code that I wrote to display a pie chart icon in a particular location. I have some other requirement to add event listener to the pi chart icon to display a window with more detailed pie chart. I came up with the code below as a solution for this requirements, but it does not display the window when the icon is clicked. Can you please help to find the issue here?

<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>

解决方案

If you're talking about a pie chart drawn with the Visualization API, you could use a custom HTML overlay like the one in this fiddle:

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

这篇关于Google地图上的饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆