小编Jon*_*ker的帖子

如何在Vue.js组件中观看prop更改?

我将一组图像文件路径传递给组件.我想知道如果我传递一个不同的数组,在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)

javascript vue.js vue-component vuejs2

8
推荐指数
1
解决办法
1万
查看次数

带有OpenWeatherMap图块叠加层的Google Maps Javascript API

如何在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/

javascript google-maps google-maps-api-3 openweathermap

7
推荐指数
1
解决办法
4091
查看次数

JavaScript:keydown事件中的输入验证

我正在尝试在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)

我可以像这样继续前进,但是我看到这个实现的缺点.这些是,例如:

  1. 当我提出更多条件进行审查时,条件陈述变得越来越长.
  2. keyCodes 可以是不同的浏览器.
  3. 我不仅要检查什么是不合法的,还要检查什么是例外情况.在上述例子中,delete,backspace,和arrow密钥是个例外.

但是我不想丢失的功能是textarea除非通过验证,否则不要在输入中显示输入.(如果用户试图将非法字符放入其中textarea,则根本不应出现任何内容)这就是为什么我没有对keyup事件进行验证.

所以我的问题是:

  1. 是否有更好的方法来验证输入keydown事件不是检查keyCodekeyCode
  2. keydown在浏览器显示之前,还有其他方法可以捕获除事件之外的用户输入吗?还有一种方法可以对其进行验证吗?

我在这里先向您的帮助表示感谢.

javascript validation javascript-events keydown

6
推荐指数
1
解决办法
3万
查看次数

OpenLayers3:一次超过一个叠加层?

我正在使用 OpenLayers3 将地图集成到网站中。我添加了一些根据对象位置表示对象的特征。我添加了一个覆盖层,其中包含单击该对象时的数据,并且它运行良好。但是,有一些我不知道该怎么做,我已经尝试过但它不起作用:

对于地图上的每个对象,我想要一种在其旁边显示其名称的标签- 因为除非显示叠加层,否则无法区分它们。但是点击每个对象并不方便,特别是在智能手机上......(有时,对象彼此非常接近)。

我尝试为此显示一个叠加层。但似乎一次只能显示一个叠加层。您知道如何规避/避免显示多个叠加层吗?或者如果无法完成,您有备用解决方案吗?我查看了 API 和 OpenLayers3 网站上的示例...但我没有找到任何东西。我已经没有主意了。

多谢。

发布脚本:在我被要求提供一些代码之前,我无法发布代码的任何部分,因为它是针对我正在工作的项目的,所以显然,我的代码是机密的。抱歉,谢谢您的理解。但我可以研究任何示例或想法,使其适合我的代码,并查看它是否有效。

javascript overlay openlayers-3

6
推荐指数
1
解决办法
1690
查看次数

jshint,eqnull,使用'==='与'undefined'进行比较

我提前道歉,显然我完全无法理解如何配置jshint.

我有这行代码

if ( data == undefined || (typeof data === 'object' && data.length === 0) ) {
...
Run Code Online (Sandbox Code Playgroud)

jshint强调了第一个==并且说

使用'==='与'undefined'进行比较.

我补充道/* jshint eqnull:true */.我认为这是选项的作用.我甚至在这里看到一个例子(搜索eqnull).

我错过了什么?

javascript jshint

5
推荐指数
2
解决办法
3663
查看次数

是否可以对开放层进行自动测试?

我正在尝试使用硒来测试OpenLayers-2.13.1功能。我在单击鼠标,按下鼠标时遇到了问题。。。我发现了一些过时的帖子,但也遇到了类似的问题,但是它们的分辨率对我没有帮助。有谁知道可以自动测试开放层的任何软件。

http://lists.osgeo.org/pipermail/openlayers-users/2012-November/026791.html

selenium selenium-ide openlayers gwt-openlayers

5
推荐指数
1
解决办法
845
查看次数

OL3:如何根据缩放修改选定的要素样式?

我使用以下代码根据缩放级别修改圆形标记的半径:

//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)

但我遇到的问题是,如果我在地图上选择一个要素,则当地图缩放更改时,所选/突出显示的样式不会更改。如何根据缩放/分辨率动态修改所选功能的样式?

澄清 上面的代码已经适用于更改地图上所有要素的半径,但除此之外,我还需要更改所选要素的半径。选定和未选定的功能都应根据缩放级别而变化。

javascript openlayers-3

5
推荐指数
1
解决办法
6077
查看次数

如何将鼠标悬停/鼠标悬停监听器添加到ol.Map?

在ol2我曾经使用:

map.on( "mouseover mouseout", function( evt ) {...});
Run Code Online (Sandbox Code Playgroud)

我怎么能在ol3中这样做?

javascript openlayers-3

4
推荐指数
1
解决办法
1566
查看次数

如何在openlayers3中指定GeoJSON的投影?

我的目的是加载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)

javascript openlayers-3

4
推荐指数
1
解决办法
5921
查看次数

AngularJS ng-repeat复制元素

由于一些奇怪的原因,这个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)

有关此代码有什么问题的任何想法?

associative-array angularjs ng-repeat

3
推荐指数
1
解决办法
1462
查看次数