Question

我是一个完全的初学者，但试图在这里和那里找到一些代码片段。

我在网页上有一张地图，我需要根据视口大小运行3个非常相似的脚本中的一个。我知道我无法使用css媒体查询加载.js文件，我可以随时了解。

我找到了一些指针，现在正在使用以下代码片段，为＆lt; 480px选择一个脚本，如果更大则选择另一个脚本。我想使用以下屏幕尺寸＆lt; 480px 480-768px和＆gt; 769px。

任何建议都会非常感激，我只想知道如何添加另外两个媒体查询，目前的代码如下：

class abcd
{
    public static void main(String args[])
    {
        printCheckerBoard(3,4);
        printCheckerBoard(5,6);
    }
    public static void printCheckerBoard(int rows, int cols)
    {
        System.out.println("Rows: "+rows+" and Columns: "+cols);
        for(int i=1;i<=rows;i++)
        {
            System.out.print("\t");
            for(int j=1;j<=cols;j++)
                if((i%2==1 && j%2==1) || (i%2==0 && j%2==0))
                    System.out.print("#");
                else
                    System.out.print(" ");
            System.out.println();
        }
        System.out.println("----------------------------");
    }
}

`

Answer 1

这两个函数之间的唯一区别似乎是您在地图上设置的一些属性。圆圈有不同的缩放，居中和fillColor。您可以创建单个函数并根据视口大小传递不同的参数。

var mycity=new google.maps.LatLng(51.xxx, 0.xxx);
var myothercity=new google.maps.LatLng(51.xxx, 0.xxx);

if($window.width() < 481)
    createMap(10, mycity, '#00ff00');
else
    createMap(11, myothercity, '#ff00ff');

function createMap(zoom, center, fillColor) {        
    function initialize()
    {
    var mapProp = {
     center:center,
     zoom:zoom,
     mapTypeId:google.maps.MapTypeId.ROADMAP
     };
    var map = new google.maps.Map(document.getElementById("map-canvas"),mapProp);
    var myCity = new google.maps.Circle({
     center:center,
     radius:32186,
     strokeColor:"#0000FF",
     strokeOpacity:0.8,
     strokeWeight:2,
     fillColor:fillColor,       <!--lime green mobile-->
     fillOpacity:0.2
     });
    myCity.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
}

Javascript媒体查询根据视口大小运行不同的脚本

1 个答案: