Vue.js azure map将不会在正确位置渲染标记

我试图在vue.js单文件组件中呈现一个简单的Azure地图。我可以让地图在指定的中心绘制并缩放。在我想要的地方画一条线段

但我画不好记号笔。它确实会绘制，但它与指定坐标（位于先前绘制的线段的端点上）之间的距离非常西南

这里有一个单页Vue.js“App.Vue”：

<template>
    <div id="myMap"></div>
</template>

<script>
import * as atlas from "azure-maps-control";

export default {
  mounted: function() {
      this.map = new atlas.Map("myMap", {
        center: [-113.666783, 53.806008],
        zoom: 7,
        view: "Auto",
        authOptions: {
          authType: "subscriptionKey",
          subscriptionKey: "<redacted>",
        },
      });

      let self = this;

      //Wait until the map resources are ready.
      this.map.events.add("ready", function() {
        //Create a data source and add it to the map.
        var dataSource = new atlas.source.DataSource();
        self.map.sources.add(dataSource);

        //Create a line and add it to the data source.
        dataSource.add(
          new atlas.data.LineString([
            [-112.926043, 53.803],
            [-113.666783, 53.806],
          ])
        );

        //Create a line layer to render the line to the map.
        self.map.layers.add(
          new atlas.layer.LineLayer(dataSource, null, {
            strokeColor: "blue",
            strokeWidth: 5,
          })
        );

        //Create an HTML marker and add it to the map.
        var marker1 = new atlas.HtmlMarker({
          color: "DodgerBlue",
          position: [-112.926043, 53.803],
          anchor: "bottom",
          htmlContent: '<div class="pulseIconNormal"></div>',
          popup: new atlas.Popup({
            content:
              '<div style="padding:10px">Sensor</div>',
            pixelOffset: [0, -30],
          }),
        });

        self.map.markers.add(marker1);
        //Add a click event to toggle the popup.
        self.map.events.add("click", marker1, () => {
          marker1.togglePopup();
        });
      });
    }
}
</script>

<style>

#myMap {
  height: 100vh;
  width: 100vw;
}

.pulseIconNormal {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: blue;
}
</style>

---

这不是来自CSS，而是内联的。这是原因，但不是原因的解释。控件本身似乎正在生成此命令。

代码中的map div未正确关闭。而不是它应该是。HTML标准说自动关闭div是无效的。试试看它是否有用

如果它没有尝试检查HTML标记DOM，查看应用程序是否向其添加了CSS，并尝试调整以查看它是否解决了问题

---

查看您的代码，HTML标记应该锚定在其位置的底部中心。

我发现了问题。我正在使用NPM加载azure地图控件，我必须显式添加

<style src='azure-maps-control/dist/atlas.min.css'></style>

---

到.vue文件。

编辑的示例代码。没有变化。现在在DOM中检查CSS。位置转换是内联的，可能来自映射控件。编辑了这篇文章。

<style src='azure-maps-control/dist/atlas.min.css'></style>