Javascript 在Liferay中调用Google API的问题_Javascript_Google Maps_Liferay

Javascript 在Liferay中调用Google API的问题

javascript google-maps liferay

Javascript 在Liferay中调用Google API的问题,javascript,google-maps,liferay,Javascript,Google Maps,Liferay,我在jsp页面中执行javascript时遇到问题。如果我从文件系统调用下面的页面，它将非常有效，也就是说，我在地址栏C:\…\heatmap2.jsp中编写它 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"

我在jsp页面中执行javascript时遇到问题。如果我从文件系统调用下面的页面，它将非常有效，也就是说，我在地址栏C:\…\heatmap2.jsp中编写它

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Energy Heatmap </title>
    <style>
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 80% }
      h1 { position:absolute; }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=true?key=AIzaSyCzoFE1ddY9Ofv0jjOvA3yYdgzV4JvCNl4"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script type='text/javascript'>

        /*Array in cui saranno inseriti i punti da visualizzare nella mappa
        */
        var heatMapData = new Array();

        function loadHeatMapData(callback)
        {

            $.ajax
            ({
                type: "GET",
                url: "http://localhost:8080/EnergyManagement-portlet/api/secure/jsonws/sample/get-samples-time-by-name?energyName=EnAssGS",
                dataType: "jsonp",
                crossDomain: true,
                cache: false,
                success: function(jsonData)
                {

                            for (var i = 0; i < jsonData.length; i++) 
                            {
                                var decodedData = JSON.parse(jsonData[i]);
                                var lng = decodedData["_longitude"]; 
                                var lat = decodedData["_latitude"];
                                var energyIntensity = decodedData["_value"];

                                heatMapData.push({location: new google.maps.LatLng(lat, lng), weight: energyIntensity});
                            }
                         return callback(heatMapData);  
                         }
            })
        }

       function drawHeatMap()
       {
        // map center
        var myLatlng = new google.maps.LatLng(40.8333333, 14.25);
        // map options,
        var myOptions = {
          zoom: 5,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        // standard map
       map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

       var heatMap = new google.maps.visualization.HeatmapLayer({
           data: heatMapData,
           dissipating: false
       });

       heatMap.setMap(map);

       /*
       Questi punti dovrebbero prevenire da un file.
       */    
       var vehiclePath = [
                                    new google.maps.LatLng(40.85235, 14.26813),
                                    new google.maps.LatLng(40.85236, 14.26822),
                                    new google.maps.LatLng(40.85236, 14.26822),
                                    new google.maps.LatLng(40.85236, 14.26816),                                    
                                    new google.maps.LatLng(40.85258, 14.26811),
                                    new google.maps.LatLng(40.85364, 14.26793),
                                    new google.maps.LatLng(40.85414, 14.26778),
                                    new google.maps.LatLng(40.8554, 14.2676),
                                    new google.maps.LatLng(40.8579, 14.27286),
                                    new google.maps.LatLng(40.85821, 14.27291),
                                    new google.maps.LatLng(40.8584, 14.27302),
                                    new google.maps.LatLng(40.85859, 14.27325),
                                    new google.maps.LatLng(40.8587, 14.27421),
                                    new google.maps.LatLng(40.85865, 14.27433),
                                    new google.maps.LatLng(40.85866, 14.27446),
                                    new google.maps.LatLng(40.86656, 14.291),
                                    new google.maps.LatLng(40.86653, 14.29102)

                                    ];

       var path = new google.maps.Polyline({
            path: vehiclePath,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 2
          });

          path.setMap(map);
         }   
       /*Callback*/
       loadHeatMapData(drawHeatMap)  

</script>





  </head>
  <body>
    <div id="map-canvas"></div>

   <p id="demo"></p>

  </body>
</html>


能量热图
html{高度：100%}
正文{高度：100%；边距：0；填充：0}
#地图画布{高度：80%}
h1{位置：绝对；}
/*cui saranno inseriti i punti da Visualizare nella mappa中的数组
*/
var heatMapData=新数组（）；
函数loadHeatMapData（回调）
{
$.ajax
({
键入：“获取”，
url:“http://localhost:8080/EnergyManagement-portlet/api/secure/jsonws/sample/get samples time by name？energyName=EnAssGS“，
数据类型：“jsonp”，
跨域：是的，
cache:false，
成功：函数（jsonData）
{
对于（var i=0；i

不幸的是，当我试图在Liferay门户中调用它时，我看不到任何javascript正在运行。下面的代码创建了一个热图（使用GoogleAPI），这些点是通过对Web服务器的异步调用获得的通过SOAP（这是一种可从我的项目实体获得的方法）

我还尝试添加标签

<header-portlet-javascript>
  "https://maps.googleapis.com/maps/api/js?libraries=visualization sensor=true?key=AIzaSyCzoFE1ddY9Ofv0jjOvA3yYdgzV4JvCNl4"
</header-portlet-javascript>


"https://maps.googleapis.com/maps/api/js?libraries=visualization 传感器=真？键=AIzaSyCzoFE1ddY9Ofv0jjOvA3yYdgzV4JvCNl4“

没有成功。

感谢您的帮助

在当前无法测试代码的情况下，我发现它存在两个问题：

JSP包含

、

和

元素等。Portlet中不允许使用这些元素，它们的工作方式与独立页面中的工作方式不同

此外，您的文档包含多余的引用

<header-portlet-javascript>
  "https://maps.googleapis.com/and/so/on"
</header-portlet-javascript>


"https://maps.googleapis.com/and/so/on"

我希望这会直接添加到页面中，导致双引号

<script type="text/javascript" src=""https://maps.googleapis.com/and/so/on""></script>

显然，这是行不通的。当您将portlet添加到生成的页面时，请检查该页面的最终内容。另外，请删除多余的引号，然后重试。

Deae Olaf，我将你的建议应用到我的代码中。在InternetExplorerDebbuger的支持下，我发现drawHeatmpaData中的代码就像被注释一样（请看图片）

为了防止您的代码被注释，我发现我们不能使用//进行注释，因为所有的文本甚至代码都被视为注释。

我将所有//替换为/**/但它仍然不起作用

作为一个参考点，您可以浏览页面以查找Liferay开发的Google Map portlet。