0
我做了下面的小部件，只是使用html，css和js。當您搜索，在我們的數據庫ixist關鍵字（如桃或草莓）這工作得很好地獨立：爲什麼我的widget不能在wirecloud裏面工作？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Search Seller widget</title>
<meta name="viewport" content="width=device-width">
<style>
#mapCanvas {
width: 550px;
height: 600px;
float: left;
border-style: solid; color: #59C0DF;
}
#infoPanel {
float: left;
margin-left: 10px;
}
#infoPanel div {
margin-bottom: 5px;
}
#tbl{
border-collapse: collapse;
}
#tbl, td, th{
border: 2px solid #70B8FF;
padding: 5px;
}
th{
font-style: bold;
color: black;
background-color: #59C0DF;
}
.btn {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Courier New;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
.textbox {
border: 1px solid #848484;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
outline:0;
height:25px;
width: 120px;
padding-left:10px;
padding-right:10px;
}
</style>
</head>
<body onload="initialize(45.2671, 19.8335,0)"> <!--bgcolor="#E6E6FA"-->
<div id="top">
<label>
<input type="url" id="url" class="textbox" value="">
</label>
<label>
<button id="get" class="btn">GET</button>
</label>
<label>City</label>
<input type="text" id="City" class="textbox" value="" readonly>
<label>Company</label>
<input type="text" id="Company" class="textbox" value="" readonly>
<label>Latitude</label>
<input type="text" id="Lat" class="textbox" value="" readonly>
<label>Longitude</label>
<input type="text" id="Lon" class="textbox" value="" readonly>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
</br>
<div id="map" style="width:500px;height:380px; border-style: solid; border-color: #3498db; display: none;"></div>
</div>
<div>
<a href="http://www.panonit.com" target="_blank"> <img src="PanonitLogo.png" alt="Logo" style="width:160px;height:75px; margin-top:15px" > </a>
<a href="http://www.finish-project.eu/" target="_blank"> <img src="Cropped.png" alt="Logo" style="width:160px;height:75px;margin-left:15px; margin-top:15px" > </a>
<a href="http://ec.europa.eu/index_en.htm" target="_blank"> <img src="European.jpg" alt="Logo" style="width:160px;height:75px;margin-left:15px; margin-top:15px" > </a>
</div>
<script>
var obj;
var cors_api_url = 'https://cors-anywhere.herokuapp.com/';
function doCORSRequest(options, printResult) {
var x = new XMLHttpRequest();
x.open(options.method, cors_api_url + options.url);
x.onload = x.onerror = function() {
printResult(
options.method + ' ' + options.url + '\n' +
x.status + ' ' + x.statusText + '\n\n' +
(x.responseText || '')
);
};
x.send(options.data);
}
// Bind event
(function() {
var urlField = document.getElementById('url');
var obj;
document.getElementById('get').onclick = function(e) {
var glat;
var glon;
e.preventDefault();
doCORSRequest({
method: this.id = 'GET',
url: 'trace.panonit.com/widgets/GetFieldCoordinates/' + urlField.value
}, function printResult(result) {
result = result.substring(result.length, result.indexOf('{'));
obj = JSON.parse(result);
var cityField = document.getElementById('City');
cityField.value = obj.City;
var company = document.getElementById('Company');
company.value = obj.Company;
var lat = document.getElementById('Lat');
lat.value = obj.Lat;
glat = lat.value;
var lon = document.getElementById('Lon');
lon.value = obj.Lon;
glon = lon.value;
if(obj.Lat==null || obj.Lon ==null)
{
//initialize(glat, glon);
document.getElementById('City').value = "City not found";
document.getElementById('Company').value = "Company not found";
document.getElementById('Lat').value = "Latitude not found";
document.getElementById('Lon').value = "Longitude not found";
initialize(45.2671, 19.8335,0);
}
else {
initialize(glat, glon,1);
}
});
};
})();
function initialize(lat, lon, displayMarker) {
document.getElementById('map').style.display = "";
var mapProp = {
center:new google.maps.LatLng(lat,lon),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map"),mapProp);
if(displayMarker==1){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lon),
animation: google.maps.Animation.DROP,
map: map,
title: 'Crop marker!'
});
}
}
</script>
</body>
</html>
當我將其轉換爲一個小部件fispace的的幫助下添加Eclipse，然後進行在fiware實驗室或fispace的wirecloud上傳它，當它顯示錯誤缺少api密鑰時。所以，我得到了谷歌的API密鑰和附加它像這樣：
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGrI_BKBCPZfOCskNEH5B5wiJhuV1yKeI"></script>
但我還是最終與線雲內變灰地圖。 任何人都可以幫我解決這個問題嗎？謝謝。
JavaScript控制檯中的任何消息？ – Meier
是的，錯誤403和沒有找到google api鍵的錯誤。如果你有一個fiware實驗室帳戶，你可以看到自己的小部件。其被稱爲賣家位置 – Vrankela
或嘗試從谷歌地圖教程作爲小部件創建一個簡單的例子。 https://developers.google.com/maps/documentation/javascript/tutorial – Meier