Как добавить метку с собственным изображением yandex map api 3?
Как добавить метку с собственным изображением yandex map api 3? Какую информацию нужно передать в source
initMap(); async function initMap() { // Промис `ymaps3.ready` будет зарезолвлен, когда загрузятся все компоненты основного модуля API await ymaps3.ready; const {YMap, YMapDefaultSchemeLayer, YMapMarker, YMapDefaultFeaturesLayer} = ymaps3; // Иницилиазируем карту const map = new YMap( // Передаём ссылку на HTMLElement контейнера document.getElementById('map'), // Передаём параметры инициализации карты { location: { // Координаты центра карты center: [37.588144, 55.733842], // Уровень масштабирования zoom: 10 } } ); // Добавляем слой для отображения схематической карты map.addChild(new YMapDefaultSchemeLayer()); map.addChild(new YMapDefaultFeaturesLayer()) const markerElement = document.createElement('div'); markerElement.className = 'marker-class'; markerElement.innerText = "I'm marker!"; const marker = new YMapMarker( { source: 'https://yastatic.net/s3/front-maps-static/maps-front-jsapi-3/examples/images/marker-custom-icon/yellow-capybara.png', coordinates: [37.588144, 55.733842], draggable: true, mapFollowsOnDrag: true }, markerElement ); map.addChild(marker); } |
initMap(); async function initMap() { // Промис `ymaps3.ready` будет зарезолвлен, когда загрузятся все компоненты основного модуля API await ymaps3.ready; const {YMap, YMapDefaultSchemeLayer, YMapMarker, YMapDefaultFeaturesLayer} = ymaps3; // Иницилиазируем карту const map = new YMap( // Передаём ссылку на HTMLElement контейнера document.getElementById('map'), // Передаём параметры инициализации карты { location: { // Координаты центра карты center: [37.588144, 55.733842], // Уровень масштабирования zoom: 10 } } ); // Добавляем слой для отображения схематической карты map.addChild(new YMapDefaultSchemeLayer()); map.addChild(new YMapDefaultFeaturesLayer()) const markerElement = document.createElement('div'); markerElement.className = 'marker-class'; markerElement.innerText = "I'm marker!"; const marker = new YMapMarker( { source: 'https://yastatic.net/s3/front-maps-static/maps-front-jsapi-3/examples/images/marker-custom-icon/yellow-capybara.png', coordinates: [37.588144, 55.733842], draggable: true, mapFollowsOnDrag: true }, markerElement ); map.addChild(marker); }
В консоли ошибка Uncaught (in promise) Error: The DataSource with id='https://yastatic.net/s3/front-maps-static/maps-fro...' was not found. Maybe you forgot to add it.
Дополнительно:
Ответы:
Странно, что вы нашли бобра, но не смогли воспроизвести пример, где видно, что никакой source не заполняется, а иконка это часть html, который маркером и показывается.
А тот source, насколько я понимаю, нужен для указание источника фич для маркеров.
Здравствуйте! Я из Яндекса. Добавить своё изображение на метку можно с помощью markerProps. В нашей Справке вы можете посмотреть пример этого: https://yandex.ru/dev/jsapi30/doc/ru/examples/case...
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для добавления метки с собственным изображением на карту с помощью Yandex Map API 3, вам потребуется использовать JavaScript код. Вот пример того, как можно это сделать:
1. Сначала необходимо создать карту:
```html
```
```javascript
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map("map", {
center: [55.76, 37.64],
zoom: 10
});
}
```
2. Затем создайте собственное изображение для метки:
```html
```
3. Далее добавьте метку на карту с вашим собственным изображением:
```javascript
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map("map", {
center: [55.76, 37.64],
zoom: 10
});
var customIcon = document.getElementById('customIcon').getAttribute('src');
var myPlacemark = new ymaps.Placemark([55.76, 37.64], {
hintContent: 'Метка с собственным изображением'
}, {
iconLayout: 'default#image',
iconImageHref: customIcon,
iconImageSize: [30, 30],
iconImageOffset: [-15, -15]
});
myMap.geoObjects.add(myPlacemark);
}
```
4. Не забудьте подключить Yandex Map API и jQuery (если используете) в вашем HTML файле:
```html
```
Теперь у вас должна отображаться карта с меткой, на которой используется ваше собственное изображение. Не забудьте заменить `path/to/your/image.png` на путь к вашему изображению и `ваш_ключ_api` на ваш API ключ от Yandex Map API.