天地图marker的label居中

主要是设置样式:

position:absolute;

left:-50%;

transform: translateX(-50%)

let label = new T.Label({
    text: `<div style='position:absolute;left:-50%;transform: translateX(-50%)'>
        ${userName || ""}
        <div>`,
    position: marker.getLngLat(),
    offset: new T.Point(0, 16),
});
this.Map.addOverLay(label);
  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在uniapp地图中,如果要居中显示marker,可以通过以下步骤来实现: 1.获取地图的中心点坐标 可以通过map组件的bindregionchange事件获取地图的中心点坐标,例如: ```html <map :longitude="longitude" :latitude="latitude" :markers="markers" @regionchange="onRegionChange"></map> ``` ```javascript export default { data() { return { longitude: 116.404, latitude: 39.915, markers: [{ id: 0, longitude: 116.404, latitude: 39.915, iconPath: '../../static/images/marker.png', width: 50, height: 50 }] } }, methods: { onRegionChange(e) { console.log(e) // 获取地图中心点坐标 const centerLng = e.detail.longitude const centerLat = e.detail.latitude } } } ``` 2.设置marker的偏移量 根据地图中心点坐标和marker位置,计算出marker需要偏移的像素值,然后通过设置marker的`callout`属性来实现偏移,例如: ```html <map :longitude="longitude" :latitude="latitude" :markers="markers" @regionchange="onRegionChange"></map> ``` ```javascript export default { data() { return { longitude: 116.404, latitude: 39.915, markers: [{ id: 0, longitude: 116.404, latitude: 39.915, iconPath: '../../static/images/marker.png', width: 50, height: 50, callout: { content: '这是一个marker', padding: 10, borderRadius: 5, bgColor: '#ffffff', display: 'ALWAYS', textAlign: 'center', fontSize: 14, color: '#333333', boxShadow: '0 0 5px #999999' } }] } }, methods: { onRegionChange(e) { const centerLng = e.detail.longitude const centerLat = e.detail.latitude // 计算marker需要偏移的像素值 const markerOffset = this.getMarkerOffset(centerLng, centerLat, this.markers.longitude, this.markers.latitude) // 设置marker的偏移量 this.markers.callout.offset = `${markerOffset.x},${markerOffset.y}` this.$forceUpdate() }, getMarkerOffset(centerLng, centerLat, markerLng, markerLat) { const pixelRatio = wx.getSystemInfoSync().pixelRatio const scale = Math.pow(2, this.mapScale - 15) const markerPixel = this.lngLatToPixel(markerLng, markerLat, scale) const centerPixel = this.lngLatToPixel(centerLng, centerLat, scale) const offsetX = (centerPixel.x - markerPixel.x) * pixelRatio const offsetY = (centerPixel.y - markerPixel.y) * pixelRatio return { x: offsetX, y: offsetY } }, lngLatToPixel(lng, lat, scale) { const projection = this.map.getProjection() const point = projection.fromLatLngToPoint(new google.maps.LatLng(lat, lng)) return { x: point.x * scale, y: point.y * scale } } } } ``` 以上是基于Google Maps API实现的示例代码,如需在uniapp中使用高德地图或腾讯地图,请参考对应地图API文档实现。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值