fiware - 私のウィジェットがwirecloud内で動作しないのはなぜですか?

Question

html、css、js だけを使用して次のウィジェットを作成しました。DB に含まれるキーワード (桃やイチゴなど) を検索する場合、これだけで問題なく機能します。

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

Eclipse で fispace のアドオンを使用してウィジェットに変換し、fiware lab または fispace の wirecloud にアップロードすると、API キーが見つからないというエラーが表示されます。だから私はGoogleのAPIキーを取得し、次のように追加しました:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGrI_BKBCPZfOCskNEH5B5wiJhuV1yKeI"></script>

それでも、ワイヤクラウド内のグレー表示されたマップになってしまいます。 誰でもこの問題を解決するのを手伝ってもらえますか? ありがとうございました。

fiware - 私のウィジェットがwirecloud内で動作しないのはなぜですか?

1 に答える 1

Related

Reference