vue添加定位功能_vue中引入高德地图实现定位功能

最新推荐文章于 2024-04-18 14:28:05 发布
最新推荐文章于 2024-04-18 14:28:05 发布
阅读量1.1k 收藏 3
点赞数
文章标签： vue添加定位功能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_30828697/article/details/113549069
版权

上次在实现一个需求时，需要在web端实现定位功能。即实现在web端搜索定位的功能。首先看一下效果如下：

6491dab36264490c5dd486773e70f70c.gif

功能也相对不是很难，就是需要调用调用地图插件来完成页面地图的加载与显示，本来是打算选取某度的地图，偶然发现高德地图的api也很详细，所以来尝试一下。闲话少说，看具体实现。

1.首先申请一个高德地图的开发平台秘钥

这个秘钥在我们调用高德地图的api中需要使用到，所以必须要申请一个。申请方式搜索高德地图，进入官网，注册一个账号，在控制台里可以看到申请开发秘钥功能。

2.建立Index.vue文件

在Index.vue中放入以下代码，主要设置的是地图布局的样式。

找到我们：

搜索

正在加载数据 ...

UI框架选择了bootstrap，所以上面选用的是栅格布局。

3.引入vue-amap

(1)如果是利用vue-cli搭建的工程，首先利用npm方式安装vue-amap。安装代码如下所示：

npm install vue-amap --save

