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

Question

我有一个 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>

所以当在搜索框中按下输入按钮时，它应该调用函数“Search”。

<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");
   }
 }

当我运行这会引发错误“搜索不是函数”。我哪里错了？

Answer 1

问题是 Cesium Sandcastle 将你的代码包装在一个 startup 函数中，正如你在上面问题的 JavaScript 第一行中看到的那样，这屏蔽了全局声明的局部声明范围。所以没有 window.search 函数可以绑定。但是现在像这样绑定全局函数并不是最佳实践。

试试这个：从上面的 HTML 代码中删除 onkeydown="search()" 属性，然后像这样订阅 JavaScript 中的事件：

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

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

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

Calling a function in cesium.js when a event is trigerred

html

javascript

function

cesium