uniapp 腾讯地图 vue3
时间: 2025-01-12 22:50:42 浏览: 8
集成腾讯地图到 Vue3 的 UniApp 项目
创建 UniApp 项目并配置环境
在 HBuilderX 中创建新的 uni-app 项目时,应选择合适的模板并启用必要的选项来支持后续开发工作[^3]。
添加腾讯地图插件
对于希望在同一套代码基础上兼容 H5 和 APP 平台的应用来说,可以利用 renderjs
技术实现跨平台逻辑共享[^1]。具体操作是在项目的合适位置安装腾讯地图 SDK 或者通过 npm/yarn 安装官方提供的 @tencentmap/sdk-for-weixin-js 插件包:
npm install @tencentmap/map-sdk --save
初始化地图实例
完成依赖项添加之后,在页面组件内定义 map 实例化方法,并传入所需的 key 参数以及其他初始化设置。这些参数可以通过 data 属性动态绑定以便灵活调整[^4]。
import { ref, onMounted } from 'vue';
export default {
setup() {
const tMap = ref(null);
onMounted(() => {
TMap.load('您的开发者密钥', (err, TencentMaps) => {
if (!err) {
tMap.value = new TencentMaps.Map(document.getElementById('container'), {
center: new TencentMaps.LatLng(39.984078, 116.30752),
zoom: 14,
});
}
});
});
return {
tMap,
};
},
};
地图容器布局设定
确保 HTML 结构中有用于承载地图展示区域的 DOM 元素存在,并给予足够的宽度高度样式以使地图能够正常渲染出来。
<template>
<div id="container" style="width:100%;height:400px;"></div>
</template>