javascript - 在 Google 地球 API : Changing view with radio buttons 中

Question

我正在尝试创建一个界面，用户可以在其中使用三个简单的 HTML 单选按钮选择他们的 View 。我已经设法让插件使用适当的 View 进行初始化(由我选择作为默认值的单选按钮确定)，但选择不同的单选按钮仍然没有任何作用。相关代码如下:

document.getElementById('ui').innerHTML =
'<div>' +
'<h2>Select View:</h2>' +
'<input type="radio" name="view" value="valley" id="valley" onclick="ge.getView().setAbstractView(\'valleyview\');"/ checked> Full Valley<br/>' +
'<input type="radio" name="view" value="takten" id="takten" onclick="ge.getView().setAbstractView(\'taktenview\');"/> Takten Ling Monastery<br/>' +
'<input type="radio" name="view" value="stupa" id="stupa" onclick="ge.getView().setAbstractView(\'stupaview\');"/> Jonang Stupa<br/>' +
'</div>' +
'<br/>';

  }

  function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);

// add a navigation control
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

// add some layers
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, false);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, false);

var la = ge.createLookAt('');

if(document.getElementById('valley').checked) {
la.set(29.36890346613675, 88.0025304326977,
25, // altitude
ge.ALTITUDE_RELATIVE_TO_GROUND,
180, // heading
60, // straight-down tilt
500 // range (inverse of zoom)
);
   }else if(document.getElementById('takten').checked) {
la.set(30.36890346613675, 88.0025304326977,
25, // altitude
ge.ALTITUDE_RELATIVE_TO_GROUND,
180, // heading
60, // straight-down tilt
500 // range (inverse of zoom)
);
}else if(document.getElementById('stupa').checked) {
la.set(31.36890346613675, 88.0025304326977,
25, // altitude
ge.ALTITUDE_RELATIVE_TO_GROUND,
180, // heading
60, // straight-down tilt
500 // range (inverse of zoom)
);
}
    ge.getView().setAbstractView(la);    

var valleyview = ge.createLookAt('');
  valleyview.set(29.36890346613675, 88.0025304326977,
25, // altitude
ge.ALTITUDE_RELATIVE_TO_GROUND,
180, // heading
60, // straight-down tilt
500 // range (inverse of zoom)
);

   var taktenview = ge.createLookAt('');
  taktenview.set(30.36890346613675, 88.0025304326977,
25, // altitude
ge.ALTITUDE_RELATIVE_TO_GROUND,
180, // heading
60, // straight-down tilt
500 // range (inverse of zoom)
);

   var stupaview = ge.createLookAt('');
  stupaview.set(31.36890346613675, 88.0025304326977,
25, // altitude
ge.ALTITUDE_RELATIVE_TO_GROUND,
180, // heading
60, // straight-down tilt
500 // range (inverse of zoom)
);

任何有关我可能做错的事情的指示将不胜感激。谢谢。

Answer 1

问题出在每个 onclick 处理程序中的代码...

onclick="ge.getView().setAbstractView(\'valleyview\');"

应该向 setAbstractView 方法传递一个从 KmlAbstractView 继承的对象，例如 KmlCamera 或 KmlLookAt对象 - 但您正在向它传递一个字符串值。

要修复此问题，只需删除参数周围的单引号即可。

onclick="ge.getView().setAbstractView(valleyview);"

此外，我会将功能封装到一个方法中，以使调用更清晰。类似下面的内容。

var lookat = function(abstractView) {
  ge.getView().setAbstractView(abstractView);
}

那么你的 html 就只是......

onclick="lookat(valleyview);"

编辑:

看看它，您还需要将各种 View 移到 initCallBack 函数之外，因为您无法从外部引用您在其中创建的变量...

总而言之，更好的方法是重写创建和设置 View 的方式:a) 删除所有重复项；b) 使代码更清晰。类似下面的内容。

document.getElementById('ui').innerHTML =
    '<div>' +
    '<h2>Select View:</h2>' +
    '<input type="radio" name="view" value="valley" id="valley" onclick="lookat(29.36890346613675, 88.0025304326977);"/ checked> Full Valley<br/>' +
    '<input type="radio" name="view" value="takten" id="takten" onclick="lookat(30.36890346613675, 88.0025304326977);"/> Takten Ling Monastery<br/>' +
    '<input type="radio" name="view" value="stupa" id="stupa" onclick="lookat(31.36890346613675, 88.0025304326977);"/> Jonang Stupa<br/>' +
    '</div>' +
    '<br/>';

function initCallback(instance) {
    ge = instance;
    ge.getWindow().setVisibility(true);

    // add a navigation control
    ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

    // add some layers
    ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, false);
    ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, false);

    // only valley can be checked here so no need for the conditional logic.
    lookat(29.36890346613675, 88.0025304326977);
}

var lookat = function(lat, lng) {
    var la = ge.createLookAt('');
    la.set(lat, lng, 25, ge.ALTITUDE_RELATIVE_TO_GROUND, 180, 60, 500);
    ge.getView().setAbstractView(la);    
}