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)