2021-07-06

地图偏移量(放大缩小点位移动问题)

在这里插入图片描述
解决方法1:
achor使用api默认值(‘top-left’)
如果icon大小为(10, 20),我们需要设置offset的值为 new AMap.Pixel(-5,-20)
解决方法n:
achor使用 ‘bottom-center’
如果icon大小为(10, 20),我们需要设置offset的值为 new AMap.Pixel(0,0)

/* 渲染官网底部地图 */
   renderLocationMap() {
    var that = this
    AMapLoader.load({
     'key': '006d995d433058322319fa797f2876f5',
     'version': '2.0',
     'plugins': ['AMap.InfoWindow', 'AMap.Marker']
    }).then((AMap) => {
     // 渲染地图
     let map = new AMap.Map(this.$refs.locationMap, {
      zoom: 6, // 初缩放级别
      center: [116.368904, 39.923423], // 初始中心点
     });

     // 创建信息窗体
     var infoWindow = new AMap.InfoWindow({
      offset: new AMap.Pixel(-5, -50)
     });

     // 创建一个 icon
     var endIcon = new AMap.Icon({
      size: new AMap.Size(40, 45),
      image: iconCar,
      
     });

     for (var i = 0, marker; i < this.lists.length; i++) {
      var marker = new AMap.Marker({
       position: this.lists[i].lnglats,
       map: map,
       icon: endIcon,
       achor: 'top-left',
       offset: new AMap.Pixel(-20,-45),
      });
      marker.list = this.lists[i];
      marker.content = '<div><text style="color:#FFD700;font-size: 15px;">' + this.lists[i]
       .BrandName + '</text><br> <text style="font-size: 13px; color:"#000">' + this.lists[i].Province +
       '' +
       this.lists[i].City + '' + this.lists[i].District + '</text> <br><text style="font-size: 13px; color:"#000">' + this.lists[i]
       .Address +
       '</text></div>';
      marker.on('click', markerClick);
      marker.emit('click', {
       target: marker
      });
     }

     function markerClick(e) {
      that.formlist = e.target.list
      infoWindow.setContent(e.target.content);
      infoWindow.open(map, e.target.getPosition());
     }
     // map.setFitView();
    }).catch(e => {
     console.error(e);
    });
   },

添加链接描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值