Vue?運行高德地圖官方樣例,設置class無效的解決

更新時間：2022年10月17日 14:46:05 作者：韓宗金

這篇文章主要介紹了Vue?運行高德地圖官方樣例,設置class無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

把對應的代碼貼一下

<template>
  <div class="home_div">
    <div class="map_title">
      <h3>JSAPI Vue2地圖組件示例</h3>
    </div>
    <div id="container"></div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "Mapview",
  data() {
    return {
      //map:null,
    };
  },
  created() {},
  mounted() {
    this.initAMap();
  },
  methods: {
    initAMap() {
      AMapLoader.load({
        key: "設置自己的key", //設置您的key
        version: "2.0",
        plugins: ["AMap.ToolBar", "AMap.Driving"],
        AMapUI: {
          version: "1.1",
          plugins: [],
        },
        Loca: {
          version: "2.0",
        },
      })
        .then((AMap) => {
          var map = new AMap.Map("container", {
            viewMode: "3D",
            zoom: 5,
            zooms: [2, 22],
            center: [105.602725, 37.076636],
          });
          var marker = new AMap.Marker({
            position: map.getCenter(),
            icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            anchor: "bottom-center",
            offset: new AMap.Pixel(0, 0),
          });
          marker.setMap(map);
          // 設置鼠標劃過點標記顯示的文字提示
          marker.setTitle("我是marker的title");
          // 設置label標簽
          // label默認藍框白底左上角顯示，樣式className為：amap-marker-label
          marker.setLabel({
            direction: "top",
            offset: new AMap.Pixel(10, 0), //設置文本標注偏移量
            content: "<div class='info'>我是 marker 的 label 標簽</div>", //設置文本標注內(nèi)容
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style  >
.home_div {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: relative;
}
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  position: absolute;
  
}
.map_title {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 50px;
  background-color: rgba(27, 25, 27, 0.884);
}
h3 {
  position: absolute;
  left: 10px;
  z-index: 2;
  color: white;
}
.amap-icon img {
  width: 25px;
  height: 34px;
}
.amap-marker-label {
  border: 0;
  background-color: transparent;
}
.info {
  position: relative;
  margin: 0;
  top: 0;
  right: 0;
  min-width: 0;
}
</style>

如果用官方樣例，設置內(nèi)置樣式，是無效的，比如設置 marker的Label樣式，這個內(nèi)置的樣式是amap-marker-label，但是設置了是無效的，原因是<style scoped>，官方樣例加了scoped，會把此style限定在當前的頁面中。

在編譯時，有scoped的頁面樣式，都會自動生成有一個唯一標識（attribute），這樣，用字符串方式添加的標簽只會是單獨的標簽而缺少這些標識導致css設置無效。