vue3项目使用第三方地图

最新推荐文章于 2024-06-18 11:23:38 发布
最新推荐文章于 2024-06-18 11:23:38 发布
阅读量495 收藏 2
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010419628/article/details/128855527
版权
本文介绍了如何在Vue3项目中使用第三方地图——维智地图，包括申请地图key、初始化Vue项目、引入地图资源、创建MyMap组件并在App组件中引用的步骤。提供了一个基础的代码结构，并鼓励读者在评论区交流遇到的问题。
摘要由CSDN通过智能技术生成

最近发现一个功能很强第三方地图维智地图，示例效果很多，代码也很好理解，准备出一系列项目中常用的效果实战教程。本期内容为初始化地图教程，是后续教程的铺垫。

申请地图key

https://lothub.newayz.com/，这是它们对公业务的官网；
http://location-dev.newayz.com/aimap-gl-v2/docs/summary/introduction.html，这是开发文档。
https://lotboard.newayz.com/，这是它们的开放平台，和高德百度控制台差不多，注册账号，申请个应用就能用了，这里的key就是我们要的。

最低0.47元/天 解锁文章
LOVAE007
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
vue-google-maps：适用于Google地图的Vue.js 3个组件
02-14
Google为Vue.js 3映射组件 Vue.js的一组最常用的Google Maps组件。 为什么这个图书馆存在？ 我们在项目中大量使用Google Maps，因此我想拥有一个维护良好的Google Maps库。 文献资料 查看以获取详细文档 安装 您可以使用npm安装它 npm install -S @fawmi/vue-google-maps 基本用法 您需要一个API密钥。 了解如何。 ##配置Vue以使用组件 在您的main.js或Nuxt插件中： import { createApp } from 'vue' import * as VueGoogleMaps from '@fawmi/vue-google-maps' const app = createApp ( App ) ; app . use ( VueGoogleMaps , { load : {
维智地图 在地图上批量标记点位 点击弹出弹框等功能
m0_65607651的博客
07-24 522
到这里就结束了 里面我看了看没有定义其他特殊的方法 就一个单个数据点位时跳转到详情页的方法 在弹框模板字符串里还有一个 点击事件 是多个点位展示列表时 点击对应的查看更多跳转到详情页的方法(也是调用跳转方法)通过后端返回的数据 加载到地图上标注点 格式会有一个或多个地址点位 多个地址点位在一块的话 用上面那个列表展示 单个的话点击就直接跳转到详情页。最近有新的地图开发工具在用 来小记一下 这个是搭配原生js和jquery使用的 框架用的mui框架书写的移动端地图。一, 先介绍一下功能。
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
最新发布
浩星
06-18 1571
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
vue3项目中使用百度地图和高德地图，添加控件，搜索api, 热力图
weixin_59832677的博客
09-02 5440
map.addControl(new BMap.CityListControl({ showPanel: true })) // 添加城市列表控件。var pp = local.getResults().getPoi(0).point //获取第一个智能搜索的结果。map.addControl(new BMap.MapTypeControl()) //地图的显示类型：包括地图和卫星。map.addControl(new BMap.NavigationControl()) // 添加缩放控件。
vue3/vite百度地图组件（点聚合，路书，热力图，自定义覆盖物等，api2，api3，webgl，离线都支持）
m0_60142433的博客
09-02 3376
vue3/vite百度地图组件（点聚合，路书，热力图，自定义覆盖物等，api2，api3，webgl，离线都支持）。组件使用灵活，可在地图ready事件中定制百度地图原生api功能。此外还封装了一些常用组件：比例尺，缩放，3D，卫星地图，定位，测距，自定义点，信息窗体，工交检索
vue3使用百度地图(详)
热门推荐
jyl919221lc的博客
03-29 1万+
百度地图学习，vue3学习地图，vue地图学习，AK密钥申请，vue-baidu-map-3x，自定义地图样式，vue-baidu-map-3x控件学习
vue+三维GIS地图
12-08
此实例为vue版本三维GIS地图，其中包含底图切换、图层控制、图上量算、空间分析、坐标定位、图上标绘、地图打印等功能
前端项目vue3结合高德地图实战，可直接运行
06-02
- `node_modules`：项目依赖的第三方库和工具，由npm或yarn管理。 - `src`：源代码目录，包含Vue组件、样式、配置文件等。 6. **JavaScript 和 ECMAScript**： 项目中的JavaScript代码可能涉及到ES6+的语法特性...
vue-cli中使用高德地图的方法示例
10-17
在vue-cli项目中集成高德地图（Amap）涉及到几个关键步骤，从配置环境、获取API密钥到在Vue组件中...这些步骤不仅涉及到前端的JavaScript编程，还包含对第三方地图服务的集成，是提升Web应用地理信息功能的重要步骤。
通过webpack引入第三方库的方法
10-18
当需要在项目内部管理第三方库时，我们可以使用 npm 或 yarn 安装。以 jQuery 为例，首先在命令行运行 `npm install jquery`，安装完成后，可以在需要使用 jQuery 的 JavaScript 文件顶部通过 `import` 或 `require...
vue中调用百度地图实现搜索等功能
01-08
将API链接添加到Vue项目的HTML文件中，或者通过npm或yarn安装`baidumap-sdk`这样的第三方库来引入百度地图。 2. **创建地图实例**： 在Vue组件的`mounted()`生命周期钩子中，创建一个新的BMap.Map实例，传入一个...
Vue3集成高德地图：快速上手，实现你的业务需求
爱媳妇儿爱编程
10-16 7646
vue3集成高德地图细节优化总结
Vue3 Echarts散点图+高德地图+卫星地图（二）——Echarts配置散点图高德卫星地图版
zmsup.com
08-31 8226
Vue3 Echarts散点图+高德地图+卫星地图（二）——Echarts配置散点图高德卫星地图版
vue3 封装高德地图通用组件
瑰的博客
06-23 3745
vue3 封装高德地图通用组件
vue3+ts 引入高德地图并使用地图选点和搜索
love_weiai的博客
11-02 1596
在index.html引入。创建map.vue组件。
vue3+vite+echarts疫情地图
weixin_52084329的博客
11-13 1225
在echarts.js文件中设置tools对象并导出，在其中可以定义多个函数，此处的chinaMap就是其中的一个图形，这里传入了两个参数，第一个id是这个地图所占据的盒子，第二个data是对地图渲染的数据（也就是关于疫情的数据），其中init初始化语句和最后的setOption语句是必要的，详细的使用方法可以看echarts官网，中间的option部分就是自己关于地图的配置，图形的data直接把传入的data赋值即可。因为这里使用了中国地图，所以需要在main.js文件中额外添加一句，表示引入中国地图。
vue3中dialog弹窗中使用高德地图
webbirds的博客
12-24 2049
第一步 安装amap-jsapi-loader npm i @amap/amap-jsapi-loader --save // 官方文档中加了-dev字段，加了-dev字段就只能在本地的时候使用，部署到服务器后将不引入包 第二步 封装地图组件map.vue <template> <div id="container"></div> </template> <script> import AMapLoader from "@amap/amap-
Vue3地图选点组件
前端成长之路
01-03 1034
Vue3地图选点组件。
维智地图集成
weixin_36931768的博客
08-23 263
/ 参考文档：http://location-dev.newayz.com/aimap-gl-v2/docs/aimap/map.html#生命周期。// 指定 baseApiUrl，用于指定服务地址，当处于私有化部署的环境中时，务必注意修改此项。aimap.accessToken = '您的 accessKey';obj.innerHTML = '创建';obj.innerHTML = '销毁';if (btnData === '销毁') {// 指定 accessToken，用于服务鉴权。
vue3 ts使用高德地图
12-26
以下是在Vue3+TS项目中使用高德地图的步骤： 1. 下载离线地图瓦片：可以在高德地图官网上下载离线地图瓦片，也可以使用第三方工具下载。下载完成后，将瓦片文件放置在项目的public目录下，例如：public/map。 2. 安装高德地图SDK：使用npm或yarn安装高德地图SDK。 3. 在模板中使用地图组件：在Vue组件中引入AMap.TileLayer类，并在模板中使用地图组件。 以下是一个示例代码： ```vue <template> <div> <div id="mapContainer"></div> </div> </template> <script> import { onMounted } from 'vue'; import AMap from 'AMap'; export default { name: 'MapComponent', setup() { onMounted(() => { // 创建地图实例 const map = new AMap.Map('mapContainer', { zoom: 10, center: [116.397428, 39.90923] }); // 加载离线地图瓦片 const tileLayer = new AMap.TileLayer({ zooms: [3, 20], visible: true, zIndex: 0, tileSize: 256, tileUrl: '/map/{z}/{x}/{y}.png' // 瓦片图层的URL地址 }); map.add(tileLayer); }); return {}; } }; </script> <style> #mapContainer { width: 100%; height: 400px; } </style> ``` 请注意，上述代码中的`AMap`是从高德地图SDK中引入的，需要根据实际情况进行安装和引入。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值