Question

我目前正在使用Google的Geochart制作一张小地图：

https://developers.google.com/chart/interactive/docs/gallery/geochart

我使用Markers版本在地图上放置点，稍后将相对于用户数据。我还想在标记旁边放置一个小图像叠加层。为此，我尝试在Google图表中使用叠加文档。

https://developers.google.com/chart/interactive/docs/overlays

然而，图片与我的标记完全没有对齐。我错过了什么吗？现在代码只是在一个页面上，因为它只是为了测试这个概念。

<!DOCTYPE html>
<html>
    <head>
        <title>First Impression</title>
        <style>
             .chartWithMarkerOverlay {
                 position: relative;
                 width: 700px;
             }
             .overlay-text {
                 width: 200px;
                 height: 200px;
                 position: absolute;
                 top: 50px;   /* chartArea top */
                 left: 200px; /* chartArea left */
             }
             .overlay-marker {
                 width: 50px;
                 height: 50px;
                 position: absolute;
                 top: 53px;   /* chartArea top */
                 left: 528px; /* chartArea left */
             }
        </style>
        <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
        <script type='text/javascript'>
            google.charts.load('current', {'packages': ['geochart']});
            google.charts.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {

              var data = new google.visualization.DataTable();
              data.addColumn('string', 'City');
              data.addColumn('date', 'Date');
              data.addColumn('number', 'Marker Color');
              data.addColumn('number', 'Marker Size');
              // dates are added in the format "new Date(year, month, day)"
             // month is zero-index (so January is 0, February is 1, etc
               data.addRows([
               ['Berlin, Germany', new Date(2017, 4, 2), 1, 1],
               ['London, UK', new Date(2016, 3, 25), 2, 1],
               ['Moscow, Russia', new Date(2016, 4, 10), 3, 1],
               ['Ottawa, Canada', new Date(2015, 3, 20), 4, 1],
               ['Beijing, China', new Date(2012, 4, 22), 5, 1],
               ['Sao Paulo, Brazil', new Date(2012, 4, 7), 6, 1]
               ]);

               // format the dates as "MMM dd, yyyy", eg. "Apr 20, 1865"
               var dateFormatter = new google.visualization.DateFormat({pattern: 'MMM dd, yyyy'});
               dateFormatter.format(data, 1);

               // use a DataView to join city and date in the tooltips
               var view = new google.visualization.DataView(data);
               view.setColumns([0, 2, {
                   type: 'number',
                   label: 'Date',
                   calc: function (dt, row) {
                       return {
                           v: dt.getValue(row, 3),
                           f: dt.getFormattedValue(row, 1)
                       };
                   }
              }]);
              function placeMarker(dataTable) {
                  var cli = this.getChartLayoutInterface();
                  var chartArea = layoutInterface.getChartAreaBoundingBox();
                  // "Zombies" is element #5.
                  document.querySelector('.overlay-marker').style.top = Math.floor(layoutInterface.getYLocation(dataTable.getValue(5, 1))) - 50 + "px";
                  document.querySelector('.overlay-marker').style.left = Math.floor(layoutInterface.getXLocation(5)) - 10 + "px";
      };

                  var chart = new google.visualization.GeoChart(document.querySelector('#chart_div'));
                  //var layoutInterface = chart.getChartLayoutInterface();
                 //google.visualization.events.addListener(chart, 'ready',placeMarker.bind(chart, data));


                chart.draw(view, {
                    width: 600,
                    displayMode: 'markers',
                    colorAxis: {
                        colors: ['#ff2352', '#23ff52']
                    },
                    sizeAxis: {
                        maxSize: 4 // maximum marker radius in pixels
                    }
               });      
            };
        </script>
    </head>    
    <body>
        <div class="chartWithMarkerOverlay">
            <div id="chart_div" style="width: 900px; height: 500px;"></div>
            <div class="overlay-marker"> <img src="https://developers.google.com/chart/interactive/images/zombie_150.png" height="50"> </div>
        </div>
    </body>
</html>

Answer 1

GeoCharts是他们自己的世界，有自己的规则。 Google Visualization API的其他元素仅适用于巧合。

在Google上覆盖Geochart上的图像

1 个答案: