备案 控制台
学习
实践
活动
专区
工具
TVP
写文章
专栏首页 前端之攻略 高德地图悬浮在marker上显示文字
2 0

海报分享

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

主要用到 mouseover 和 mouseout 方法

<div id="GDMap" style="height: calc(100vh - 200px)"></div>
    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("地图加载失败!");
    },
    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);
    },
<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,
  },
本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客: https://my.oschina.net/u/2612473 复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。