vue 高德地图Marker缩放消失

在Vue高德地图中，当地图缩放级别发生变化时，Marker可能会消失。这是因为Marker的显示与地图缩放级别有关，当地图缩放级别过高或过低时，Marker可能会被隐藏。为了解决这个问题，可以使用MarkerClusterer插件对Marker进行聚合展示，从而在不同的地图缩放级别下展示Marker。另外，也可以通过设置Marker的offset属性来调整Marker的位置，以适应不同的地图缩放级别。

相关问题

vue 高德地图Marker缩放消失 解决方法

在Vue中使用高德地图Marker时，可能会出现缩放后Marker消失的问题。解决方法如下：
1. 确认是否设置了Marker的offset属性，如果设置了，需要将其去掉。
2. 确认是否设置了Marker的zIndex属性，如果设置了，需要将其去掉。
3. 确认是否在Marker的样式中设置了图标大小，如果设置了，需要将其去掉。
4. 确认是否在Marker的样式中设置了图标显示位置偏移量，如果设置了，需要将其去掉。
5. 确认是否在Marker的样式中设置了图标地址，如果设置了，需要确认地址是否正确。

vue3高德地图marker

要在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、地图的中心点坐标和缩放级别。例如：

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的开发者密钥。要获取该密钥，你需要在高德开发者平台注册账号，并创建一个应用来获取密钥。详细的接入准备工作请参考高德官方文档。