Я сделал следующий виджет, используя только html, css и js. Это отлично работает само по себе, когда вы ищете ключевые слова, которые есть в нашей базе данных (например, персик или клубника):
<!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 или wirecloud fispace, это происходит, когда он показывает ошибку, связанную с отсутствием ключа API. Итак, я получил ключ API Google и добавил его так:
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGrI_BKBCPZfOCskNEH5B5wiJhuV1yKeI"></script>
Тем не менее, я получаю серую карту внутри wire-cloud. Может ли кто-нибудь помочь мне решить эту проблему? Спасибо.
