主页 / 问题 / 1607044
Accepted
SurfSnw
Asked:2025-02-17 01:15:04 +0000 UTC2025-02-17 01:15:04 +0000 UTC

向 Yandex Maps API 添加地标

  • 772

我开始学习 Yandex Maps API 以进行通用教育，并遇到了无法在地图上添加标记的问题。请告诉我我的代码有什么问题。

initMap();
async function initMap() {
  await ymaps3.ready;
  const {
    YMap,
    YMapDefaultSchemeLayer,
    YMapMarker
  } = ymaps3;
  const map = new YMap(
    document.getElementById('map'), {
      location: {
        center: [37.589853, 55.733426],

        zoom: 15
      }
    }
  );
  map.addChild(new YMapDefaultSchemeLayer());

  const markerElement = document.createElement('div');
  markerElement.className = 'marker-class';
  markerElement.innerText = "I'm marker!";
  const marker = new YMapMarker({
      source: 'markerSource',
      coordinates: [37.589853, 55.733426],
      draggable: true,
      mapFollowsOnDrag: true
    },
    markerElement
  );
  map.addChild(marker);
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Yandex.Maps Template</title>
  <link href="https://getbootstrap.com/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
  <script src="https://api-maps.yandex.ru/v3/?apikey=some_api_key=ru_RU"></script>
</head>

<body>
  <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">SHP</a>
    <div class="navbar-nav">
      <div class="nav-item text-nowrap">
        <a class="nav-link px-3" target="_blank"
                   href="https://yandex.ru/dev/jsapi30/doc/ru/">Документация карт</a>
      </div>
    </div>
  </header>

  <main>
    <div class="container">
      <div class="row mt-3">
        <div class="col">
          <h1 class="h2">Карта</h1>
          <hr>
          <div id="map" style="height: 600px;"></div>
        </div>
      </div>
      <div class="row mt-3">
        <div class="col">
          <div class="d-grid gap-2">
            <button class="btn btn-primary" onclick=''>Add point</button>
          </div>
        </div>
      </div>
    </div>
  </main>
</body>
</html>

javascript

1 个回答

  1. Best Answer

    您的 API 连接字符串中的lang参数写入错误，导致地图无法加载。它应该是这样的： <script src="https://api-maps.yandex.ru/3.0/?apikey=КЛЮЧ-API&lang=ru_RU"></script>

    标签缺少YMapDefaultFeaturesLayer层，没有它就不会出现。在创建标记之前添加它： map.addChild(new YMapDefaultFeaturesLayer());

    另外在YMapMarker中，这里的参数source: 'markerSource'是不必要的，可以将其删除。

    我在JSBin沙箱中附加了完整的更正代码。

    • 1

相关问题