在 Google Earth API 中：使用单选按钮更改视图

Question

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

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

编辑：

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

总而言之，更好的方法是重写您创建视图的方式并将视图设置为 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);    
}