Я пытаюсь внедрить карту с маркерами на сайт. Использую Яяндекс API V3 но почему то у меня некак не получается создать маркеры на карте
вот мой js
document.addEventListener('DOMContentLoaded', function() {
var points = [
{ name: 'Москва, Красная площадь', coords: [45.28185357458866, 38.83058549999994] }
];
var input = document.getElementById('address');
var suggestions = document.getElementById('suggestions');
var map;
input.addEventListener('input', function() {
var query = this.value.toLowerCase();
suggestions.innerHTML = '';
if (query.length > 0) {
var filteredPoints = points.filter(function(point) {
return point.name.toLowerCase().includes(query);
});
filteredPoints.forEach(function(point) {
var div = document.createElement('div');
div.innerHTML = point.name;
div.addEventListener('click', function() {
input.value = point.name.split(',')[0]; // Передаем только имя места, без координат
suggestions.innerHTML = '';
map.panTo([point.coords[0], point.coords[1]], { duration: 500 });
});
suggestions.appendChild(div);
});
}
});
async function initMap() {
await ymaps3.ready;
const { YMap, YMapDefaultSchemeLayer, Placemark } = ymaps3;
map = new YMap(document.getElementById('maps'), {
center: [45.28185357458866, 38.83058549999994], // Ваше местоположение в точке Москвы
zoom: 14,
controls: ['zoomControl', 'searchControl', 'typeSelector', 'fullscreenControl', 'routeButtonControl']
});
map.addControl(new ymaps3.ZoomControl());
map.addControl(new ymaps3.SearchControl());
map.addControl(new ymaps3.TypeSelector());
map.addControl(new ymaps3.FullscreenControl());
map.addControl(new ymaps3.RouteButtonControl());
map.addChild(new YMapDefaultSchemeLayer());
points.forEach(function(point) {
var placemark = new Placemark(point.coords, {
balloonContent: point.name
});
placemark.events.add('click', function() {
input.value = point.name;
map.panTo([point.coords[0], point.coords[1]], { duration: 500 });
});
map.geoObjects.add(placemark);
});
}
initMap();
});
и мой html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/reset.css">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/page/baket/style.css">
<script src="https://api-maps.yandex.ru/V3/?apikey=8669b2f4-adc5-417d-a735-9f2f03dd0be4&lang=ru_RU"></script>
<script src="/page/baket/baket.js"></script>
<title>Document</title>
</head>
<body>
<div class="map" id="map">
<div class="fa-solid fa-circle-xmark"></div>
<iframe
src="https://yandex.ru/map-widget/v1/?um=constructor%3A991360c683b2e9a6ded089e9d95dbf3384853f2a95e7898a0dd7ee303122970e&source=constructor"
frameborder="0"></iframe>
</div>
<main>
<!-- heder -->
<div class="heder">
<!-- nav -->
<nav>
<!-- logo -->
<h1>COFFEE</h1>
<!-- /logo -->
<!-- menu -->
<ul>
<li><a href="/index.html">HOME</a></li>
<li><a href="/page/coffee/index.html">Menu</a></li>
<li><a id="shop-butt" href="#">SHOP</a></li>
<li><a href="#">LOGIN</a></li>
</ul>
<!-- /menu -->
<!-- search -->
<div class="box">
<form action="" method="get">
<input class="search_input" id="search_input" name="search" type="search">
</form>
<button class="search" id="search"><i class="fa-solid fa-magnifying-glass"
style="color: #fff; font-size: 1.2rem;"></i></button>
</div>
<!-- /search -->
</nav>
<!-- /nav -->
</div>
<!-- /heder -->
<!-- baket -->
<div class="baket">
<div class="lokation-search">
<input class="lokation-search" id="address" name="search" type="search">
<button class="lokation-searchButt"><i class="fa-solid fa-magnifying-glass"style="color: black; font-size: 1.2rem;"></i></button>
<button id="suggestions" style="width: 100%;"></button>
</div>
<div id="maps" style="width: 100%; height: 50em"></div>
</div>
<!-- /baket -->
<footer>
<h2>Coffee</h2>
<table>
<th>PRIVACY</th>
<th>SERVICES</th>
<th>ABOUT US</th>
<th>SOCIAL MEDIA</th>
<tr>
<td>Privacy Policy</td>
<td>Shop</td>
<td>about us</td>
<td><i class="fa-brands fa-twitter"></i><i class="fa-brands fa-facebook"></i><i
class="fa-brands fa-instagram"></i><i class="fa-solid fa-paper-plane"></i></td>
</tr>
</table>
</footer>
</main>
<script src="https://kit.fontawesome.com/2585aabbee.js" crossorigin="anonymous"></script>
<!-- <script src="/main.js"></script> -->
</body>
</body>
и ее величество ошибка
at n.geoToMercator (main.js:1:39883)
at r.type.toWorldCoordinates (main.js:1:40829)
at M (main.js:1:59980)
at ii.B35_createCamera (main.js:1:177954)
at new ii (main.js:1:176748)
at rs.D98_createMap (main.js:1:224863)
at new rs (main.js:1:219709)
at initMap (baket.js:37:15)
baket.js этой мой js файл конкретно вот эта строчка map = new YMap(document.getElementById('maps'), {
Ответы (1 шт):
Автор решения: Arbery
→ Ссылка
Потому что для 3й версии многое делается иначе. Параметры обернуты в loсation, вместо Placemark - YMapMarker. Должны быть преднастроенный слой YMapDefaultSchemeLayer и слой геообъектов YMapDefaultFeaturesLayer. У вас же смешение 3 со 2й.
Об этом можно посмотреть в документации Руководство разработчика - объекты на карте
document.addEventListener('DOMContentLoaded', function() {
const markerProps = [{
coordinates: [37],
iconSrc: 'https://yastatic.net/s3/front-maps-static/maps-front-jsapi-3/examples/images/marker-custom-icon/yellow-capybara.png',
message: "I'm yellow capybara!"
},
{
coordinates: [38, 55],
iconSrc: 'https://yastatic.net/s3/front-maps-static/maps-front-jsapi-3/examples/images/marker-custom-icon/purple-capybara.png',
message: "I'm purple capybara!"
},
{
coordinates: [37, 55],
iconSrc: 'https://yastatic.net/s3/front-maps-static/maps-front-jsapi-3/examples/images/marker-custom-icon/green-capybara.png',
message: "I'm green capybara!"
}
];
async function initMap() {
await ymaps3.ready;
const {
YMap,
YMapDefaultSchemeLayer,
YMapDefaultFeaturesLayer,
YMapMarker
} = ymaps3;
const map = new YMap(document.getElementById('maps'), {
location: {
center: [37, 55],
zoom: 10
}
});
map.addChild(new YMapDefaultSchemeLayer());
map.addChild(new YMapDefaultFeaturesLayer());
markerProps.forEach((markerProp) => {
const markerElement = document.createElement('img');
markerElement.className = 'icon-marker';
markerElement.src = markerProp.iconSrc;
markerElement.style.width = '40px'
markerElement.onclick = () => alert(markerProp.message);
map.addChild(new YMapMarker({
coordinates: markerProp.coordinates
}, markerElement));
});
}
initMap();
});<script src="https://api-maps.yandex.ru/v3/?apikey=8669b2f4-adc5-417d-a735-9f2f03dd0be4&lang=ru_RU"></script>
<div id="maps" style="width: 100%; height: 200px"></div>