在事件被触发时调用cesium.js中的函数

时间:2016-04-20 09:15:16

标签: javascript html5 function cesium

我创建了一个div,如下所示

<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"><input type="search" id="search" placeholder="Search by layout name" onkeydown="search()"/></div>

因此,当在搜索框中按下输入按钮时,它应该调用功能&#34; 搜索&#34;。

<script id="cesium_sandcastle_script">
function startup(Cesium) {
'use strict';
 var west = 68.0;
 var south = 7.0;
 var east = 89.0;
 var north = 35.0;
 var rectangle = Cesium.Rectangle.fromDegrees(west, south, east, north);

 Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.5;
 Cesium.Camera.DEFAULT_VIEW_RECTANGLE = rectangle;
 var viewer = new Cesium.Viewer('cesiumContainer', {
   timeline: false,
   animation : false,
   vrButton : true,
   selectionIndicator : false
 });


   function search() {
      alert("success");
   }
 }

当我运行它时,它会引发错误&#34; 搜索不是函数&#34;。我哪里错了?

1 个答案:

答案 0 :(得分:1)

问题在于Cesium Sandcastle将您的代码包装在startup函数中,正如您在上面的问题中的第一行JavaScript中所看到的那样,这可以保护本地声明不受全局范围的影响。所以没有window.search函数可以绑定。但是,如今这样具有约束力的全球职能并非最佳做法。

请尝试改为:从上面的HTML代码中删除onkeydown="search()"属性,而是在JavaScript中订阅该事件,如下所示:

function search() {
    console.log('testing search...');
}

document.getElementById('search').addEventListener('keypress', search, false);