最低0.47元/天 解锁文章
北川格林
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 使用高德地图进入页面获取用户位置
weixin_45847120的博客
08-14 627
需求：当用户进入程序页面获取用户当前位置 1.创建高德地图的key值 2.安装依赖 npm install vue-amap --save 3.新建一个amp.js export default function MapLoader () { // <-- 原作者这里使用的是module.exports return new Promise((resolve, reject) => { if (window.AMap) { resolve(window
vue 高德地图搜索功能_vue中实现高德定位功能
weixin_39860975的博客
12-19 2294
一、获取key及在index.htm中引入首先需要成为高德开发者，申请到适合项目的key.并在index.html中进行引入二、在配置文件中进行相应配置根据vue脚手架的不用需要在不同的文件中进行配置。我项目使用的是cli3的脚手架，需要在vue.config.js中进行高德地图配置externals: {'amap': 'amap' // 高德地图配置}三、在需要用到的地方进行地图初始化及定位操...
vue按钮点击事件不传递到父控件
明耀的博客
10-06 1390
<button @click.stop="mapClick" class="cu-btn round sm " :class="[bordersize?'lines-cyan':'line-cyan', shadow]">地图</button>
vue-cli3.0引入高德地图3d效果两种方法+实例+填坑
浩星
11-08 9392
前言： 因为项目需要引入高德地图的3d效果，找了很多资料，在这里记录下方法和实例组件 ***注意： 因为两个方法代码量都特别大，这里分2个页面详细说一下，方法一是链接出去专门说，最下面有更多资料，高德3d官网地址和别的资料地址 方法一：使用官方案例，这里提供两个实例，一个是vue-cli3.0使用，一个是直接用html引入实现效果 效果： 详细demo入口：http...
前端开发攻略---Vue项目(Vue2和Vue3)引入高德地图，超详细，超简单，保姆级教程。
最新发布
nibabaoo的博客
04-18 2754
Vue项目引入高德地图，超详细，超简单，保姆级教程。
vue 使用高德地图实现自定义选取起点和终点功能，支持搜索地址跳转定位（保姆级教程）
qq_45970102的博客
03-17 5052
vue 使用高德地图实现自定义选取起点和终点功能，支持搜索地址跳转定位
vue中实现高德定位功能
10-15
在Vue.js应用中集成高德地图的定位功能，可以极大地提升用户体验，特别是在地理位置相关的应用中。以下是如何在Vue项目中实现这一功能的详细步骤： 1. **获取高德地图API Key**： 首先，你需要成为高德地图的...
vue+高德地图实现地图搜索及点击定位操作
12-28
首先需要在index.html中引入高德地图的js链接，key需要换成你自己的key 最近有个需求是实现一个使用地图搜索定位的功能，在网上参考了下其他的文章，感觉不是很完善，自己整理了一下，可以实现点击定位，搜索列表...
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
10-15
在Vue项目中集成高德地图并实现定位及关键字搜索功能是一项常见的需求，下面将详细介绍如何在Vue项目中实现这些功能，以及在实现过程中需要注意的一些关键点。 首先，我们需要在项目的`index.html`文件中引入高德...
vue是否可以做行车轨迹_在Vue中高德地图引入和轨迹的绘制的实现_含真_前端开发者...
weixin_39844590的博客
12-21 258
高德地图引入和轨迹的绘制1.第一步npm install2)import VueAMap from ‘vue-amap'Vue.use(VueAMap);VueAMap.initAMapApiLoader({key: ‘********************',//自己在高德地图平台上的key值plugin: [‘AMap.Autocomplete', ‘AMap.PlaceSearch', ‘...
vue3+ts+vite+cesium 加载天地图影像 天地图矢量地图 天地图标注等案例模板
u012425087的博客
04-02 2262
案例代码是基于 Vue3 和 Cesium 开发的一个天地图三维地球应用。在组件挂载后，通过 Cesium.Viewer 创建了一个三维地球实例，并设置了一系列的界面控件和参数，例如动画小组件、底图组件、全屏组件、时间轴等。接着，使用天地图的 WebMapTileServiceImageryProvider 添加了四个不同的图层，包括矢量底图、矢量注记、影像底图和影像注记。最后，将实例挂载到组件模板中的 div 元素中，使用户可以在页面上看到一个完整的天地图三维地球应用界面。
vue echaets实现地图下钻功能和散点图
u013221050的博客
02-27 1038
代码实现如下 <template> <div> <div ref="mapCountry" class="map-main" /> <div ref="mapProvince" class="map-main" /> <div ref="mapCity" class="map-main" /> <...
echarts+vue实现世界地图
热门推荐
m0_51626288的博客
07-23 14万+
使用vue+echarts实现世界地图展示
vue引入高德地图多种方法实现
l_____z______z的博客
07-29 1444
高德地图引入方法总结
Vue使用高德地图搜索功能
weixin_59645828的博客
02-23 1735
vue使用高德地图搜索定位功能
vue调用高德地图实现定位
Ang-l
05-27 9837
vue调用高德地图实现定位 第一步创建高德地图key 第二步：下载vue-amap npm install vue-amap --save 第三步：在项目main.js引入vue-amap import AMap from 'vue-amap'; Vue.use(AMap); // 初始化vue-amap AMap.initAMapApiLoader({ // 高德key key: '你的key', // 插件集合 （插件按需引入） plugin: ['AMap.Geolocation'
vue项目中使用高德地图（根据坐标定位点）
weixin_43935117的博客
08-21 2849
前言 项目中需要根据坐标定位，将自己的实现过程写下来，废话不多说，上代码 正文 data(){ return{ arriveCoor:[34.15,108.56],//定位坐标 　　　 arrive:"",//具体信息 } }, mounted() { mapDraw(this.arriveCoor), mapCoor(this.arriveCoor)...
学会在Vue项目中插入高德地图JS API与地图的相关设置，看这一篇就够了~（保姆级精简教学）
bsegebr的博客
03-02 1573
高德地图API官网：高德开放平台 | 高德地图API。由于博主是基于前端 Vue 框架进行开发的，所以针对地图 JavaScript API****结合 Vue 展开介绍。 一、案例效果 二、开发准备 需要注意想要使用 JS API 必须注册账号并获取 key 值。 1. 注册高德开放平台账号 正常输入个人信息注册即可。 2. 创建应用添加 key 值 注册成功之后，进入控制台，然后点击创建新应用； 填写名称应用名称和类型之后就可以看到已创建的应用了； 接下来点击“添加”为应用添加 key 值
vue 高德地图定位按钮功能实现
08-31
Vue高德地图定位按钮功能的实现可以分为以下几个步骤： 1. 引入高德地图的JavaScript SDK库。在Vue的项目中，可以通过npm安装amap-jsapi-loader库，并在入口文件（如main.js）中导入并使用该库加载高德地图的JS API。 2. 在Vue组件中创建地图容器。可以使用AMap.Map()方法创建一个地图的实例并指定容器的id，例如：new AMap.Map('map-container')。 3. 创建定位按钮并绑定相应的点击事件。在Vue组件的template中添加一个按钮元素，并为其添加一个@click事件监听器，用来触发定位功能的实现。 4. 实现定位功能。在点击定位按钮时，触发点击事件的处理函数，在该函数中调用高德地图的定位服务API，如AMap.Geolocation()来获取当前位置的经纬度。 5. 将定位的经纬度设置为地图的中心点，并在地图上显示一个标记点。可以使用AMap.Marker()创建一个标记点实例，然后设置其position为定位的经纬度，并添加到地图上。 6. 可以根据需要，将经纬度转换为具体的地址信息，并在页面中显示。可以使用AMap.Geocoder()的逆地理编码功能，将经纬度转换为地址。 具体代码示例： ```vue <template> <div> <button @click="getLocation">定位</button> <div id="map-container"></div> <div>{{location}}</div> </div> </template> <script> import AMapLoader from 'amap-jsapi-loader'; export default { data() { return { map: null, location: '' } }, mounted() { AMapLoader.load({ key: 'your-amap-api-key', version: '2.0' }).then(() => { this.map = new AMap.Map('map-container'); }); }, methods: { getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position) => { const { latitude, longitude } = position.coords; this.map.setCenter([longitude, latitude]); new AMap.Marker({ position: [longitude, latitude], map: this.map }); const geocoder = new AMap.Geocoder(); geocoder.getAddress([longitude, latitude]).then((result) => { this.location = result.regeocode.formattedAddress; }); }); } else { alert('浏览器不支持定位功能'); } } } }; </script> ``` 需要注意的是，代码中的'your-amap-api-key'需要替换为你自己申请的高德地图API的秘钥。另外，在使用定位功能时，需要用户授权浏览器获取其位置信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值