#插件需求# 安卓uniapp vue2 高德地图原生组件 在标记点的上面显示名称

该问题请在专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

在 uni-app（Vue2）App 端使用高德原生地图组件时，要让每个标记点（marker）上方直接显示名称，只需给 marker 增加 label 属性即可。label 在 App 端已支持，无需额外使用 cover-view 或 subNVue。

示例代码（vue 页面）：

<template>  
  <view class="page">  
    <map  
      id="map"  
      :latitude="center.lat"  
      :longitude="center.lng"  
      :scale="16"  
      :markers="markers"  
      style="width: 100%; height: 100vh;"  
    ></map>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      center: { lat: 39.909, lng: 116.397 },  
      markers: [  
        {  
          id: 1,  
          latitude: 39.909,  
          longitude: 116.397,  
          iconPath: '/static/marker.png',  
          width: 30,  
          height: 30,  
          // 关键：label 会直接显示在标记点上方  
          label: {  
            content: '天安门',  
            color: '#ffffff',  
            fontSize: 14,  
            bgColor: '#00000077',  
            padding: 4,  
            borderRadius: 2,  
            anchorX: 0,   // 横向偏移，单位 px  
            anchorY: -40  // 纵向偏移，负值向上  
          }  
        }  
      ]  
    };  
  },  
  onReady() {  
    // 如需后续操作可 createMapContext  
    // this.mapCtx = uni.createMapContext('map', this);  
  }  
};  
</script>

要点说明

1. manifest.json → App 模块配置 → 勾选 “高德地图” 并填写正确的安卓 key。
2. label 对象 里的 anchorX / anchorY 用来微调文字相对图标的偏移，单位是 px。
3. 如果页面层级较深，map 组件实例不要创建过多，可用 v-if 在隐藏时销毁。
4. 仅 App-vue 页面 可用上述写法；若用 nvue，label 同样支持，且没有层级遮挡问题。

用label运行到真机后 没有框框只有文字

专业插件定制，如有需要欢迎随时联系

试一下这个插件是否满足需求，https://ext.dcloud.net.cn/plugin?id=10005