在Google上覆盖Geochart上的图像

Question

I'm currently working on a little map using the Geochart by Google: 我目前正在使用Google的Geochart制作一张小地图：

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

I use the Markers version to place dots on the map which will later be relative to user data. 我使用Markers版本在地图上放置点，稍后将相对于用户数据。 I would also like to place a small image overlay next to the marker. 我还想在标记旁边放置一个小图像叠加层。 And for this I tried to use the Overlay doc for the google charts. 为此，我尝试在Google图表中使用Overlay doc。

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

However the picture does not line up at all with my marker. 然而，图片与我的标记完全没有对齐。 Is it that I'm missing something? 我错过了什么吗？ for now the code is just on one page as it is just to test the concept. 现在代码只是在一个页面上，因为它只是为了测试这个概念。

<!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 are their own world, with their own rules. GeoCharts是他们自己的世界，有自己的规则。 The other elements of the Google Visualization API only apply by sheer coincidence. Google Visualization API的其他元素仅适用于巧合。

在Google上覆盖Geochart上的图像

问题描述

1 个解决方案

解决方案1
0 2017-09-11 18:18:40

在Google上覆盖Geochart上的图像

问题描述

1 个解决方案

解决方案1 0 2017-09-11 18:18:40

解决方案1
0 2017-09-11 18:18:40