在Liferay中调用Google API时出现问题
[英]Issue calling Google API in Liferay
问题描述
I have problem with the execution of the javascript inside a jsp page. 
我在jsp页面内执行javascript时遇到问题。 I have the following page which works perfectly if I call it from my filesystem, that is, I write in the address bar C:\\...\\heatmap2.jsp. 我有以下页面，如果我从文件系统中调用它，则该页面可以完美地工作，也就是说，我在地址栏中写了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>
Unfortunately, when I try to call it inside my Liferay portal, I can't see any javascript running. 不幸的是，当我尝试在Liferay门户中调用它时，看不到任何JavaScript正在运行。 The following code creates a heatmap (with the Google API), the points are obtained with an asynchronous call to the webserver via SOAP (it's a method available from an entity of my project). 以下代码创建了一个热图（使用Google API），这些点是通过SOAP对Web服务器的异步调用获得的（这是我的项目实体中提供的一种方法）。
I also tried to add the tag 我也尝试添加标签
<header-portlet-javascript>
"https://maps.googleapis.com/maps/api/js?libraries=visualization sensor=true?key=AIzaSyCzoFE1ddY9Ofv0jjOvA3yYdgzV4JvCNl4"
</header-portlet-javascript>
with no sucess. 没有成功。 Any help is appreciated. 任何帮助表示赞赏。
3 个解决方案
解决方案1
0 2014-11-29 14:28:48
Without being able to test your code currently, I see two issues with it: 当前无法测试您的代码，我看到了两个问题：
Your JSP contains <html> , <head> and <body> elements etc. These are not allowed in portlets and won't work the same way as in a standalone page 您的JSP包含<html> ， <head>和<body>等元素。portlet中不允许使用这些元素，并且它们的工作方式与独立页面中的工作方式不同
Further, your contains superfluous quotes. 此外，您包含多余的引号。
<header-portlet-javascript>
"https://maps.googleapis.com/and/so/on"
</header-portlet-javascript>
I'd expect this to literally be added to the page, resulting in double quotes 我希望将其逐字地添加到页面中，从而导致双引号
<script type="text/javascript" src=""https://maps.googleapis.com/and/so/on""></script>
Obviously, this doesn't work. 显然，这是行不通的。 Please check what ends up on the generated page when you add your portlet to it. 将portlet添加到生成的页面时，请检查生成的页面上的内容。 Also, remove the extra quotes and try again. 另外，删除多余的引号，然后重试。
解决方案2
0 2014-11-30 10:26:26
Deae Olaf, I applied your advice to my code. Deae Olaf，我已将您的建议应用于我的代码。 With the support of the internet explorer debbuger, I found out that the code inside the drawHeatmpaData is like being commented (please, look at the picture) 在Internet Explorer Debbuger的支持下，我发现drawHeatmpaData中的代码就像被注释一样（请看图片）
.
。
解决方案3
0 2014-11-30 11:36:40
In order to prevent from you code being commented, I found that we cannot use // to comment, because all the text even the code is treated as comment. 为了防止您的代码被注释，我发现我们不能使用//进行注释，因为所有文本（甚至代码）都被视为注释。 I replace all // with /**/ but it still does not work. 我将所有// //替换为/ ** /，但仍然无法正常工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.