通过选择地图注释更新 Web 视图

Question

我正在使用 Appcelerator Alloy。我有一张地图，上面有几个注释和一个网络视图。我希望能够 select 地图上的注释，并让网络视图显示基于该注释的网页。

例如，select 白俄罗斯注释，网络视图显示白俄罗斯的维基百科页面。

这是我到目前为止的大致情况：

Map.xml

<Alloy>
<Window title="Map">
    <Module method="createView" module="ti.map"  id="mapview" height="250" top="0" >
        <Annotation id="belarus" onClick="refresh" url="https://en.wikipedia.org/wiki/Belarus" />
        <Annotation id="belgium" />
        <Annotation id="bosniaAndHerzegovina" />
        <Annotation id="bulgaria" />
    </Module>
    <WebView id="webview" url="https://en.wikipedia.org/wiki/Austria" top="252" />
</Window>

（Js 比任何东西都更伪代码，因为我不确定那里应该放什么） Map.Js

function refresh(){
//set url based on which annotation was selected
var url = $.this.url;

if(url != null){
    //update the web view with the new url
$.webview.reload(url);  };

Answer 1

如果您查看文档，您会找到答案：

在 http://docs.appcelerator.com/platform/latest/#!/api/Modules.Map 您将看到一个带注释点击的示例：

mapview.addEventListener('click', function(evt) {
    Ti.API.info("Clicked " + evt.clicksource + " on " + evt.latitude + "," + evt.longitude);
});

在网络视图页面：http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.WebView 你可以看到你需要设置 url 来改变 webview。

因此，在上面的 click 事件中，您将执行以下操作：

$.webview.url = "https://...";

它会加载页面。检查点击源 ID 以查看点击了哪个注释

Answer 2

事实证明这是一个相当简单的错误。不要将 onCLick 调用放在注释上，它应该放在地图模块本身上。

.XML代码

<Alloy>
<Window title="Map">
    <Module method="createView" module="ti.map"  onClick="refresh" id="mapview" height="250" top="0" >
        <Annotation id="belarus" />
        <Annotation id="belgium" />
        <Annotation id="bosniaAndHerzegovina" />
        <Annotation id="bulgaria" />
    </Module>
    <WebView id="webview" url="https://en.wikipedia.org/wiki/Austria" top="252" />
    </WebView>
</Window>

.js代码

function refresh(evt){
var url = evt.annotation.url;
$.webview.url = url;};

miga 对网络视图很有帮助 url。

通过选择地图注释更新 Web 视图

Update a web view by selecting a map annotation

javascript

appcelerator

appcelerator-titanium

appcelerator-alloy