2021-07-06

最新推荐文章于 2024-09-30 16:19:08 发布

皮皮绳。

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量70

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_49861016/article/details/118525200

版权

本文详细介绍了如何使用地图API进行图标定位及偏移量调整，通过设置Marker的anchor、offset属性，确保图标在地图上的准确显示。具体示例中，展示了在不同anchor设置下，如何根据图标大小调整offset值，以实现图标在地图上的正确对齐。

摘要由CSDN通过智能技术生成

地图偏移量（放大缩小点位移动问题）

在这里插入图片描述
解决方法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);
    });
   },

添加链接描述