关于vue3+ts项目中使用高德地图AMap方案总结

最新推荐文章于 2024-09-11 14:31:34 发布
最新推荐文章于 2024-09-11 14:31:34 发布
阅读量3k 收藏
点赞数
分类专栏： vue3+ts 文章标签： vue.js typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34917408/article/details/120184156
版权
本文总结了在Vue3+TypeScript项目中使用高德地图AMap的解决方案，包括在index.html引入API，vue.config.js的配置调整，以及如何处理TypeScript的类型声明，确保项目正常运行。
摘要由CSDN通过智能技术生成

关于vue3+ts项目中使用高德地图AMap方案总结

需求描述:
  • 最近vue项目中需要使用高德地图的api，在这里分享一下AMap在 vue3+ts 项目中的使用。
解决方案:

  • 高德地图现在在开发领域使用非常广泛，他的优势很多大家可以自行去网上了解，现在它也算是作为淘系应用与百度地图及腾讯地图相竞争，所以在淘系应用中十分广泛的高度地图，对于我们开发者而言放心用就对了。

  • 但是呢，由于使用上了 ts 导致我们在项目中使用他的时候就需要自己去配置一些东西，具体如下：

  • 1.在index.html文件中添加以下内容：（这里key自行到高德官网申请）

  • 
    <script type="text/javascript"
了解本专栏 订阅专栏 解锁全文 超级会员免费看
木屋x
关注
专栏目录
订阅专栏
VUE3+Ts使用高德地图组件@vuemap/vue-amap语法检测Amap is not defind
Mr_simoon的博客
03-20 5473
第二种，如果不是eslint语法检测的问题，那就是TS的语法检测了，可以设置declare let Amap :any 或者使用TS的单行忽略 “// @ts-ignore” 就跟写注释一样，我试了结果可行，但是因为我要使用很多次new Amap ，所以暂时作为备选方案。第三种，既然Amap没有找不到，那我们就自己对外暴露一个Amap，里面包含常用的地图API不就行了，创建该文件src\types\Amap.d.ts，在tsconfig.json配置文件添加。下面是Amap.d.ts的内容，可以直接复制。
前端项目vue3结合高德地图实战，可直接运行
06-02
调用高德地图api，实现地图的显示，标记点的增删，完整的项目包含依赖的包和配置文件
vue3高德地图
weixin_49295874的博客
09-22 2442
#在src下创建Amap.d.ts文件 declare namespace AMap { /**此对象用于表示地图、覆盖物、叠加层上的各种鼠标事件返回，包含以下字段： 高德的事件说明文档有问题； 不是 LngLat 类，而是一个普通对象; **/ export class MapsEvent { /** 发生事件时光标所在处的经纬度坐标 **/ public lnglat: { lng: number; lat: number }; /** 发生事件时光标所
整理vue3项目接入高德地图
qq_45730399的博客
08-18 455
整理vue3项目接入高德地图
Vue3 + ts 中使用 高德地图
nana18874597151的博客
03-21 1007
点击 个人中心 -> 应用管理 -> 我的应用 -> 添加新应用 -> 添加Key -> 得到key和 jscode（安全密钥）这时候需要我们扩展一下window的对象，创建一个新的 xxx.d.ts 的文件，写以下的代码即可，报错就会解决。随后当你写上这行代码的时候会报一个错误，如下。这两个文档都需要看，才能正常的使用高德地图。
使用Vue3+TS玩转高德地图
最新发布
m0_56986233的博客
09-11 1139
地图内置插件的使用（鹰眼，图层切换，放大缩小，比例尺，视图位置）， 地点搜索(自定义，不使用内置组件，不方便)， 搜索中心地点方圆公里内容并展示内容（可配置：1公里，2公里，n公里）， 地图打点（自定义打点内容）， 获取个人当前位置坐标， 自定义弹窗信息展示， 行驶路径的轨迹回放（包括开始，结束，暂停，继续）
Vue3+ts项目中怎么使用高德地图呢？
weixin_55973411的博客
08-20 1258
注意:直接写这段可能会报错，因为window下没有_AMapSecurityConfig这个属性的，需要手动配置，创建一个global.d.ts文件写入一下代码即可。6.如果高德地图使用的时2.0版本的话需要配值安全密钥。5.创建地图 地图初始化函数 initMap()4.引入JS API Loader。1.安装Loader。3.设置地图容器样式。
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
01-19
一、在vue-cli的框架下的main.js(或者main.ts)中引入高德插件，代码如下： import Vue from 'vue' import VueAMap from 'vue-amap' import ElementUI from 'element-ui' import App from './App.vue' import router...
vue3ts + 高德地图实现自定义位置标定、轨迹
weixin_42285486的博客
07-12 478
创建高德地图key和安装依赖参考链接。
在 vue3 中使用高德地图
weixin_64684095的博客
04-23 8025
自定义 Marker 内容可以是字符串拼接的 DOM 元素。可以根据 class 名去定义样式。//点标记显示内容`;如果不想使用 JS API 的结果面板，panel 可以缺省或者赋值 false，然后在 search()的回调中处理自己的逻辑，自定义搜索教程前往 输入提示与 POI 搜索。//在回调函数中使用插件功能placeSearch.search("北京大学", function (status, result) {//查询成功时，result 即对应匹配的 POI 信息})
vue3项目使用高德地图AMap详细步骤
浅浅记录一下前端开发常见问题和解决方案
08-02 5328
高德地图、amap、vue3
vue3+ts 高德地图的引入和使用
m0_70265923的博客
01-02 604
【代码】vue 高德地图的引入和使用。
高德地图插件使用
扣脚老骚
08-26 1979
amap插件使用 Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: 'yourkey', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation'], // 默认
vue-cli3中使用vue-amap(高德地图插件)
zjingru的博客
12-15 7392
引入高德地图，并使用搜索，获取具体地址插件。 npm安装 可以先看一眼amap的文档 熟悉里面的一些插件和api https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install //安装命令 npm install vue-amap --save main.js文件配置 import VueAMap from 'vue-amap' //引入 Vue.use(VueAMap) //全局注册 VueAMap.initAMapApi
vue3+ts使用高德地图显示上海区域，添加marker并且能点击marker
liuli0927的博客
02-16 875
vue3+ts使用高德地图显示上海区域，添加marker并且能点击marker
vue3+ts 使用高德地图JSAPI 加载API并初始化地图
路过君的博客
08-30 2901
vue3+ts 使用高德地图JSAPI 加载API并初始化地图
uniapp+ Vue3 +ts引入高德地图小程序SDK
qq_63943166的博客
05-23 779
uniapp+ Vue3 +ts引入高德地图小程序SDK
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木屋x

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值