vue 腾讯地图 组件使用与开发根据关键词搜索,逆地址解析

本文介绍了一位开发者如何在Vue项目中使用腾讯地图服务的webserviceAPI,修复了基于先前教程的错误,并提供了项目结构、配置关键点及运行步骤。开发者需要在腾讯位置服务控制台申请key,并在前后端分别填入以确保安全性。项目已开源,可在GitHub上找到。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

由于参考以下链接博主的组件使用时发生错误(可能由于时间问题腾讯方改变了服务导致错误发生),查资料后,基于此教程进行开发
腾讯地图vue组件开发
改为使用腾讯服务的web service api
修复部分bug

项目分为前后端两部分,后端负责访问腾讯服务的web service api,前端展示地图以及数据
项目github地址

成品

## 主要设计思想前端vue显示地图

在这里插入图片描述

提前准备

  1. 前往腾讯位置服务控制台申请key
    注册后-》控制台-》应用管理-》我的应用-》右上角创建应用
    得到key和secret key
    key申请地址
    在这里插入图片描述
    在这里插入图片描述
    使用secret key进行签名校验,防止key被其他人盗用

项目结构

后端

在这里插入图片描述

vue项目

在这里插入图片描述

使用注意

vue项目里需要修改的地方:

  1. public/index.html 填充key

在这里插入图片描述
2. /components/Map/TencentMap.vue 的data 填充key
在这里插入图片描述

后端项目需要修改的地方

  1. MapController 填充key和secretkey
    在这里插入图片描述

运行

vue项目:npm run serve
开启后端项目

项目地址

https://github.com/zyd100/tc-map

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值