高德地图Marker与InfoWindow定位居中冲突问题

最近的项目里有功能模块需要实现地图显示,用的是高德地图.前不久发现个小问题,项目需要实现点击某个Marker时将地图放大到合适的级别,中心点设置为当前Marker的坐标,并显示一个InfoWindow;问题所在就是当点击该Marker的时候,经常无法将地图中心设置为当前Marker的坐标,导致Marker跑偏了十万八千里,视野内的地图空无一物..相当的不友好…..
之前实现这个功能的代码如下:

var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -15),autoMove:true});
infoWindow.setContent(marker.content);
infoWindow.open(map, marker.getPosition());
map.setZoomAndCenter(map.getZoom()>13?map.getZoom():14,marker.getPosition());//设置地图放大级别及居中

解决方法如下:

var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -15),autoMove:true});
infoWindow.setContent(marker.content);
setTimeout(function(){
        infoWindow.open(map, marker.getPosition());
    },400);
map.setZoomAndCenter(map.getZoom()>13?map.getZoom():14,marker.getPosition());//设置地图放大级别及居中

猜测原因在于InfoWindow的open方法,官方API只给出了这个方法需要两个参数,map对象以及指定坐标.这里要吐槽一下高德的API,做地图的时候要啥啥没有= =
至于具体是啥原因其实还没找到,如果哪位大师知道是啥原因的还望指点
解决方法就是在js里加个setTimeout方法,待地图中心点被设置为Marker的坐标后再执行Infowindow的open方法,这样就能解决以上出现的问题
延迟400毫秒完美解决

 

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
要在Vue3中使用高德地图marker,你可以按照以下步骤进行操作: 1. 首先,你需要在项目中安装高德地图的JSAPI Loader。使用npm命令安装loader:npm i @amap/amap-jsapi-loader --save。 2. 在Vue组件中,引入AMapLoader并在mounted生命周期钩子中加载地图API。你可以在组件的data选项中定义一个变量来存储地图对象。 3. 在mounted生命周期钩子中,使用AMapLoader的load方法来加载地图API,并创建地图实例。你需要提供地图的容器元素的ID、地图的中心点坐标和缩放级别。例如: ```javascript import { AMapLoader } from '@amap/amap-jsapi-loader'; export default { data() { return { map: null, marker: null }; }, mounted() { AMapLoader.load({ key: 'your-amap-key', version: '2.0', plugins: [] }).then((AMap) => { const map = new AMap.Map('map-container', { center: [121, 31], zoom: 13 }); this.map = map; const marker = new AMap.Marker({ position: [121, 31], map: map, icon: new AMap.Icon({ image: require('../bus-uncollect.png'), imageSize: new AMap.Size(40, 70) }) }); this.marker = marker; }); } }; ``` 4. 为了添加旋转光圈效果,你可以在添加marker点的代码中,给marker的dom元素添加一个样式类'bus-border'。样式类中可以设置光圈的旋转动画效果。 5. 如果需要移除光圈效果,你可以使用marker的dom元素的classList属性来移除样式类'bus-border'。例如:marker.dom.classList.remove('bus-border'); 请替换'your-amap-key'为你的高德地图API的开发者密钥。要获取该密钥,你需要在高德开发者平台注册账号,并创建一个应用来获取密钥。详细的接入准备工作请参考高德官方文档。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值