Как вставить картинку (из Excel файла) в балун?

Доброго времени суток. Есть сайт компании, на нем Яндекс карта, на которой отмечены торговые точки. При нажатии на точку раскрывается балун, который содержит информацию о торговой точке (текстового формата). Появилась задача добавить в балун логотип торгового бренда. Информация о торговой точке тянется из Excel файла. Как просто вставить логотип в балун знаю. Вопрос в том как вставить определенный логотип из xlsx файла.

JS код:

ymaps.ready(init); function init(){     var myMap = new ymaps.Map("map", {         center: [55.76, 37.64],         zoom: 12,         controls: ['smallMapDefaultSet']     });      ymaps.geolocation.get({         provider: 'browser',     }).then(function (result) {     	myMap.setCenter(result.geoObjects.position);     });      var clusterer = new ymaps.Clusterer({         preset: 'islands#invertedDarkGreenClusterIcons',  		groupByCoordinates: false     });      var geoObjects = [];      $.ajax({  	    type: 'GET',  	    url: 'https://oem-einvoice.ru/map/sbrf/backend/partners.php',  	    data: {},  	    dataType: 'json', 	    success: function (data) {  	        $.each(JSON.parse(data), function(i, el) { 	        	var objectOptions = {};  	        	if (el.brandIconName != "") { 	        		objectOptions = { 	        			iconLayout: 'default#image', 			            iconImageHref: 'assets/images/icons/brands/' + el.brandIconName, 			            iconImageSize: [65, 65], 			            iconImageOffset: [-5, -30] 	        		}; 	        	} 	        	else if (el.type != "") { 	        		var iconImageName = "";  	        		switch (el.type) { 						case "АЗС": 					    	iconImageName = "azs.png"; 					    	break; 					    case "Красота": 					    	iconImageName = "beauty.png"; 					    	break; 					    case "Кафе": 					    	iconImageName = "cafe.png"; 					    	break; 					    case "Для дома": 					    	iconImageName = "home.png"; 					    	break; 					    case "Медицина": 					    	iconImageName = "medic.png"; 					    	break; 					    case "Отели": 					    	iconImageName = "model.png"; 					    	break; 					    case "Запчасти": 					    	iconImageName = "parts.png"; 					    	break; 					    case "Продукты": 					    	iconImageName = "products.png"; 					    	break; 					    case "СТО": 					    	iconImageName = "sto.png"; 					    	break; 					    default: 					    	iconImageName = "universe.png"; 					}  					if (iconImageName != "") { 						objectOptions = { 		        			iconLayout: 'default#image', 				            iconImageHref: 'assets/images/icons/categories/' + iconImageName, 				            iconImageSize: [65, 65], 				            iconImageOffset: [-5, -30] 		        		}; 					} 	        	} 	        	 	            geoObjects.push(new ymaps.Placemark( 		        	el.coords, 		        	{ 		                balloonContentHeader: `&lt;h1 class='baloon-header'&gt;` + el.brand + `&lt;/h1&gt;`, 		                balloonContentBody: ` 						&lt;div class="baloon-body"&gt; 							&lt;img src='assets/images/icons/logo/' height='100px' weight='50px'&gt;`+ el.logoCompany +`&lt;/img&gt; 			                &lt;p&gt;`+ el.products +`&lt;/p&gt; 			                &lt;p&gt;&lt;span class="data-type-title"&gt;Адрес:&lt;/span&gt; &lt;span&gt;`+ el.region +`, ` + el.address + `&lt;/span&gt;&lt;/p&gt; 			                &lt;p&gt;&lt;span class="data-type-title"&gt;Скидка:&lt;/span&gt; &lt;span&gt;`+ el.discount +`&lt;/span&gt;&lt;/p&gt; 			                &lt;p&gt;&lt;span class="data-type-title"&gt;НДС:&lt;/span&gt; &lt;span&gt;`+ el.tax +`&lt;/span&gt;&lt;/p&gt; 			                &lt;p&gt;&lt;span class="data-type-title"&gt;Координаты:&lt;/span&gt; &lt;span&gt;`+ el.coords.join(',') +`&lt;/span&gt;&lt;/p&gt; 			                &lt;p&gt;&lt;span class="data-type-title"&gt;Доп.условия:&lt;/span&gt; &lt;span&gt;`+ el.additionalTerms +`&lt;/span&gt;&lt;/p&gt; 		                &lt;/div&gt; 		                `, 		            }, objectOptions 	            )); 	        });  	        clusterer.add(geoObjects);     		myMap.geoObjects.add(clusterer); 	    } 	}); }

1

