高德地图悬浮在marker上显示文字

主要用到 mouseover 和 mouseout 方法

代码语言：javascript复制

<div id="GDMap" style="height: calc(100vh - 200px)"></div>

代码语言：javascript复制

    showMap() {
      loadMap(this.key, this.plugins, this.v)
        .then((AMap) => {
          this.GDMap = new AMap.Map("GDMap", {
            zoom: 11,
            resizeEnable: true,
            keyboardEnable: false,
          });
          
          // this.showPoligin(AMap)
          this.GDMap.on("complete", () => {
            this.showMarker()
            // this.GDMap.add(circle)
          });
        })
        .catch((err) => {
          console.log(err);
          console.log("地图加载失败！");
        });
    },

代码语言：javascript复制

    showMarker(){
      let mapData = this.mapData
      for(let i=0;i<mapData.length;i  ){
        let marker = new AMap.Marker({
          position:mapData[i].position,
          map:this.GDMap,
        })
        marker.on("mouseover",()=>{
          marker.setLabel({
              direction:'top',
              offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
              content: `<div class='info' onclick="showInfo('${mapData[i].id}')">${mapData[i].label}</div>`, //设置文本标注内容
          });
        })
        marker.on("mouseout",()=>{
          marker.setLabel(null);
        })        

      }
    },

代码语言：javascript复制

<script>
import loadMap from "@/assets/js/loadMap.js";
function showInfo(id){
   console.log(id)
}
window.showInfo = showInfo
export default {
  data() {
    return {
      mapData:[
        {id:"a001",position:[119.972379,31.831254],label:"标记点1"},
        {id:"a002",position:[119.969289,31.818419],label:"标记点2"},
        {id:"a003",position:[119.955213,31.820315],label:"标记点3"},
        {id:"a004",position:[119.961393,31.809375],label:"标记点4"}
      ],
      radio:"常州",
      key: "3862bb74758c8d185100ed5df030949d",
      plugins: [
        "AMap.ToolBar",
        "AMap.Autocomplete",
        "AMap.PlaceSearch",
        "AMap.OverView",
        "AMap.MouseTool",
        "AMap.PolyEditor",
        "AMap.RectangleEditor",
        "AMap.DistrictLayer",
        "AMap.CustomLayer",
        "AMap.DistrictSearch",
      ],
      v: "1.4.5",
      GDMap: null,
    };
  },

marker 高德地图

0 人点赞