我将一组图像文件路径传递给组件.我想知道如果我传递一个不同的数组,在Vue.js组件中观察道具更改的最佳方法是什么?
我正在使用自举旋转木马,所以想要在阵列发生变化时将其重置为第一张图像.为了简单起见,我将代码示例简化为:
Vue.component('my-images', {
props: ['images'],
template: `
<section>
<div v-for="(image, index) in images">
{{index}} - <img :src="image"/>
</div>
</section>
`
});
Run Code Online (Sandbox Code Playgroud) 如何在Google Maps API 3上叠加XYZ图块集(如下所示)?我想覆盖天气数据(云层等等).随意使用我的OpenWeatherMaps URL来测试它:
http://maps.owm.io:8091/56ce0fcd4376d3010038aaa8/{z}/{x}/{y}?hash=5
Run Code Online (Sandbox Code Playgroud)
我花了好几天试图找出这个看似简单的功能.如果有人可以提供一个有效的例子我会欠你的债.请随意使用此天气数据叠加层的OL3和OSM查看我的GitHub Gist实现.我也很想知道这是不是很容易实现/需要黑客攻击.
谢谢!
更新:感谢@ wf9a5m75的回答,我能够将这个jsFiddle与我的问题的解决方案放在一起:https://jsfiddle.net/601oqwq2/4/
我正在尝试在keydown事件过程中对用户文本输入进行信息验证.我试图在keydown事件中验证的原因是因为我不想input在开头的框中显示那些被认为是非法的字符.
我写的验证是这样的,
function validateUserInput(){
var code = this.event.keyCode;
if ((code<48||code>57) // numerical
&&code!==46 //delete
&&code!==8 //back space
&&code!==37 // <- arrow
&&code!==39) // -> arrow
{
this.event.preventDefault();
}
}
Run Code Online (Sandbox Code Playgroud)
我可以像这样继续前进,但是我看到这个实现的缺点.这些是,例如:
keyCodes 可以是不同的浏览器. 但是我不想丢失的功能是textarea除非通过验证,否则不要在输入中显示输入.(如果用户试图将非法字符放入其中textarea,则根本不应出现任何内容)这就是为什么我没有对keyup事件进行验证.
所以我的问题是:
keydown事件不是检查keyCode的keyCode?keydown在浏览器显示之前,还有其他方法可以捕获除事件之外的用户输入吗?还有一种方法可以对其进行验证吗?我在这里先向您的帮助表示感谢.
我正在使用 OpenLayers3 将地图集成到网站中。我添加了一些根据对象位置表示对象的特征。我添加了一个覆盖层,其中包含单击该对象时的数据,并且它运行良好。但是,有一些我不知道该怎么做,我已经尝试过但它不起作用:
对于地图上的每个对象,我想要一种在其旁边显示其名称的标签- 因为除非显示叠加层,否则无法区分它们。但是点击每个对象并不方便,特别是在智能手机上......(有时,对象彼此非常接近)。
我尝试为此显示一个叠加层。但似乎一次只能显示一个叠加层。您知道如何规避/避免显示多个叠加层吗?或者如果无法完成,您有备用解决方案吗?我查看了 API 和 OpenLayers3 网站上的示例...但我没有找到任何东西。我已经没有主意了。
多谢。
发布脚本:在我被要求提供一些代码之前,我无法发布代码的任何部分,因为它是针对我正在工作的项目的,所以显然,我的代码是机密的。抱歉,谢谢您的理解。但我可以研究任何示例或想法,使其适合我的代码,并查看它是否有效。
我提前道歉,显然我完全无法理解如何配置jshint.
我有这行代码
if ( data == undefined || (typeof data === 'object' && data.length === 0) ) {
...
Run Code Online (Sandbox Code Playgroud)
jshint强调了第一个==并且说
使用'==='与'undefined'进行比较.
我补充道/* jshint eqnull:true */.我认为这是选项的作用.我甚至在这里看到一个例子(搜索eqnull).
我错过了什么?
我正在尝试使用硒来测试OpenLayers-2.13.1功能。我在单击鼠标,按下鼠标时遇到了问题。。。我发现了一些过时的帖子,但也遇到了类似的问题,但是它们的分辨率对我没有帮助。有谁知道可以自动测试开放层的任何软件。
http://lists.osgeo.org/pipermail/openlayers-users/2012-November/026791.html
我使用以下代码根据缩放级别修改圆形标记的半径:
//add the layer to the map
map.addLayer(vectorLayer);
//add selection interactivity, using the default OL3 style
var select = new ol.interaction.Select();
map.addInteraction(select);
map.getView().on('change:resolution', function(evt) {
var zoom = map.getView().getZoom();
var radius = zoom / 2 + 1;
var newStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
fill: new ol.style.Fill({color: 'red'}),
stroke: new ol.style.Stroke({color: 'black', width: 1})
})
})
vectorLayer.setStyle(newStyle);
});
Run Code Online (Sandbox Code Playgroud)
但我遇到的问题是,如果我在地图上选择一个要素,则当地图缩放更改时,所选/突出显示的样式不会更改。如何根据缩放/分辨率动态修改所选功能的样式?
澄清 上面的代码已经适用于更改地图上所有要素的半径,但除此之外,我还需要更改所选要素的半径。选定和未选定的功能都应根据缩放级别而变化。
在ol2我曾经使用:
map.on( "mouseover mouseout", function( evt ) {...});Run Code Online (Sandbox Code Playgroud)
我怎么能在ol3中这样做?
我的目的是加载GeoJSON数据并将其显示在地图上.GeoJSON中指定的要素的坐标是正常的lon/lat.由于某种原因,openlayers使用地图使用的投影渲染它们而不转换它们.
// Underlying sat layer.
var world = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
});
// GeoJSON data.
var geojsonObject = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'coordinates': [ 50.07539747, 19.76809501 ],
'type': 'Point'
},
}
]
};
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
// Map.
map = new ol.Map({
target: 'map',
layers: [world, vectorLayer],
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 2 …Run Code Online (Sandbox Code Playgroud) 由于一些奇怪的原因,这个jsfiddle示例中的代码在迭代关联值数组时复制元素.输入字段正确显示3个名称,但每个名称的字段重复3次.更令人困惑的是,{{ p.name }}显示的值与ng-model="p.name"每次迭代的值不同.索引每次显示0,1和2三次.为什么每个元素会有三次迭代?
控制器:
var app=angular.module('myApp', []);
function MyCtrl($scope) {
$scope.people = [
{ name:'Tom', age:5 },
{ name:'Dick', age:6 },
{ name:'Harry', age:7 }
];
}
Run Code Online (Sandbox Code Playgroud)
HTML:
<div ng-controller="MyCtrl">
<form>
<ul>
<li ng-repeat="p in people">{{$index}}, {{$first}}, {{$middle}}, {{$last}}, {{p.name}}, {{p.age}}
<input type="text" ng-model="p.name">
</li>
</ul>
</form>
</div>
Run Code Online (Sandbox Code Playgroud)
有关此代码有什么问题的任何想法?
javascript ×8
openlayers-3 ×4
angularjs ×1
google-maps ×1
jshint ×1
keydown ×1
ng-repeat ×1
openlayers ×1
overlay ×1
selenium ×1
selenium-ide ×1
validation ×1
vue.js ×1
vuejs2 ×1