谷歌地图顶部的高图表

highcharts on top of google map

本文关键字：高图表 顶部 谷歌地图      更新时间：2023-09-26

我在谷歌地图顶部显示一个高图的极坐标图，以在地图上显示风向。请参阅此示例 http://jsfiddle.net/rishad/azarpssv/

<html>
    <head>
        <title>Simple Polar chart on Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
            #wrapper { position: relative; }
            #over_map { position: absolute; top: 75px; left: 75px; z-index: 99; }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(function () {
            $('#container').highcharts({
                chart: {
                    polar: true,
                    backgroundColor:'rgba(255, 255, 255, 0.0)'
                },
                title: {
                    text: ''
                },
                pane: {
                    startAngle: 0,
                    endAngle: 360
                },
                exporting: { 
                  enabled: false 
                },
                legend: {
                    enabled: false
                },
                xAxis: {
                    tickInterval: 45,
                    min: 0,
                    max: 360,
                    labels: {
                        formatter: function () {
                            return this.value + '°';
                        }
                    }
                },
                yAxis: {
                    min: 0
                },
                plotOptions: {
                    series: {
                        pointStart: 0,
                        pointInterval: 45
                    },
                    column: {
                        pointPadding: 0,
                        groupPadding: 0
                    }
                },
                series: [{
                    type: 'line',
                    name: 'Line 1',
                    data: [8, 7, 6, 5, 4, 3, 2, 1],
                    pointPlacement: 'between'
                }, {
                    type: 'line',
                    name: 'Line 2',
                    data: [1, 2, 3, 4, 5, 6, 7, 8]
                }, {
                    type: 'line',
                    name: 'Line 3',
                    data: [1, 8, 2, 7, 3, 6, 4, 5]
                }]
            });
        });
        </script>
    </head>
    <body>
        <script src="js/highcharts.js"></script>
        <script src="js/highcharts-more.js"></script>
        <div id="wrapper">
            <div id="map" style="width: 500px; height: 500px;"></div>
            <div id="over_map">
                <div id="container" style="width: 350px; height: 350px;"></div>
            </div>
        </div>
        <script>
          var map;
          function initMap() {
          var myCenter = new google.maps.LatLng (53.244661, -2.479360)
            map = new google.maps.Map(document.getElementById('map'), {
              center: myCenter,
              zoom: 16,
              draggable:false,
              scrollwheel:false
            });
            var marker = new google.maps.Marker({
                position: myCenter,
                map: map,
            });
          }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpmEdrvxaqxIIGuawFFtBuhBUQ76Q2hLo&signed_in=true&callback=com/maps/api/js?sensor=false&callback=initMap"></script>
  </body>
</html>

但我无法使它成为一个元素。例如，我想把它放在 html 表行的中心，但这不起作用。

<table style="width: 100%;">
    <tr align="center">
        <td>
            <div id="wrapper">
                <div id="map" style="width: 500px; height: 500px;"></div>
                <div id="over_map">
                    <div id="container" style="width: 350px; height: 350px;"></div>
                </div>
            </div>
        </td>
    </tr>
</table>

如果我更改填充，它将不适用于不同的屏幕尺寸。任何人都可以帮我使用 css。提前谢谢。

该问题是由 CSS 样式中的不正确的左参数引起的。您应该避免使用编码值（因为在表中您有动态 100%）。因此，解决方案是使用calc(50% - 175px)其中 175px 是图表宽度的一半。

.CSS：

#wrapper { position: relative; }
#over_map { position: absolute; top: 75px; left:calc(50% - 175px); z-index: 99; }

例：- http://jsfiddle.net/sjmxke8g/

相关文章：