在html页面中使用<script>使用sightly

Question

我正在尝试将谷歌地图添加到正在使用的组件.该组件将允许用户选择资产,然后从资产属性中获取纬度/经度,然后在谷歌地图中使用标记显示位置.

我的googlemap.html页面目前包含以下内容.

<div  data-sly-use.ev="Google"
        class="${ev.cssClass || ''}"
        title="${ev.title || ''}"
        data-emptytext="Evernote Asset"
        id="${ev.googleClass || ''}"
        >       

</div>

    <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>

我的Google.java是这样的

public class Google extends WCMUse {
  public void activate () {
    //grab the lat/long properties for the asset
  }

  public String googleClass() {
    if (lat != null && long != null) 
      return "map-canvas";
    else 
      return "";
  }
  public String getLat() {return lat;}
  public String getLng() {return lng:]
}

问题 正如您所看到的,我已经对lat/long进行了硬编码.如何使用getter而不是硬编码从我的java类中获取lat/long？

我尝试了以下但它不起作用.

<div  data-sly-use.ev="GoogleMap"
        class="${ev.cssClass || ''}"
        title="${ev.title || ''}"
        data-emptytext="Evernote Asset"
        id="${ev.googleClass || ''}"
        >       



    <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("${ev.lat || ''}","${ev.lng || ''}");
        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>
  </div>

Answer 1

有明智的XSS保护功能.因此,为了评估表达式,应该使用上下文.

${ev.lat @ context="scriptString"}