вывести шаблон javascript на html-страницу внутри строки div
Для других людей, изучающих это, я только что рассмотрел это с помощью GoogleMap.snapshot и обработал результат растрового изображения с помощью этого теста над потоком: Как сделать ImageView с закругленными углами?
Имейте в виду, что это допустимо только в том случае, если вы собираетесь иметь статическую карту, с которой не будет взаимодействовать.
Убедитесь, что вы сделали снимок после загрузки карты.
Я обновил код помощника изображения, чтобы рисовать с помощью пути для поддержки округления только некоторых углов. то есть. Если вы хотите округлить только 2 из углов.
Вам просто нужна функция round round rect, которая принимает float []
. Я показываю индикатор выполнения, пока не получаю обратный вызов из GoogleMap загрузил прослушиватель, чем я делаю снимок.
Если вы сделаете снимок слишком рано, вы получите не сможете создать растровое изображение с ошибкой ширины и высоты 0.
Надеюсь, это поможет кому-то, кто ищет для закругленных углов или другой странной формы в моментальном снимке статической карты.
1 ответ
Я удалил несколько строк, которые мне показались ненужными, но вы можете добавить их обратно, если хотите. Следующий код должен работать так, как вы ожидали
$(document).ready(function () {
var item, tile, author, publisher, bookLink, bookImg;
var outputList = $("#list-output");
//listener for search button
$("#search").click(function () {
var searchData = $("#search-box").val();
if (searchData === "") {
// dsiplayErr();
} else {
console.log(searchData);
$.get("https://www.googleapis.com/books/v1/volumes?q=" + searchData, function (response) {
for (var i = 0; i < response.items.length; i++) {
item = response.items[i];
title = item.volumeInfo.title;
author = item.volumeInfo.authors;
publisher = item.volumeInfo.publisher;
bookLink = item.selfLink;
bookImg = item.volumeInfo.imageLinks.thumbnail;
// in production code, item.text should have the HTML entities escaped.
var html;
if ((response.items.length % 2 != 0) && (i == response.items.length - 1)) {
html = "";
html += "<div class='row'>";
html += formatOutput(title, author, publisher, bookLink, bookImg);
html += "</div>";
outputList.append(html);
}
else {
if (i % 2 == 0) {
html = "";
html += "<div class='row'>";
}
html += formatOutput(title, author, publisher, bookLink, bookImg);
if (i % 2 != 0) {
html += "</div>";
outputList.append(html);
}
}
}
});
}
});
});
function formatOutput(title, author, publisher, bookLink, bookImg) {
// console.log(title + ""+ author +" "+ publisher +" "+ bookLink+" "+ bookImg)
var htmlCard1 = `<div class="col-lg-6">
<div class="card" style="">
<div class="row no-gutters">
<div class="col-md-4">
<img src="${bookImg}" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">Author: ${author}</p>
<p class="card-text"><small class="text-muted">Publisher: ${publisher}</small></p>
<a href="${bookLink}" class="btn btn-secondary">More Info</a>
</div>
</div>
</div>
</div>
</div>`
return htmlCard1;
}