快速上手使用 vue-amap插件 接入高德地图

最新推荐文章于 2024-03-28 18:42:30 发布
最新推荐文章于 2024-03-28 18:42:30 发布
阅读量409 收藏
点赞数
分类专栏： 前端 文章标签： vue vue.js es6 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zsjfl_12/article/details/104267015
版权

直奔主题

1.安装vue插件

npm install vue-amap --save

插件安装完成后

2.引入插件

老规矩在main.js中写入：

import VueAMap from 'vue-amap';
VueAMap.initAMapApiLoader({
   
  key: 'your amap key',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch'
最低0.47元/天 解锁文章
张九宸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 使用高德地图vue-amap组件过程解析
12-10
这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先 npm install -S vue-amap 然后在 main.js import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖 Vue.use(VueAMap); // 初始化vue-amap VueAMap.initAMapApiLoader({ // 高德的key key: 'you key', // 插件集合 plugin: ['AMap.Autocomple
vue如何引入高德地图插件
li28256的博客
09-18 353
最简单的方法。
基于vue的三维模型加载插件
05-11
安装：npm install vue-model-view -S 组件安装：import ModelView from 'vue-model-view' Vue.use(ModelView)
Vue常用的插件合集
weixin_45644355的博客
04-07 207
1.代码优化：《代码整洁之道》 2.Vue常用的插件合集： element-饿了么出品的 Vue2的web UI工具套件 Vux - 基于Vue和WeU的组件库 mint-ui - Vue2的移动UI元素 iview - 基于Vuejs的开源UI组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue2 建立精美的app应用 muse-ui - 三端样式一致的响应式UI库 vuetify - 为移动而生的Vue JS 2组件框架 vonic -
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
01-19
import VueAMap from 'vue-amap' import ElementUI from 'element-ui' import App from './App.vue' import router from './router' import store from './store' import './registerServiceWorker' Vue.use(VueAMap...
使用vue-aplayer插件时出现的问题的解决
08-27
使用vue-aplayer插件时出现的问题的解决 在使用vue-aplayer插件时，可能会遇到一些问题，本文将介绍这些问题的解决方法。首先，我们需要安装vue-aplayer插件，可以使用npm install vue-aplayer --save命令来安装。 ...
vue 借助vue-amap插件对高德地图的简单使用
最新发布
qq_58340302的博客
03-28 3578
需求：实现点击获取经纬度、定位、对特殊位置标点及自定义信息窗体功能。
【快速上手】Vue如何通过百度地图插件——vue-baidu-map插件实现地图轨迹与路线等功能
weixin_43746402的博客
06-28 1万+
现在挺多博主都做的挺完整的地图文档使用介绍等等，但有时候我们接触去选择自己做的效果时候还是会遇到很多不同的问题。这里我把我自己个人在各个检索下的文章，做出自己想要的效果地图，基础地图功能＋路线+运动轨迹的过程介绍一下对应组件使用与注意事项。
高德地图系列（一）：vue项目如何使用高德地图、入门以及基本控件使用
qq_45796592的博客
11-14 5817
vue项目使用高德地图、入门以及基本控件详细使用教程
快速上手echarts，一分钟生成你的图表，在Vue中使用echarts地图等常用类型，
2301_80868127的博客
03-06 996
以Vue2为例，下载完成后在main.js文件中引入我们的echarts库，由于Vue2的特性所致，我们可以获取到Vue全局对象，所以我们。可以看到一个图表就生成了，具体的数据大家可以参考官网提供的示例，里面包含了大部分的图表配置，也可以查看配置手册定制自己的图表，以上就实现了一个地图组件了，echarts作为非常热门的可视化库，在前端开发中常常会有它的身影，所以你学会了吗~~做完这些，后面配置就一样了，唯一变化是在setOption参数对象中多了一个地图的配置对象。进行注册地图，方法接收两个参数，
使用echarts插件在vue中创建一个地图
m0_70977931的博客
08-03 611
vue 组件创建地图
vue使用高德地图插件（1）-在网页上显示地图
IT12345666的博客
05-06 2074
首先在官方平台上进行认证 认证通过之后 进入到我的控制台当中 1.进入到“我的应用” 2.创建一个新应用 3.添加key到你的实例上 4.在项目中引入js 依赖 官方文档的地址： https://lbs.amap.com/api/javascript-api/guide/abc/prepare 这里就通过最粗暴的方式进行引入 如果有兴趣去了解更多的就去官方文档上去查阅吧！ 在您的项目的 index.html 中 引入此链接 <script type="text/javascript"&g
【通俗易懂】Vue如何使用百度地图，通过vue-baidu-map插件实现地图功能【文档使用介绍】
热门推荐
seeeeeeeeeee的博客
10-21 1万+
现在的地图组件已经是很常用的东西了，基本上都会接触到，那么如何使用呢，相信很多新手会有点懵 这里就把基础的用法说一遍，然后说一下如何看文档。这样你就可以自己去添加功能了。 效果图 我做的是PC端的 目前的基础功能就是自动定位城市，然后可以检索地点。这也是通用最常用的基础功能了。 第一步：先下载插件 npm install vue-baidu-map --save 第二部：全局注册一下，在main.js里面 提示：密钥不填是地图出不来的哦。 import BaiduMap from 'vue-baidu-
vue-amap 高德地图中使用测距插件
zw19940808的博客
10-27 2554
前言：高德地图的测距插件，可能由于项目配置不同，导致使用插件失败。这里只是作为记录，以便后续翻查，如有问题也欢迎留言，大家一起研究 第一步： -- 在main.js中配置你所需要使用的插件 --VueAMap.initAMapApiLoader({ key: '这里是你申请的key', plugin: [ 'AMap.Scale', 'AMap.OverView', ...
vue引用高德地图api（输入提示插件）无法获取数据问题
元仙僧的博客
08-27 4767
在用vue做调度系统项目的时候引用高德地图api进行地点输入时需要提示可能的地点。就是高德地图api的输入提示插件，这有一个好处，高德地图api传过来的json中含有坐标，方便在地图上打点以及地图相关操作。 看实例 我需要在输入地址的时候可以显示可能的地址列表，如下图。 官方实例：https://lbs.amap.com/api/javascript-api/example/input/inp...
高德地图美食爬虫
m0_46322357的博客
06-29 1309
前言：今天讲下高德地图全国美食爬虫。 反爬点： 高德地图反爬主要是： 1.IP代理。 2.headers(referer,cookie必要的),referer:随便个可以不变。cookie:必要的参数：isg,l,cna(可自行数字大小写字母组合)，uab_collina（固定值） 3.限制最大45页，可地区精确到区及二级分类精确到火锅来尽可能最大获取，避免最大页数问题. import requests,random,string,time,pymongo,re,json,datetime,logging
vue-amap基本使用
上野
03-04 4197
高德地图官网 vue-amap官网 如果是第一次使用，需要登录高德地图官网去申请一个key, 已经申请过key的可以跳过这一步； 2. 项目中引入vue-amap: npm install vue-amap --save > 在main.js中 vue-amap插件 import VueAMap from 'vue-amap'; //引入高德地图 // 高德地图 Vue.u...
python爬网站数据实例-python requests爬取高德地图数据的实例
weixin_37988176的博客
10-29 935
如下所示：1.pip install requests2.pip install lxml3.pip install xlsxwriterimport requests #想要爬必须引from lxml import html #这个是用于页面爬取import xlsxwriter#操作Excel表格库workbook = xlsxwriter.Workbook('E:/test/test.xls...
如何在 vue-amap 中使用高德 sdk
09-01
在Vue中使用高德SDK可以通过vue-amap插件来实现。以下是一些基本步骤： 1. 首先，通过npm或yarn安装vue-amap插件。可以使用以下命令进行安装： ```bash npm install vue-amap ``` 2. 在main.js文件中引入vue-amap插件： ```javascript import VueAMap from 'vue-amap'; Vue.use(VueAMap); ``` 3. 在Vue组件中使用vue-amap插件。可以在组件的mounted钩子函数中进行初始化和配置。 ```javascript mounted() { // 初始化vue-amap this.initAMapAPI(); }, methods: { initAMapAPI() { // 配置vue-amap VueAMap.initAMapApiLoader({ key: 'your-amap-api-key', plugin: ['AMap.Geolocation'] }); // 加载插件模块 VueAMap .then(() => { // 创建地图对象 const map = new VueAMap.Map('map-container'); // 添加地图控件等操作 // ... // 获取当前位置 this.getCurrentLocation(map); }) .catch(error => { console.log('地图加载失败：', error); }); }, getCurrentLocation(map) { // 使用高德SDK中的定位功能获取当前位置 AMap.plugin('AMap.Geolocation', () => { const geolocation = new VueAMap.Geolocation(); map.addControl(geolocation); geolocation.getCurrentPosition((status, result) => { if (status === 'complete') { // 获取到当前位置信息 console.log('当前位置：', result); } else { // 获取失败 console.log('获取位置失败'); } }); }); } } ``` 通过以上步骤，你就可以在Vue中使用高德SDK了。需要注意的是，在使用过程中要替换'your-amap-api-key'为你自己的高德API密钥。并且根据需求，你还可以添加更多高德SDK的功能和组件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值