- 在public目录下的index.html文件中加入以下代码
//引入腾讯地图服务
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key= 腾讯地图-控制台-添加应用生成的key "></script>
//引入腾讯地图的前端定位组件
<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
- 创建一个vue组件,在其中为地图添加一个容器
<div id="container" style="width:100%;height:300px;"></div>
- 地图初始化文件如下
initMap(){
var geolocation = new qq.maps.Geolocation("自己的key", "组件名");
geolocation.getLocation(onSuccess,onFail)
function onSuccess(position){
var myLatlng = new qq.maps.LatLng(position.lat,position.lng);
var myOptions = {
zoom: 18,
center: myLatlng,
mapTypeId: qq.maps.MapTypeId.ROADMAP
}
var map = new qq.maps.Map(document.getElementById("container"), myOptions);
var marker = new qq.maps.Marker({
position: myLatlng ,
map: map
});
}
}
- 在create()中调用初始化方法
- 效果如下

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