百度地图自定义坐标标识覆盖物,随地图缩放偏移解决办法

百度地图在添加自定义标注的时候可能会遇见坐标标识,随着地图缩放位置产生偏移,我折腾了一个上午,记下这篇。
在此之前,请参考文章:
http://www.cnblogs.com/jz1108/archive/2011/09/15/2152122.html
但是注意:

var icon = new BMap.Icon('pin.png', new BMap.Size(20, 32), {
    anchor: new BMap.Size(10, 30)
});

第一步:

new BMap.Size(20, 32)
大概设置成图片的尺寸大小,但是最好多出2到3个像素(px),如图片是20x30,那么你可以设置成new BMap.Sie(22,32)

第二步:

anchor: new BMap.Size(10, 30)
这里有两个数字10,30分别对应图标的一半宽度和高度

但是上面两步都设置好了,有时候你会发现自己添加的标注也看不见了,这很尴尬,我就在这折腾了半天,大家可以吧第一步宽和高的值扩大(稍微大一点),按F12进行查看,你会发现添加的标注图片偏移在右下角。那么就可以做最后一步了。

最后一步:

var icon = new BMap.Icon('pin.png', new BMap.Size(20, 32), {
    anchor: new BMap.Size(10, 30),
    imageOffset: new BMap.Size(0-20, 0 - 17)
});

imageOffset: new BMap.Size(0-20, 0 - 17)
注意这句脚本,多少量大家可以自己调试。

做好了这一步,那么问题也就解决了。

  • 9
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现百度地图自定义覆盖物的移动,可以通过以下步骤: 1. 创建自定义覆盖物对象,并在地图上添加。 2. 通过定时器或其他方式,更新自定义覆盖物的位置坐标。 3. 调用自定义覆盖物对象的setPosition()方法,设置新的位置坐标。 4. 调用地图对象的panTo()方法,将地图中心点移动到新的位置坐标。 以下是示例代码: ``` // 自定义覆盖物类 function CustomOverlay(point){ this._point = point; } CustomOverlay.prototype = new BMap.Overlay(); CustomOverlay.prototype.initialize = function(map){ // 创建DOM元素,并添加到地图容器中 var div = document.createElement("div"); div.style.position = "absolute"; div.style.width = "20px"; div.style.height = "20px"; div.style.backgroundColor = "red"; map.getPanes().labelPane.appendChild(div); this._div = div; return div; } CustomOverlay.prototype.draw = function(){ // 根据坐标计算DOM元素的位置,并设置 var pixel = map.pointToOverlayPixel(this._point); this._div.style.left = pixel.x + "px"; this._div.style.top = pixel.y + "px"; } CustomOverlay.prototype.setPosition = function(point){ this._point = point; this.draw(); } // 创建自定义覆盖物对象,并添加到地图上 var customOverlay = new CustomOverlay(new BMap.Point(116.404, 39.915)); map.addOverlay(customOverlay); // 定时器更新自定义覆盖物位置,并移动地图中心点 setInterval(function(){ var point = customOverlay._point; point.lng += 0.001; customOverlay.setPosition(point); map.panTo(point); }, 1000); ``` 上述示例代码中,自定义覆盖物类CustomOverlay继承自BMap.Overlay,实现了initialize()和draw()方法用于创建和更新DOM元素的位置。setPosition()方法用于设置新的位置坐标。在定时器中,更新自定义覆盖物的位置坐标,并调用setPosition()方法和地图对象的panTo()方法移动地图中心点。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值