Question

我在谷歌地图上显示一张高图的极坐标图表，以显示地图上的风向。请参阅此示例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>

如果更改填充，则不适用于不同的屏幕尺寸。任何人都可以帮我解决这个问题。提前谢谢。

Answer 1

问题是由CSS样式中的左参数错误引起的。你应该避免使用harcoded值（因为在表中你有动态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/

谷歌地图上的高图

1 个答案: