- if (map && typeof map.setCenter === 'function' && typeof map.setZoom === 'function') {
- map.setCenter(15)(marker.geometry.getCoordinates(), 15);
- map.setZoom(15);
- }
+ map.setLocation({
+ center: markersCollection.find(n => n.id === officeId).coordinate,
+ zoom: 15,
+ });const grouped = productData.reduce((acc, n) => (
(acc[n.coordinates] ??= []).push(n),
acc
), {});for (const [ coord, data ] of Object.entries(grouped)) {
const placemark = new ymaps.Placemark(
coord.split(',').map(parseFloat),
{
balloonContent: data
.map(n => `
<div>
${n.address}
<br>
<a href="${n.productURL}">Подробнее</a>
</div>`)
.join(''),
},
{
preset: 'islands#blueDotIcon',
maxWidth: 300,
}
);
map.geoObjects.add(placemark);
}const placemarks = productData.map((n, i) => new ymaps.Placemark(
n.coordinates.split(',').map(parseFloat),
{
balloonContent: `${n.address}<br><a href="${n.productURL}">Подробнее</a>`,
clusterCaption: `Адрес №${i + 1}`,
},
{
preset: 'islands#blueDotIcon',
maxWidth: 300,
}
));
const clusterer = new ymaps.Clusterer({
clusterDisableClickZoom: true,
});
clusterer.add(placemarks);
map.geoObjects.add(clusterer);<yandex-map
ref="map"
@map-was-initialized="onBoundsChange"
@boundschange="onBoundsChange"
...
>
<ymap-marker
v-for="n in markersData"
...
>methods: {
onBoundsChange() {
const bounds = this.$refs.map.myMap.getBounds();
this.markersData.forEach(n => {
if (
bounds[0][0] < n.coords[0] && n.coords[0] < bounds[1][0] &&
bounds[0][1] < n.coords[1] && n.coords[1] < bounds[1][1]
) {
// ...
}
});
},
...проблема в том, что один из маркеров уезжает на реку Нева
iconImageOffset - она поможет исправить ситуацию.
<YandexClusterer
@vue:mounted="onClustererMounted"
...methods: {
onClustererMounted(e) {
e.component.exposed.events.add('click', обработчикКлика);
},
...@click.stop).
Использую yandex-map@beta
пытаюсь изменить параметр zoom в YandexMap, но не работает, и что-то мне подсказывает, что не всё так просто
setup() {
...
let map = null;
return {
...
onCreate: e => map = e,
updateZoom: z => map.setZoom(Math.max(1, Math.min(19, map.getZoom() + z))),
};
},<yandex-map
...
@created="onCreate"
/>
...
<button @click="updateZoom(+1)">+</button>
<button @click="updateZoom(-1)">-</button>В документации не нашел ответа, как и похожего решения.
const [ coord, setCoord ] = useState(...);
function onActionTickComplete(e) {
const projection = e.get('target').options.get('projection');
const { globalPixelCenter, zoom } = e.get('tick');
setCoord(projection.fromGlobalPixels(globalPixelCenter, zoom));
}<Map
onActionTickComplete={onActionTickComplete}
...
>
<Placemark geometry={coord} />
</Map>думаю что тут проблема из за proxy
Vue.toRaw(this.map).geoObjects.add(placemark);this.map = Vue.markRaw(new ymaps.Map(this.$refs.map, {
...контейнерСсылок.addEventListener('click', e => {
const index = e.target.dataset.index;
if (index) {
массивМеток[index].balloon.open();
}
});массивМеток.forEach(n => {
n.events.add('balloonopen', onBalloonOpen);
n.events.add('balloonclose', onBalloonClose);
});
function onBalloonOpen(e) {
const index = e.get('target').properties.get('index');
const link = контейнерСсылок.children[index]; /* или, если структура списка ссылок более сложная,
* как в примере из документации, можно искать нужную
* через .querySelector(`[data-index="${index}"]`)
*/
link.scrollIntoView({
behavior: 'smooth',
});
link.classList.add('active');
}
function onBalloonClose(e) {
const index = e.get('target').properties.get('index');
контейнерСсылок.children[index].classList.remove('active');
}e.get('target').properties.get('имяСвойстваСодержащегоId')shop.id)?<div data-id="{{ properties.имяСвойстваСодержащегоId }}">this.circle = new ymaps.Circle(
...watch: {
радиусКруга(val) {
this.circle.geometry.setRadius(val);
},
...const circle = new ymaps.Circle(
...
);
this.$watch('радиусКруга', val => circle.geometry.setRadius(val));myMap.enterFullscreen()var myMap = new ymaps.Map('map', {<div ref="map"></div>mounted() {
ymaps.ready(() => {
this.map = new ymaps.Map(this.$refs.map, {
...<div ref="map"></div>data: () => ({
coords: [ ... ],
}),
methods: {
initMap() {
this.map = new ymaps.Map(this.$refs.map, {
center: this.coords,
zoom: 8,
});
this.marker = new ymaps.Placemark(this.coords, {
hintContent: 'hello, world!!',
});
this.map.geoObjects.add(this.marker);
this.map.events.add('click', this.onMapClick);
this.$watch('coords', this.updateMap);
},
onMapClick(e) {
this.coords = e.get('coords');
},
updateMap() {
this.map.panTo(this.coords);
this.marker.geometry.setCoordinates(this.coords);
},
},
created() {
ymaps.ready(this.initMap);
},document.querySelector('селектор контейнера с кнопками').addEventListener('click', e => {
const coord = e.target.dataset.addressItem?.split(' ').map(Number);
if (coord) {
map.setCenter(coord);
marker.geometry.setCoordinates(coord);
}
});@click="$store.commit('setCoords', marker.coords)".