Javascript媒体查询运行不同的脚本依赖于视口大小

Question

我是一个完整的初学者，但试图得到我需要在这里和那里几个代码片段去的地方。

我有一个网页上的地图，我需要依赖视口大小运行3个非常类似的脚本之一。我知道我不能使用CSS媒体查询加载一个.js文件，我可以找到我的头。

我发现了几个指针，现在正在使用下面的代码片段，它选择< 480px或另一个更大的脚本。我想使用以下屏幕尺寸< 480px 480-768px和> 769px。

任何建议，将不胜感激，我只是想知道如何添加其他媒体查询或两个，当前的代码如下：

if ($(window).width() < 481) { 

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

} 
else { 

var mycity=new google.maps.LatLng(51.xxx, 0.xxx); 
function initialize() 
{ 
var mapProp = { 
center:mycity, 
zoom:11, 
mapTypeId:google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById("map-canvas"),mapProp); 
var myCity = new google.maps.Circle({ 
center:Pembury, 
radius:32186, 
strokeColor:"#0000FF", 
strokeOpacity:0.8, 
strokeWeight:2, 
fillColor:"#FF00FF",  <!--magenta desktop--> 
fillOpacity:0.2 
}); 
myCity.setMap(map); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
} 

`

Answer 1

这似乎是唯一的区别2个函数之间是您在地图上设置的一些属性。圆圈有不同的缩放，中心和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); 
}