前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >高德地图悬浮在marker上显示文字

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

作者头像
tianyawhl
发布2021-09-26 10:55:27
2.9K0
发布2021-09-26 10:55:27
举报
文章被收录于专栏:前端之攻略前端之攻略

主要用到 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,
    };
  },
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档