Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.11.2021, 07:44
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

MAP AREA конфликт двух функций
Я уже создавал похожую тему но она не дожила до логического конца так как нужно было обращаться лично но как то не удобно было.

И тут я снова решил к ней вернутся и что то сам поддержал, что то поискал и вроде все нужные функции в ней работают так как нужно НО!!! они работают как нужно по отдельности, когда я пробую их использовать в одном коде то там возникают ошибки которые я не могу решить.

В чем суть скрипта, должно работать как в гугл карта, перенос, масштаб, наведение на объект, и что бы при масштабирование не чего не ломалось.

Ниже я приведу 3 кода где будет показано, что в первой будет хорошо работать выделение и масштабирование, во второй как хорошо работает зум и перенос, а в третьем кода все рушится когда я эти функции объединяю.

3 КОД И ЕСТЬ СУТЬ ТЕМЫ

Последний раз редактировалось Сергей Ракипов, 22.11.2021 в 07:49.
Ответить с цитированием
  #2 (permalink)  
Старый 22.11.2021, 07:46
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Первый код
В нем хорошо работает выделение объектов на карте и если начать увеличивать масштаб ctrl+ или ctrl- то границы объектов так же будет увеличивается или уменьшатся

<!doctype html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>index</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.blok {
			margin: 40px auto 0px;
			max-width: 900px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		.karta {
			width: 100%;
			height: 400px;
			cursor: crosshair;
			overflow: hidden;
			padding: 0;
			margin: 0;
			touch-action: none;
			border: 10px solid #7F7F7F;
		}
		.karta img {
			padding: 0;
			margin: 0;
			display: block;
		}
		.upravlenie_blok {
			width: 148px;
			height: 54px;
			margin: 40px auto 0px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10px 10px 10px 10px;
		}
		.plus {
			width: 54px;
			height: 54px;
			cursor: pointer;
			margin: 0px 20px 0px 0px;
			background-image: url(https://rakipov.ru/files/plus_ikonka.svg);
			background-repeat: no-repeat;
			background-position: center;
			background-size: 95%;
		}
		.minus {
			width: 54px;
			height: 54px;
			cursor: pointer;
			background-image: url(https://rakipov.ru/files/minus_ikonka.svg);
			background-repeat: no-repeat;
			background-position: center;
			background-size: 95%;
		}
		.minus.dis,
		.plus.dis {
			opacity: .2;
		}
	</style>
	<script  type="text/javascript"  src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
<div class="blok">
	<div class="karta">
		<img src="https://rakipov.ru/files/map.jpg" usemap="#619b0da354566" alt="">
	</div>
	<div class="upravlenie_blok">
		<div class="plus dis"></div>
		<div class="minus"></div>
	</div>
</div>
<map name="619b0da354566"><area shape="poly" href="/#0" coords="385,734,385,753,422,753,459,753,459,734,459,715,422,715,385,715"><area shape="poly" href="/#1" coords="78,703,78,764,154,764,230,764,230,703,230,642,214,642,198,643,197,689,197,736,153,736,109,736,109,690,109,643,104,643,99,642,88,642,78,641"><area shape="poly" href="/#2" coords="839,634,838,636,838,702,839,768,854,768,870,768,870,701,870,633,855,633,839,633"><area shape="poly" href="/#3" coords="726,634,725,636,725,702,726,768,741,768,757,768,757,701,757,633,742,633,726,633"><area shape="poly" href="/#4" coords="610,634,609,636,609,702,610,768,625,768,641,768,641,701,641,633,626,633,610,633"><area shape="poly" href="/#5" coords="462,605,451,616,475,640,499,665,499,715,499,766,514,766,529,766,529,707,529,649,501,621,474,593"><area shape="poly" href="/#6" coords="338,621,310,649,310,707,311,766,326,766,341,766,341,715,341,665,365,641,389,617,377,605,366,593"><area shape="poly" href="/#7" coords="404,553,387,570,404,586,421,603,437,586,454,570,437,553,421,536"><area shape="poly" href="/#8" coords="937,561,937,596,963,596,989,596,990,595,990,594,1001,561,1012,527,1002,527,993,527,965,526,937,526"><area shape="poly" href="/#9" coords="496,465,475,487,496,508,518,529,539,508,560,487,539,465,518,444"><area shape="poly" href="/#10" coords="984,434,945,435,940,435,936,435,936,470,936,504,976,504,1017,504,1027,470,1038,436,1038,434,1038,433,1030,433,1023,433"><area shape="poly" href="/#11" coords="776,502,777,574,840,574,903,574,903,514,903,453,902,453,901,453,889,458,877,463,876,504,876,545,846,545,815,545,815,501,815,457,831,457,848,457,848,452,849,447,849,439,849,431,813,431,776,431"><area shape="poly" href="/#12" coords="581,429,580,431,580,460,581,489,611,489,641,489,641,459,641,429,611,428,581,428"><area shape="poly" href="/#13" coords="136,356,111,382,111,383,111,384,184,454,257,525,258,525,259,525,284,499,309,473,309,472,309,471,235,401,162,331,161,330,161,330"><area shape="poly" href="/#14" coords="879,313,878,313,878,329,878,344,938,344,998,344,998,346,999,347,999,353,999,359,1012,359,1025,359,1025,336,1025,313,952,312,879,312"><area shape="poly" href="/#15" coords="531,324,531,343,580,343,629,343,629,324,629,304,580,304,531,304"><area shape="poly" href="/#16" coords="777,331,777,360,798,360,819,360,819,331,819,303,798,302,777,302"><area shape="poly" href="/#17" coords="669,303,668,305,668,332,669,360,689,360,710,360,710,331,710,302,690,302,669,302"><area shape="poly" href="/#18" coords="878,206,879,222,938,222,997,222,998,223,999,225,999,231,999,237,1012,237,1025,237,1025,213,1025,190,952,190,878,190"><area shape="poly" href="/#19" coords="531,206,531,225,580,225,629,225,629,206,629,186,580,186,531,186"><area shape="poly" href="/#20" coords="672,198,672,224,690,224,707,224,707,198,707,172,689,171,672,171"><area shape="poly" href="/#21" coords="784,204,784,237,802,237,820,237,820,218,820,198,817,198,814,198,814,184,814,171,799,170,784,170"><area shape="poly" href="/#22" coords="283,176,283,194,327,194,372,194,412,235,453,276,453,323,453,369,472,369,490,369,490,315,490,262,439,210,387,159,335,158,283,158"><area shape="poly" href="/#23" coords="1110,96,1099,105,1099,106,1099,107,1119,130,1139,152,1139,153,1139,154,1112,178,1086,202,1086,204,1086,205,1094,215,1103,226,1104,226,1105,226,1143,190,1181,154,1180,152,1179,150,1150,118,1121,86,1121,86,1120,86"><area shape="poly" href="/#24" coords="531,87,531,106,580,106,629,106,629,87,629,67,580,67,531,67"><area shape="poly" href="/#25" coords="980,89,980,117,1001,117,1021,117,1021,89,1021,61,1001,61,980,61"><area shape="poly" href="/#26" coords="884,62,883,62,883,90,883,117,904,117,925,117,925,89,925,61,904,61,884,61"><area shape="poly" href="/#27" coords="786,89,786,117,807,117,827,117,827,89,827,61,807,61,786,61"><area shape="poly" href="/#28" coords="668,89,668,117,689,117,709,117,709,89,709,61,689,61,668,61"><area shape="poly" href="/#29" coords="78,69,78,130,95,130,111,130,111,69,111,7,94,7,78,7"></map>

<script src="https://cdn.jsdelivr.net/npm/imagemapster@1.5.4/dist/jquery.imagemapster.min.js"></script>
<script>
	$("img[usemap]").mapster({
	scaleMap: true,
	fill: true,
	fillColor: '2CA7DC',
	fillOpacity: 0.75,
	});
</script>
<script>
	window.onload = function () {
    var ImageMap = function (map) {
            var n,
                areas = map.getElementsByTagName('area'),
                len = areas.length,
                coords = [],
                previousWidth = 1920;
            for (n = 0; n < len; n++) {
                coords[n] = areas[n].coords.split(',');
            }
            this.resize = function () {
                var n, m, clen,
                    x = document.body.clientWidth / previousWidth;
                for (n = 0; n < len; n++) {
                    clen = coords[n].length;
                    for (m = 0; m < clen; m++) {
                        coords[n][m] *= x;
                    }
                    areas[n].coords = coords[n].join(',');
                }
                previousWidth = document.body.clientWidth;
                return true;
            };
            window.onresize = this.resize;
        },
        imageMap = new ImageMap(document.getElementById('map_ID'));
    imageMap.resize();
}
</script>

</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 22.11.2021, 07:48
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Второй код
В нем хорошо работает зум и перемещение карты

<!doctype html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>index</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.blok {
			margin: 40px auto 0px;
			max-width: 900px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		.karta {
			width: 100%;
			height: 400px;
			cursor: crosshair;
			overflow: hidden;
			padding: 0;
			margin: 0;
			touch-action: none;
			border: 10px solid #7F7F7F;
		}
		.karta img {
			padding: 0;
			margin: 0;
			display: block;
		}
		.upravlenie_blok {
			width: 148px;
			height: 54px;
			margin: 40px auto 0px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10px 10px 10px 10px;
		}
		.plus {
			width: 54px;
			height: 54px;
			cursor: pointer;
			margin: 0px 20px 0px 0px;
			background-image: url(https://rakipov.ru/files/plus_ikonka.svg);
			background-repeat: no-repeat;
			background-position: center;
			background-size: 95%;
		}
		.minus {
			width: 54px;
			height: 54px;
			cursor: pointer;
			background-image: url(https://rakipov.ru/files/minus_ikonka.svg);
			background-repeat: no-repeat;
			background-position: center;
			background-size: 95%;
		}
		.minus.dis,
		.plus.dis {
			opacity: .2;
		}
	</style>
</head>

<body>
<div class="blok">
	<div class="karta">
		<img src="https://rakipov.ru/files/map.jpg" usemap="#619b0da354566" alt="">
	</div>
	<div class="upravlenie_blok">
		<div class="plus dis"></div>
		<div class="minus"></div>
	</div>
</div>
<map name="619b0da354566"><area shape="poly" href="/#0" coords="385,734,385,753,422,753,459,753,459,734,459,715,422,715,385,715"><area shape="poly" href="/#1" coords="78,703,78,764,154,764,230,764,230,703,230,642,214,642,198,643,197,689,197,736,153,736,109,736,109,690,109,643,104,643,99,642,88,642,78,641"><area shape="poly" href="/#2" coords="839,634,838,636,838,702,839,768,854,768,870,768,870,701,870,633,855,633,839,633"><area shape="poly" href="/#3" coords="726,634,725,636,725,702,726,768,741,768,757,768,757,701,757,633,742,633,726,633"><area shape="poly" href="/#4" coords="610,634,609,636,609,702,610,768,625,768,641,768,641,701,641,633,626,633,610,633"><area shape="poly" href="/#5" coords="462,605,451,616,475,640,499,665,499,715,499,766,514,766,529,766,529,707,529,649,501,621,474,593"><area shape="poly" href="/#6" coords="338,621,310,649,310,707,311,766,326,766,341,766,341,715,341,665,365,641,389,617,377,605,366,593"><area shape="poly" href="/#7" coords="404,553,387,570,404,586,421,603,437,586,454,570,437,553,421,536"><area shape="poly" href="/#8" coords="937,561,937,596,963,596,989,596,990,595,990,594,1001,561,1012,527,1002,527,993,527,965,526,937,526"><area shape="poly" href="/#9" coords="496,465,475,487,496,508,518,529,539,508,560,487,539,465,518,444"><area shape="poly" href="/#10" coords="984,434,945,435,940,435,936,435,936,470,936,504,976,504,1017,504,1027,470,1038,436,1038,434,1038,433,1030,433,1023,433"><area shape="poly" href="/#11" coords="776,502,777,574,840,574,903,574,903,514,903,453,902,453,901,453,889,458,877,463,876,504,876,545,846,545,815,545,815,501,815,457,831,457,848,457,848,452,849,447,849,439,849,431,813,431,776,431"><area shape="poly" href="/#12" coords="581,429,580,431,580,460,581,489,611,489,641,489,641,459,641,429,611,428,581,428"><area shape="poly" href="/#13" coords="136,356,111,382,111,383,111,384,184,454,257,525,258,525,259,525,284,499,309,473,309,472,309,471,235,401,162,331,161,330,161,330"><area shape="poly" href="/#14" coords="879,313,878,313,878,329,878,344,938,344,998,344,998,346,999,347,999,353,999,359,1012,359,1025,359,1025,336,1025,313,952,312,879,312"><area shape="poly" href="/#15" coords="531,324,531,343,580,343,629,343,629,324,629,304,580,304,531,304"><area shape="poly" href="/#16" coords="777,331,777,360,798,360,819,360,819,331,819,303,798,302,777,302"><area shape="poly" href="/#17" coords="669,303,668,305,668,332,669,360,689,360,710,360,710,331,710,302,690,302,669,302"><area shape="poly" href="/#18" coords="878,206,879,222,938,222,997,222,998,223,999,225,999,231,999,237,1012,237,1025,237,1025,213,1025,190,952,190,878,190"><area shape="poly" href="/#19" coords="531,206,531,225,580,225,629,225,629,206,629,186,580,186,531,186"><area shape="poly" href="/#20" coords="672,198,672,224,690,224,707,224,707,198,707,172,689,171,672,171"><area shape="poly" href="/#21" coords="784,204,784,237,802,237,820,237,820,218,820,198,817,198,814,198,814,184,814,171,799,170,784,170"><area shape="poly" href="/#22" coords="283,176,283,194,327,194,372,194,412,235,453,276,453,323,453,369,472,369,490,369,490,315,490,262,439,210,387,159,335,158,283,158"><area shape="poly" href="/#23" coords="1110,96,1099,105,1099,106,1099,107,1119,130,1139,152,1139,153,1139,154,1112,178,1086,202,1086,204,1086,205,1094,215,1103,226,1104,226,1105,226,1143,190,1181,154,1180,152,1179,150,1150,118,1121,86,1121,86,1120,86"><area shape="poly" href="/#24" coords="531,87,531,106,580,106,629,106,629,87,629,67,580,67,531,67"><area shape="poly" href="/#25" coords="980,89,980,117,1001,117,1021,117,1021,89,1021,61,1001,61,980,61"><area shape="poly" href="/#26" coords="884,62,883,62,883,90,883,117,904,117,925,117,925,89,925,61,904,61,884,61"><area shape="poly" href="/#27" coords="786,89,786,117,807,117,827,117,827,89,827,61,807,61,786,61"><area shape="poly" href="/#28" coords="668,89,668,117,689,117,709,117,709,89,709,61,689,61,668,61"><area shape="poly" href="/#29" coords="78,69,78,130,95,130,111,130,111,69,111,7,94,7,78,7"></map>

<script>
	document.addEventListener("DOMContentLoaded", function() {

		document.querySelectorAll('.karta').forEach(el => {
			let _startX, _startY, _scrollLeft, _scrollTop, max_width, max_height, min_width, min_height;


			const pointerHandler = (event) => {
				const {
					screenX,
					screenY
				} = event;

				if (event.type === "pointerdown") {
					document.addEventListener("pointermove", pointerHandler);
					document.addEventListener("pointerup", pointerHandler);

					_startX = screenX;
					_startY = screenY;

					_scrollLeft = el.scrollLeft;
					_scrollTop = el.scrollTop;
				}

				if (event.type === "pointerup") {
					document.removeEventListener("pointermove", pointerHandler);
					document.removeEventListener("pointerup", pointerHandler);
				}

				if (event.type === "pointermove") {
					const dx = (screenX - _startX);
					const dy = (screenY - _startY);

					el.scrollTo(
						_scrollLeft - dx,
						_scrollTop - dy
					);
				}

				event.preventDefault();
			}

			el.addEventListener("pointerdown", pointerHandler);
			let img = el.querySelector("img");
			let ratio = max_ratio = 10;
			const zoom = _ => {  console.log(el.scrollLeft)
				let _w = img.width, _h = img.height;
				img.width = min_width + (max_width - min_width) * ratio / max_ratio;
				img.height = img.width * (max_height / max_width);
				_w -= img.width; _h -= img.height;
				_w = el.scrollLeft - _w/2; _h = el.scrollTop - _h/2;
				el.scrollTo( _w, _h );
			}
			const _load = _ => {
				max_width = img.naturalWidth;
				max_height = img.naturalHeight;
				min_width = el.clientWidth;
				el.style.height = Math.trunc(min_width * (max_height / max_width)) + "px";
				min_height = el.clientHeight;

				el.scrollTo(
					(max_width - min_width) / 2,
					(max_height - min_height) / 2
				);
			}
			img.complete ? _load() : img.addEventListener("load", _load);
			let nav = el.nextElementSibling;

			nav.addEventListener("pointerdown", ({
				target
			}) => {
				if (target = target.closest(".plus, .minus")) {
				ratio += target.classList.contains("plus") ? 1 : -1;
				ratio = Math.max(0, Math.min(ratio, max_ratio));
				nav.querySelector(".plus").classList.toggle("dis", ratio === max_ratio);
				nav.querySelector(".minus").classList.toggle("dis", !ratio);
				zoom();
				}
			});
		})
	});
</script>

</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 22.11.2021, 07:50
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

3 код и тут есть конфликты и я не знаю как их решить.

<!doctype html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>index</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.blok {
			margin: 40px auto 0px;
			max-width: 900px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		.karta {
			width: 100%;
			height: 400px;
			cursor: crosshair;
			overflow: hidden;
			padding: 0;
			margin: 0;
			touch-action: none;
			border: 10px solid #7F7F7F;
		}
		.karta img {
			padding: 0;
			margin: 0;
			display: block;
		}
		.upravlenie_blok {
			width: 148px;
			height: 54px;
			margin: 40px auto 0px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10px 10px 10px 10px;
		}
		.plus {
			width: 54px;
			height: 54px;
			cursor: pointer;
			margin: 0px 20px 0px 0px;
			background-image: url(https://rakipov.ru/files/plus_ikonka.svg);
			background-repeat: no-repeat;
			background-position: center;
			background-size: 95%;
		}
		.minus {
			width: 54px;
			height: 54px;
			cursor: pointer;
			background-image: url(https://rakipov.ru/files/minus_ikonka.svg);
			background-repeat: no-repeat;
			background-position: center;
			background-size: 95%;
		}
		.minus.dis,
		.plus.dis {
			opacity: .2;
		}
	</style>
	<script  type="text/javascript"  src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
<div class="blok">
	<div class="karta">
		<img src="https://rakipov.ru/files/map.jpg" usemap="#619b0da354566" alt="">
	</div>
	<div class="upravlenie_blok">
		<div class="plus dis"></div>
		<div class="minus"></div>
	</div>
</div>
<map name="619b0da354566"><area shape="poly" href="/#0" coords="385,734,385,753,422,753,459,753,459,734,459,715,422,715,385,715"><area shape="poly" href="/#1" coords="78,703,78,764,154,764,230,764,230,703,230,642,214,642,198,643,197,689,197,736,153,736,109,736,109,690,109,643,104,643,99,642,88,642,78,641"><area shape="poly" href="/#2" coords="839,634,838,636,838,702,839,768,854,768,870,768,870,701,870,633,855,633,839,633"><area shape="poly" href="/#3" coords="726,634,725,636,725,702,726,768,741,768,757,768,757,701,757,633,742,633,726,633"><area shape="poly" href="/#4" coords="610,634,609,636,609,702,610,768,625,768,641,768,641,701,641,633,626,633,610,633"><area shape="poly" href="/#5" coords="462,605,451,616,475,640,499,665,499,715,499,766,514,766,529,766,529,707,529,649,501,621,474,593"><area shape="poly" href="/#6" coords="338,621,310,649,310,707,311,766,326,766,341,766,341,715,341,665,365,641,389,617,377,605,366,593"><area shape="poly" href="/#7" coords="404,553,387,570,404,586,421,603,437,586,454,570,437,553,421,536"><area shape="poly" href="/#8" coords="937,561,937,596,963,596,989,596,990,595,990,594,1001,561,1012,527,1002,527,993,527,965,526,937,526"><area shape="poly" href="/#9" coords="496,465,475,487,496,508,518,529,539,508,560,487,539,465,518,444"><area shape="poly" href="/#10" coords="984,434,945,435,940,435,936,435,936,470,936,504,976,504,1017,504,1027,470,1038,436,1038,434,1038,433,1030,433,1023,433"><area shape="poly" href="/#11" coords="776,502,777,574,840,574,903,574,903,514,903,453,902,453,901,453,889,458,877,463,876,504,876,545,846,545,815,545,815,501,815,457,831,457,848,457,848,452,849,447,849,439,849,431,813,431,776,431"><area shape="poly" href="/#12" coords="581,429,580,431,580,460,581,489,611,489,641,489,641,459,641,429,611,428,581,428"><area shape="poly" href="/#13" coords="136,356,111,382,111,383,111,384,184,454,257,525,258,525,259,525,284,499,309,473,309,472,309,471,235,401,162,331,161,330,161,330"><area shape="poly" href="/#14" coords="879,313,878,313,878,329,878,344,938,344,998,344,998,346,999,347,999,353,999,359,1012,359,1025,359,1025,336,1025,313,952,312,879,312"><area shape="poly" href="/#15" coords="531,324,531,343,580,343,629,343,629,324,629,304,580,304,531,304"><area shape="poly" href="/#16" coords="777,331,777,360,798,360,819,360,819,331,819,303,798,302,777,302"><area shape="poly" href="/#17" coords="669,303,668,305,668,332,669,360,689,360,710,360,710,331,710,302,690,302,669,302"><area shape="poly" href="/#18" coords="878,206,879,222,938,222,997,222,998,223,999,225,999,231,999,237,1012,237,1025,237,1025,213,1025,190,952,190,878,190"><area shape="poly" href="/#19" coords="531,206,531,225,580,225,629,225,629,206,629,186,580,186,531,186"><area shape="poly" href="/#20" coords="672,198,672,224,690,224,707,224,707,198,707,172,689,171,672,171"><area shape="poly" href="/#21" coords="784,204,784,237,802,237,820,237,820,218,820,198,817,198,814,198,814,184,814,171,799,170,784,170"><area shape="poly" href="/#22" coords="283,176,283,194,327,194,372,194,412,235,453,276,453,323,453,369,472,369,490,369,490,315,490,262,439,210,387,159,335,158,283,158"><area shape="poly" href="/#23" coords="1110,96,1099,105,1099,106,1099,107,1119,130,1139,152,1139,153,1139,154,1112,178,1086,202,1086,204,1086,205,1094,215,1103,226,1104,226,1105,226,1143,190,1181,154,1180,152,1179,150,1150,118,1121,86,1121,86,1120,86"><area shape="poly" href="/#24" coords="531,87,531,106,580,106,629,106,629,87,629,67,580,67,531,67"><area shape="poly" href="/#25" coords="980,89,980,117,1001,117,1021,117,1021,89,1021,61,1001,61,980,61"><area shape="poly" href="/#26" coords="884,62,883,62,883,90,883,117,904,117,925,117,925,89,925,61,904,61,884,61"><area shape="poly" href="/#27" coords="786,89,786,117,807,117,827,117,827,89,827,61,807,61,786,61"><area shape="poly" href="/#28" coords="668,89,668,117,689,117,709,117,709,89,709,61,689,61,668,61"><area shape="poly" href="/#29" coords="78,69,78,130,95,130,111,130,111,69,111,7,94,7,78,7"></map>

<script src="https://cdn.jsdelivr.net/npm/imagemapster@1.5.4/dist/jquery.imagemapster.min.js"></script>
<script>
	$("img[usemap]").mapster({
	scaleMap: true,
	fill: true,
	fillColor: '2CA7DC',
	fillOpacity: 0.75,
	});
</script>
<script>
	window.onload = function () {
    var ImageMap = function (map) {
            var n,
                areas = map.getElementsByTagName('area'),
                len = areas.length,
                coords = [],
                previousWidth = 1920;
            for (n = 0; n < len; n++) {
                coords[n] = areas[n].coords.split(',');
            }
            this.resize = function () {
                var n, m, clen,
                    x = document.body.clientWidth / previousWidth;
                for (n = 0; n < len; n++) {
                    clen = coords[n].length;
                    for (m = 0; m < clen; m++) {
                        coords[n][m] *= x;
                    }
                    areas[n].coords = coords[n].join(',');
                }
                previousWidth = document.body.clientWidth;
                return true;
            };
            window.onresize = this.resize;
        },
        imageMap = new ImageMap(document.getElementById('map_ID'));
    imageMap.resize();
}
</script>

<script>
	document.addEventListener("DOMContentLoaded", function() {

		document.querySelectorAll('.karta').forEach(el => {
			let _startX, _startY, _scrollLeft, _scrollTop, max_width, max_height, min_width, min_height;


			const pointerHandler = (event) => {
				const {
					screenX,
					screenY
				} = event;

				if (event.type === "pointerdown") {
					document.addEventListener("pointermove", pointerHandler);
					document.addEventListener("pointerup", pointerHandler);

					_startX = screenX;
					_startY = screenY;

					_scrollLeft = el.scrollLeft;
					_scrollTop = el.scrollTop;
				}

				if (event.type === "pointerup") {
					document.removeEventListener("pointermove", pointerHandler);
					document.removeEventListener("pointerup", pointerHandler);
				}

				if (event.type === "pointermove") {
					const dx = (screenX - _startX);
					const dy = (screenY - _startY);

					el.scrollTo(
						_scrollLeft - dx,
						_scrollTop - dy
					);
				}

				event.preventDefault();
			}

			el.addEventListener("pointerdown", pointerHandler);
			let img = el.querySelector("img");
			let ratio = max_ratio = 10;
			const zoom = _ => {  console.log(el.scrollLeft)
				let _w = img.width, _h = img.height;
				img.width = min_width + (max_width - min_width) * ratio / max_ratio;
				img.height = img.width * (max_height / max_width);
				_w -= img.width; _h -= img.height;
				_w = el.scrollLeft - _w/2; _h = el.scrollTop - _h/2;
				el.scrollTo( _w, _h );
			}
			const _load = _ => {
				max_width = img.naturalWidth;
				max_height = img.naturalHeight;
				min_width = el.clientWidth;
				el.style.height = Math.trunc(min_width * (max_height / max_width)) + "px";
				min_height = el.clientHeight;

				el.scrollTo(
					(max_width - min_width) / 2,
					(max_height - min_height) / 2
				);
			}
			img.complete ? _load() : img.addEventListener("load", _load);
			let nav = el.nextElementSibling;

			nav.addEventListener("pointerdown", ({
				target
			}) => {
				if (target = target.closest(".plus, .minus")) {
				ratio += target.classList.contains("plus") ? 1 : -1;
				ratio = Math.max(0, Math.min(ratio, max_ratio));
				nav.querySelector(".plus").classList.toggle("dis", ratio === max_ratio);
				nav.querySelector(".minus").classList.toggle("dis", !ratio);
				zoom();
				}
			});
		})
	});
</script>

</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 22.11.2021, 08:15
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,682

А в консоль заглянуть?
Ну нельзя писать и отлаживать программы просто, смотря работает/не работает.

Даже первый код не работает. Идет простое масштабирование в окне браузера.

Учитесь отлаживать. Смотреть в консоль, пользоваться отладчиком и другими средствами разработчика.
Ответить с цитированием
  #6 (permalink)  
Старый 22.11.2021, 08:20
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Сообщение от voraa Посмотреть сообщение
А в консоль заглянуть?
Ну нельзя писать и отлаживать программы просто, смотря работает/не работает.

Даже первый код не работает. Идет простое масштабирование в окне браузера.

Учитесь отлаживать. Смотреть в консоль, пользоваться отладчиком и другими средствами разработчика.
Я пользуюсь ее, там есть две ошибки, но я не понимаю их.
Ответить с цитированием
  #7 (permalink)  
Старый 22.11.2021, 08:24
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,682

https://www.google.com/search?q=Unca...hrome&ie=UTF-8

Значит надо научиться пользоваться гуглом.

Не то, что бы я злой, просто, если хотите научиться программировать, то надо учиться делать это самому. Самому справляться с элементарными проблемами.
Вот я и пытаюсь научить.
Ответить с цитированием
  #8 (permalink)  
Старый 22.11.2021, 08:35
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

voraa,
да гулил я

я примерно то понимаю, но не понимаю что от меня то он хочет

Последний раз редактировалось Сергей Ракипов, 22.11.2021 в 08:37.
Ответить с цитированием
  #9 (permalink)  
Старый 22.11.2021, 08:39
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

voraa,
Вот к примеру

var n, areas = map.getElementsByTagName('area'),

создана переменная и указана что за переменная, и что не так? что ему не нравится?
Ответить с цитированием
  #10 (permalink)  
Старый 22.11.2021, 08:42
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

И вообще мне кажется эти ошибки конфликту не имеют ни какого отношение.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Google map API: поиск места и получение координат. test2542 Общие вопросы Javascript 1 26.02.2019 11:17
Скрипт обработки map area 310 Работа 4 19.02.2019 13:06
Как устранить конфликт двух функций Javascript mxup Общие вопросы Javascript 1 24.10.2015 20:46
Изменение размеров map area при изменении размера изображения. mxup Общие вопросы Javascript 1 09.07.2015 17:01
Не могу добратся к тегам map и area okaterynchuk Internet Explorer 3 05.05.2010 11:28