1

我有一个名为foo

我foo.html有apps/foo/components/content/foo/foo.html

目前该文件包含以下内容。

<div  data-sly-use.ev="Foo"
        class="${ev.cssClass || ''}"
        title="${ev.title || ''}"
        data-emptytext="Foo Asset">
        ${ev.html @ context='unsafe'}</div>

我有foo.html 需要的Foo.java那个apps/foo/components/content/foo/Foo.java 。getCssClass(), getTitle(), getHtml()

以上工作正常

问题

当用户将此组件添加到页面时，我希望它在页面中包含谷歌地图。谷歌地图的纬度/经度将由Foo.java#getLat()和提供Foo.java#getLong()

我怎样才能做到这一点？

我有谷歌地图在 AEM 之外的 HTML 中工作，代码非常简单：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map-canvas {
        width: 500px;
        height: 400px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
        var mapOptions = {
          center: myLatlng,
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
        var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Hello World!'
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

上述 javascript中变量的 lat/long 值myLatlng需要来自Foo.java.

4

1 回答 1

2

如果您想将参数传递给脚本，您可以像在 Coral UI 中通常那样通过 Sightly 脚本中的 data-xxx 属性进行操作。

  • 将 Foo 中的属性设置为某些 DIV 中的数据属性，稍后您将在 JS 中获取。
  • 通过ID获取JS中的div，获取你感兴趣的数据属性。

例子：

好看的

<div id="map_canvas" data-lat="${ev.lat}" data-long="${ev.long}">
</div>

Javascript

this.mapCanvas = document.getElementsByClassName("map_canvas")[0];
var lat = $mapCanvas.data("lat");
var long = $mapCanvas.data("long");
var myLatlng = new google.maps.LatLng(lat,long);

我希望这有帮助！:)

于 2015-07-16T14:13:03.097 回答