ymaps.ready(init); function init(){ var myMap = new ymaps.Map("map", { center: [55.76, 37.64], zoom: 12, controls: ['smallMapDefaultSet'] }); ymaps.geolocation.get({ provider: 'browser', }).then(function (result) { myMap.setCenter(result.geoObjects.position); }); var clusterer = new ymaps.Clusterer({ preset: 'islands#invertedDarkGreenClusterIcons', groupByCoordinates: false }); var geoObjects = []; $.ajax({ type: 'GET', url: 'https://oem-einvoice.ru/map/sbrf/backend/partners.php', data: {}, dataType: 'json', success: function (data) { $.each(JSON.parse(data), function(i, el) { var objectOptions = {}; if (el.brandIconName != "") { objectOptions = { iconLayout: 'default#image', iconImageHref: 'assets/images/icons/brands/' + el.brandIconName, iconImageSize: [65, 65], iconImageOffset: [-5, -30] }; } else if (el.type != "") { var iconImageName = ""; switch (el.type) { case "АЗС": iconImageName = "azs.png"; break; case "Красота": iconImageName = "beauty.png"; break; case "Кафе": iconImageName = "cafe.png"; break; case "Для дома": iconImageName = "home.png"; break; case "Медицина": iconImageName = "medic.png"; break; case "Отели": iconImageName = "model.png"; break; case "Запчасти": iconImageName = "parts.png"; break; case "Продукты": iconImageName = "products.png"; break; case "СТО": iconImageName = "sto.png"; break; default: iconImageName = "universe.png"; } if (iconImageName != "") { objectOptions = { iconLayout: 'default#image', iconImageHref: 'assets/images/icons/categories/' + iconImageName, iconImageSize: [65, 65], iconImageOffset: [-5, -30] }; } } geoObjects.push(new ymaps.Placemark( el.coords, { balloonContentHeader: `<h1 class='baloon-header'>` + el.brand + `</h1>`, balloonContentBody: ` <div class="baloon-body"> <img src='assets/images/icons/logo/' height='100px' weight='50px'>`+ el.logoCompany +`</img> `+ el.products +` Адрес: `+ el.region +`, ` + el.address + ` Скидка: `+ el.discount +` НДС: `+ el.tax +` Координаты: `+ el.coords.join(',') +` Доп.условия: `+ el.additionalTerms +` </div> `, }, objectOptions )); }); clusterer.add(geoObjects); myMap.geoObjects.add(clusterer); } }); }

PHP код:

&lt;?php  require_once(__DIR__ . '/vendor/autoload.php');  $xlsxPartnersFileName = 'partners.xlsx'; $xlsxParnersFilePath = __DIR__ . '/' . $xlsxPartnersFileName;  $jsonPartnersFileName = 'partners.json'; $jsonPartnersFilePath = __DIR__ . '/' . $jsonPartnersFileName;  if (file_exists($jsonPartnersFilePath)) { 	$xlsxParnersFileModTime = filemtime($xlsxParnersFilePath); 	$jsonPartnersFileModTime = filemtime($jsonPartnersFilePath);  	if ($xlsxParnersFileModTime &gt; $jsonPartnersFileModTime) { 		jsonPartnersFileUpdate($xlsxParnersFilePath, $jsonPartnersFilePath); 	} } else { 	jsonPartnersFileUpdate($xlsxParnersFilePath, $jsonPartnersFilePath); }  $jsonPartners = file_get_contents($jsonPartnersFilePath); header('Content-Type: application/json; charset=utf-8'); echo json_encode($jsonPartners);   function jsonPartnersFileUpdate($xlsxFilePath, $jsonFilePath) { 	$partners = getXlsxPartners($xlsxFilePath); 	file_put_contents($jsonFilePath, json_encode($partners)); }  function getXlsxPartners($filePath) { 	$reader = new PhpOfficePhpSpreadsheetReaderXlsx(); 	$reader-&gt;setReadDataOnly(true); 	$spreadsheet = $reader-&gt;load($filePath); 	$sheet = $spreadsheet-&gt;getSheet($spreadsheet-&gt;getFirstSheetIndex()); 	$rawData = $sheet-&gt;toArray();  	$partners = []; 	for ($i=1; $i&lt;count($rawData); $i++) { 		if (!empty($rawData[$i][8])) { 			$partners[] = [ 				'type' =&gt; (!empty($rawData[$i][0])) ? $rawData[$i][0] : '', 				'company' =&gt; (!empty($rawData[$i][1])) ? $rawData[$i][1] : '', 				'brand' =&gt; (!empty($rawData[$i][2])) ? $rawData[$i][2] : '', 				'region' =&gt; (!empty($rawData[$i][3])) ? $rawData[$i][3] : '', 				'address' =&gt; (!empty($rawData[$i][4])) ? $rawData[$i][4] : '', 				'products' =&gt; (!empty($rawData[$i][5])) ? $rawData[$i][5] : '', 				'discount' =&gt; (!empty($rawData[$i][6])) ? $rawData[$i][6] : '', 				'tax' =&gt; (!empty($rawData[$i][7])) ? $rawData[$i][7] : '', 				'coords' =&gt; explode(',', $rawData[$i][8]), 				'brandIconName' =&gt; (!empty($rawData[$i][9])) ? $rawData[$i][9] : '', 				'additionalTerms' =&gt; (!empty($rawData[$i][10])) ? $rawData[$i][10] : '', 				'logoCompany' =&gt; (!empty($rawData[$i][11])) ? $rawData[$i][11] : '', 			]; 		} 	}  	return $partners; }

1

<?php require_once(__DIR__ . '/vendor/autoload.php'); $xlsxPartnersFileName = 'partners.xlsx'; $xlsxParnersFilePath = __DIR__ . '/' . $xlsxPartnersFileName; $jsonPartnersFileName = 'partners.json'; $jsonPartnersFilePath = __DIR__ . '/' . $jsonPartnersFileName; if (file_exists($jsonPartnersFilePath)) { $xlsxParnersFileModTime = filemtime($xlsxParnersFilePath); $jsonPartnersFileModTime = filemtime($jsonPartnersFilePath); if ($xlsxParnersFileModTime > $jsonPartnersFileModTime) { jsonPartnersFileUpdate($xlsxParnersFilePath, $jsonPartnersFilePath); } } else { jsonPartnersFileUpdate($xlsxParnersFilePath, $jsonPartnersFilePath); } $jsonPartners = file_get_contents($jsonPartnersFilePath); header('Content-Type: application/json; charset=utf-8'); echo json_encode($jsonPartners); function jsonPartnersFileUpdate($xlsxFilePath, $jsonFilePath) { $partners = getXlsxPartners($xlsxFilePath); file_put_contents($jsonFilePath, json_encode($partners)); } function getXlsxPartners($filePath) { $reader = new PhpOfficePhpSpreadsheetReaderXlsx(); $reader->setReadDataOnly(true); $spreadsheet = $reader->load($filePath); $sheet = $spreadsheet->getSheet($spreadsheet->getFirstSheetIndex()); $rawData = $sheet->toArray(); $partners = []; for ($i=1; $i<count($rawData); $i++) { if (!empty($rawData[$i][8])) { $partners[] = [ 'type' => (!empty($rawData[$i][0])) ? $rawData[$i][0] : '', 'company' => (!empty($rawData[$i][1])) ? $rawData[$i][1] : '', 'brand' => (!empty($rawData[$i][2])) ? $rawData[$i][2] : '', 'region' => (!empty($rawData[$i][3])) ? $rawData[$i][3] : '', 'address' => (!empty($rawData[$i][4])) ? $rawData[$i][4] : '', 'products' => (!empty($rawData[$i][5])) ? $rawData[$i][5] : '', 'discount' => (!empty($rawData[$i][6])) ? $rawData[$i][6] : '', 'tax' => (!empty($rawData[$i][7])) ? $rawData[$i][7] : '', 'coords' => explode(',', $rawData[$i][8]), 'brandIconName' => (!empty($rawData[$i][9])) ? $rawData[$i][9] : '', 'additionalTerms' => (!empty($rawData[$i][10])) ? $rawData[$i][10] : '', 'logoCompany' => (!empty($rawData[$i][11])) ? $rawData[$i][11] : '', ]; } } return $partners; }

Дополнительно:

Не балун, а баловник

Ипатьев, Ну типо

+ Заказать

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

- Есть ответ
- 07.04.2024
Ответить
Для вставки изображения из Excel файла в балун на веб-странице можно воспользоваться следующим методом:

1. Сначала необходимо экспортировать изображение из Excel файла в формате, который поддерживается веб-страницами, например, PNG или JPEG.

2. Затем вам нужно загрузить изображение на сервер, где хранится ваш веб-сайт. Вы можете использовать FTP или любой другой способ загрузки файлов на сервер.

3. После того, как изображение будет загружено на сервер, вам нужно получить URL-адрес этого изображения.

4. Далее вам нужно внедрить этот URL-адрес в HTML-код вашей веб-страницы. Для этого вы можете использовать тег следующим образом:

XHTML

<img src="URL-адрес изображения" alt="Описание изображения">

1

<img src="URL-адрес изображения" alt="Описание изображения">

5. Наконец, если вы хотите отобразить изображение в балуне на карте, например, с помощью API Google Maps, вы можете использовать библиотеку, которая поддерживает встраивание изображений в балуны. Например, для Google Maps API вы можете использовать InfoBox или InfoBubble.

Таким образом, следуя этим шагам, вы сможете успешно вставить изображение из Excel файла в балун на вашей веб-странице.

Как вставить картинку (из Excel файла) в балун?

Дополнительно:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

Как вставить картинку (из Excel файла) в балун?

Дополнительно:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно