Question

我有一个名为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.java中有apps/foo/components/content/foo/Foo.java foo.html需要getCssClass(), getTitle(), getHtml()。

以上工作正常

问题

当用户将此组件添加到页面时，我希望它在页面中包含Google地图。谷歌地图的纬度/经度将由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中myLatlng变量的纬度/经度值需要来自Foo.java。

Answer 1

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

将您的Foo属性设置为稍后将在JS中获取的某些DIV中的数据属性。
通过其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);

我希望这有帮助！：）

如何将谷歌地图添加到正在使用的组件？

1 个答案: