在Tapestry中将数组传递给javascript
在我的Tapestry模板中,我有一个RoutePoint对象数组(由一个纬度和一个经度值组成),我想将它们传递给javascript,以便有人知道如何做吗?有点像@Pointy noted,但Tapestry有一种更优雅的初始化脚本的方法,将其内联到在Tapestry中将数组传递给javascript,javascript,google-maps-api-3,tapestry,Javascript,Google Maps Api 3,Tapestry,在我的Tapestry模板中,我有一个RoutePoint对象数组(由一个纬度和一个经度值组成),我想将它们传递给javascript,以便有人知道如何做吗?有点像@Pointy noted,但Tapestry有一种更优雅的初始化脚本的方法,将其内联到标记中。下面是我的GoogleMap组件代码,显示了我如何将一个映射添加到Tapestry页面,并在地址上打印一个指针。要了解如何添加多个连接线,请查看谷歌地图API 在Tapestry页面中: @BeginRender void doBeginR
标记中。下面是我的GoogleMap组件代码,显示了我如何将一个映射添加到Tapestry页面,并在地址上打印一个指针。要了解如何添加多个连接线,请查看谷歌地图API
在Tapestry页面中:
@BeginRender
void doBeginRender(MarkupWriter writer) {
String clientId = javaScriptSupport.allocateClientId(componentResources);
String mapsScripURL = (request.isSecure()) ? SECURE_GOOGLE_MAPS_SCRIPT_URL : GOOGLE_MAPS_SCRIPT_URL;
javaScriptSupport.importJavaScriptLibrary(mapsScripURL);
writer.element("div", "id", clientId, "class", "googleMapCanvas " + clientId);
writer.end();
JSONObject parameters = new JSONObject();
parameters.put("mapCanvasId", clientId);
parameters.put("geoAddress", geoAddress);
javaScriptSupport.addInitializerCall("GoogleMap", parameters);
}
使用@Import(library={“GoogleMap.js”})
将javascript文件添加到页面/组件中,其中GoogleMap.js看起来有点像(我使用prototype.js):
祝你好运 将列表转换为JSON字符串,并将其放入
块内的页面中,在该页面中,它将被分配给JavaScript变量(或传递给函数,或其他)。感谢您的回答。我创建了一个“GoogleMapComponent”,添加了“BeginRender”方法并导入了JavaScript部分。但是,我不知道在模板文件中写什么。我用
尝试了它,但它没有显示贴图。该组件不需要模板,因为begin render会为您打印DOM元素。请参阅以下部分:writer.element(“div”、“id”、clientId、“class”、“googleMapCanvas”+clientId);writer.end()代码>只需将您在评论中显示的代码添加到您想要放置地图的页面,就可以了。如果这不起作用,检查js错误。对不起,我的评论有点误导。我谈到的是页面的模板,而不是组件的模板。当我更改writer.element时(“div”、“id”、clientId、“class”、“googleMapCanvas”+clientId)代码>到writer.element(“div”、“id”、clientId、“class”、“googleMapCanvas”+clientId、“style”、“宽度:100%;高度:400px”)代码>它工作得很完美。但当我将style=“宽度:100%;高度:400px”
添加到
时,它只是被忽略了。有什么想法吗?用@SupportsInformalParameters注释您的组件。看一看,是的,那是丢失的部分,我现在都开始工作了。再次感谢。
Tapestry.Initializer.GoogleMap = function (parameters) {
new GoogleMap(parameters);
};
var GoogleMap = { };
GoogleMap = Class.create({
initialize:function(parameters) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': parameters.geoAddress}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var mapOptions = {
zoom: 11,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(parameters.mapCanvasId), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
});
}
});