高德地图marker的遮挡问题

高德地图marker的遮挡问题

       var marker = new AMap.Marker({
            position: [
              longitude,latitude,
            ],
            map: map,
            icon: startIcon,
          });

          marker.on("mouseover", function (e) {
            e.target.setTop(true);
          });
          marker.on("mouseout", function (e) {
            e.target.setTop(false);
          });

这里设置的是鼠标移入时显示,移出时恢复默认。

不知道是文档更新了,还是什么原因,网上一直使用setTop(true,27000),这样不能实现。只需要setTop(true)就可以了

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在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的开发者密钥。要获取该密钥,你需要在高德开发者平台注册账号,并创建一个应用来获取密钥。详细的接入准备工作请参考高德官方文档。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值