vue中使用Yandex地图

在 Vue 中使用 Yandex 地图需要进行以下步骤：

1. 在 index.html 中引入 Yandex 地图的 JavaScript API。

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

2. 在 Vue 组件中创建地图容器，并在 mounted 生命周期中初始化地图。

<template>
  <div class="map-container">
    <div id="yandex-map" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    ymaps.ready(() => {
      const map = new ymaps.Map("yandex-map", {
        center: [55.76, 37.64],
        zoom: 10
      });
    });
  }
};
</script>

<style>
.map-container {
  width: 100%;
  height: 500px;
}
</style>

3. 在地图中添加标记和其他图层等。

<template>
  <div class="map-container">
    <div id="yandex-map" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    ymaps.ready(() => {
      const map = new ymaps.Map("yandex-map", {
        center: [55.76, 37.64],
        zoom: 10
      });

      const placemark = new ymaps.Placemark([55.76, 37.64], {
        hintContent: "Москва!",
        balloonContent: "Столица России"
      });

      map.geoObjects.add(placemark);
    });
  }
};
</script>

<style>
.map-container {
  width: 100%;
  height: 500px;
}
</style>

注意事项：

在使用 Yandex 地图 API 时，需要在网络环境下才能正常显示地图。在本地开发时，需要使用 VPN 或者其他方式访问国外网络才能正常使用。