如何將Google Map添加到正在使用的組件中？

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具有getCssClass(), getTitle(), getHtml()由foo.html需要。

以上工作正常

題

當用戶將此組件添加到頁面時，我希望它在頁面中包含google map。 谷歌地圖的經度/緯度將由Foo.java#getLat()和Foo.java#getLong()

我怎樣才能做到這一點？

我讓Google地圖在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

如果要將參數傳遞給腳本，則可以像通常在Coral UI中一樣通過Sightly腳本中的data-xxx屬性進行操作。

將Foo中的屬性設置為某些DIV中的data屬性，您稍后將在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);

我希望這有幫助！ :)

如何將Google Map添加到正在使用的組件中？

問題描述

1 個解決方案

解決方案1
2 2015-07-16 14:13:03

如何將Google Map添加到正在使用的組件中？

問題描述

1 個解決方案

解決方案1 2 2015-07-16 14:13:03

解決方案1
2 2015-07-16 14:13:03