快捷導(dǎo)航

Vue?運(yùn)行高德地圖官方樣例,設(shè)置class無(wú)效的解決

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

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

把對(duì)應(yīng)的代碼貼一下

<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: "設(shè)置自己的key", //設(shè)置您的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);
          // 設(shè)置鼠標(biāo)劃過(guò)點(diǎn)標(biāo)記顯示的文字提示
          marker.setTitle("我是marker的title");
          // 設(shè)置label標(biāo)簽
          // label默認(rèn)藍(lán)框白底左上角顯示，樣式className為：amap-marker-label
          marker.setLabel({
            direction: "top",
            offset: new AMap.Pixel(10, 0), //設(shè)置文本標(biāo)注偏移量
            content: "<div class='info'>我是 marker 的 label 標(biāo)簽</div>", //設(shè)置文本標(biāo)注內(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>

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

在編譯時(shí)，有scoped的頁(yè)面樣式，都會(huì)自動(dòng)生成有一個(gè)唯一標(biāo)識(shí)（attribute），這樣，用字符串方式添加的標(biāo)簽只會(huì)是單獨(dú)的標(biāo)簽而缺少這些標(biāo)識(shí)導(dǎo)致css設(shè)置無(wú)效。