l***@unlimited-sports.cn
l***@unlimited-sports.cn
  • 发布:2026-01-26 10:13
  • 更新:2026-01-29 11:55
  • 阅读:178

app腾讯地图怎么启用个性化样式

分类:uni-app

app腾讯地图怎么启用个性化样式

    <map  
      v-else  
      id="tennisMap"  
      style="width: 100%; height: 75vh !important; border-radius: 26rpx; margin-top: 26rpx"  
      :latitude="latitude"  
      :longitude="longitude"  
      :markers="covers"  
      @markertap="handleMarkertap"  
      @labeltap="handleMarkertap"  
    >  
    </map>

layer-style设置1、2、3、style1、style2、style3都不行

2026-01-26 10:13 负责人:无 分享
已邀请:
Ask小助手

Ask小助手

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

在 uni-app 的 App 端(Android / iOS)使用腾讯地图时,想启用“个性化样式”并不是通过 layer-style="1" 这种简单数字或字符串就能生效的,而是必须满足下面 3 个条件:

  1. 在 manifest.json → App 模块配置 → 地图里,勾选腾讯地图并填写腾讯地图 SDK 申请的 key
  2. 到腾讯地图开放平台 → 控制台 → 个性化地图,创建并发布一套自定义样式,得到一串样式 ID(形如 style1 或一串数字,例如 12345);
  3. 在页面 <map> 标签上写 layer-style="你的样式ID",并且该属性只在 App-vue3 编译模式(HBuilderX 3.6+)下才生效。

示例代码:

<map  
  id="tennisMap"  
  style="width:100%;height:75vh"  
  :latitude="latitude"  
  :longitude="longitude"  
  :markers="covers"  
  layer-style="12345"   <!-- 这里填你在腾讯后台拿到的样式ID -->  
  @markertap="handleMarkertap"  
/>

常见踩坑提醒

  • layer-style="1" / "style1" 这类写法只有高德地图才支持,腾讯地图必须用自己后台生成的 ID。
  • 如果项目还是 vue2 编译模式,需要升级到 vue3(HBuilderX 3.6+),否则 layer-style 会被忽略。
  • 小程序端(微信/QQ/支付宝等)目前不支持腾讯地图个性化样式,只能 App 端生效。
内容为 AI 生成,仅供参考
l***@unlimited-sports.cn

l***@unlimited-sports.cn (作者)

腾讯地图官方的例子:
<script
charset="utf-8"
src="https://map.qq.com/api/gljs?v=1.exp&key=***"

</script>
<script>
window.onload = function () {
function init() {
var map = new TMap.Map(document.getElementById("container"), {
center: new TMap.LatLng(39.916527, 116.397128),
zoom: 11,
mapStyleId: "style1",
});
}
init();
};
</script>
</head>
<body>
<div id="container"></div>
</body>

我写的移动应用(uniapp): <map v-else id="tennisMap" style="width: 100%; height: 75vh !important; border-radius: 26rpx; margin-top: 26rpx" latitude="latitude" longitude="longitude" markers="covers" @markertap="handleMarkertap"
@labeltap="handleMarkertap"
ref="map"
style-id="style1"
>
<!-- /static/home/default-avatar.png -->
</map>

怎么设置mapStyleId(只用uniapp的map)

要回复问题请先登录注册