草庐IT

javascript - Google map 上的饼图

coder 2025-01-02 原文

我想在 Google map 中的多个位置绘制饼图。有没有办法在 Google map 中的特定位置绘制 google 饼图来表示数据集(例如特定位置/城镇的人口)？

我想出了一个解决方案，下面显示了我编写的用于在特定位置显示饼图图标的代码。 我还有一些其他要求将事件监听器添加到 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>

最佳答案

如果您谈论的是用 Visualization API 绘制的饼图，您可以使用像 this fiddle 中那样的自定义 HTML 覆盖:

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

关于javascript - Google map 上的饼图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17502438/

javascriptGoogle39thisgoogle-maps

有关javascript - Google map 上的饼图的更多相关文章

  1. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  2. ruby-on-rails - openshift 上的 rails 控制台 - 2

    我将我的Rails应用程序部署到OpenShift，它运行良好，但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题？我尝试更新ruby​​gems，但它也给出了权限被拒绝的错误，我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems

  3. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  4. ruby-on-rails - Ruby - 如何从 ruby​​ 上的 .pfx 文件中提取公钥、rsa 私钥和 CA key - 2

    我有一个.pfx格式的证书，我需要使用ruby​​提取公共(public)、私有(private)和CA证书。使用shell我可以这样做:#ExtractPublicKey(askforpassword)opensslpkcs12-infile.pfx-outfile_public.pem-clcerts-nokeys#ExtractCertificateAuthorityKey(askforpassword)opensslpkcs12-infile.pfx-outfile_ca.pem-cacerts-nokeys#ExtractPrivateKey(askforpassword)o

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. 带有 attr_accessor 的类上的 Ruby instance_eval - 2

    我了解instance_eval和class_eval之间的基本区别。我在玩弄时发现的是一些涉及attr_accessor的奇怪东西。这是一个例子:A=Class.newA.class_eval{attr_accessor:x}a=A.newa.x="x"a.x=>"x"#...expectedA.instance_eval{attr_accessor:y}A.y="y"=>NoMethodError:undefinedmethod`y='forA:Classa.y="y"=>"y"#WHATTT?这是怎么回事:instance_eval没有访问我们的A类(对象)然后它实际上将它添加到

  7. ruby-on-rails - rails 上的 ruby : radio buttons for collection select - 2

    我有一个集合选择:此方法的单选按钮是什么？谢谢 最佳答案 Rails3中没有这样的助手。在Rails4中，它是collection_radio_buttons. 关于ruby-on-rails-rails上的ruby:radiobuttonsforcollectionselect，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/18525986/

  8. ruby - 将命令行上的变量传递给 Cucumber 测试 - 2

    我正在尝试将cucumber项目的用户名和密码置于版本控制之外。有没有办法在命令行上手动将用户名和密码等变量传递给Cucumber脚本？我的备份计划是将它们放在一个YML文件中，然后将该文件添加到gitignore，这样它们就不会被置于版本控制中。 最佳答案 所以，我看到了您对铁皮人的评论，答案是肯定的。cucumberPASSWORD=my_passwordPASSWORD被设置为环境变量，您可以通过将其引用为ENV['PASSWORD']来使用它的值。例如，browser.text_field(:id=>'pwd').setEN

  9. ruby - 将哈希值保存到 Ruby 上的文件 - 2

    我刚刚迈出了编程的第一步。我刚刚完成了CodeAcademy的另一门类(class)。这次我被要求创建一个小电影目录。这是我的问题:如何在文件中保存/加载带有电影标题和评级的哈希值而不是自己的代码？下面是代码现在的样子(几句葡萄牙语，但您可以忽略它:movies={Memento:3,Primer:4,Ishtar:1}puts"Oquevocêgostariadefazer?"puts"--Digite'add'paraadicionarumfilme."puts"--Digite'update'paraatualizarumfilme."puts"--Digite'display'

  10. ruby - 在 RUBY 上的 PADRINO 框架上使用 RSPEC 进行测试的教程 - 2

    我是Ruby新手，并被要求在我们的新项目中使用它。我们还被要求使用Padrino(Sinatra)作为后端/框架。我们被要求使用Rspec进行测试。我一直在寻找可以指导在Padrino上使用RspecforRuby的教程。我得到的主要是引用RoR。但是，我需要RubyonPadrino。请在任何入门/指南/引用/讨论等方面指导我。如有不妥之处请指正。可能是我没有针对我的问题搜索正确的词/短语组合。我正在使用Ruby1.9.3和Padrinov.0.10.6。注意:我还提到了SOquestion,但它没有帮助。 最佳答案 我没用过Pa

随机推荐