百度地图缩小后图标定位不准，BMap.Marker打点坐标发生偏移

学敲代码的Stars

已于 2023-11-09 17:47:08 修改

阅读量843

点赞数

文章标签：前端

于 2023-11-03 19:50:59 首次发布

本文链接：https://blog.csdn.net/xx20010124/article/details/134209925

版权

问题

百度地图放大时，图标定位正确
将百度地图缩小时，图标定位偏差较大
下图左为缩小后打点偏移：
在这里插入图片描述

问题代码

let markerIconWidth = 48; // 定位图标的大小，此处图标宽高相等
let marker = new BMap.Marker(itemPoint);
let myIcon = new BMap.Icon(positionIcon, new BMap.Size(markerIconWidth, markerIconWidth));
myIcon.setImageSize(new BMap.Size(markerIconWidth, markerIconWidth));
marker.setIcon(myIcon);

解决方案

将高度设置为图标高度 + 2
将 anchor的宽度设置为图标宽度的一半

let markerIconWidth = 48; // 定位图标的大小，此处图标宽高相等
let marker = new BMap.Marker(itemPoint);
let myIcon = new BMap.Icon(
  positionIcon,
  new BMap.Size(markerIconWidth, markerIconWidth + 2),
  {
    anchor: new BMap.Size(markerIconWidth / 2, markerIconWidth)
  }
);
myIcon.setImageSize(new BMap.Size(markerIconWidth, markerIconWidth));
marker.setIcon(myIcon);