天地图——自定义标注图片marker偏移问题

1. 问题

① 自定义标注图片默认基准点不在底部尖点（在左上角），位置标定不正确

② 缩放地图时，标点位置变动异常、不合理

import iconUrl from "@/assets/img/icon.svg"
const icon = new T.Icon({ iconUrl: iconUrl })

const markers = new T.Marker(new T.LngLat(lng.value, lat.value), { icon: icon })
const marker = new T.Marker(new T.LngLat(lng.value, lat.value))
map.value.addOverLay(markers)
map.value.addOverLay(marker)

缩小时，自定义标注图片在里边

放大时，自定义标注图片跑出来了

2. 解决方案：设置图标大小及定位锚点 

import iconUrl from "@/assets/img/icon.svg"
const icon = new T.Icon({ 
    iconUrl: iconUrl,
    iconSize: new T.Point(50, 50),  //图标大小
    iconAnchor: new T.Point(25, 50)  //设置图标中作为定位的点位，横向25为横向中间，竖向50为最下边
})

const markers = new T.Marker(new T.LngLat(lng.value, lat.value), { icon: icon })
const marker = new T.Marker(new T.LngLat(lng.value, lat.value))
map.value.addOverLay(markers)
map.value.addOverLay(marker)

3. 参考

 http://t.csdnimg.cn/Graxq

 http://t.csdnimg.cn/9wOgt