vue项目中使用高德地图（根据坐标定位点）

最新推荐文章于 2024-07-16 16:09:32 发布
置顶 最新推荐文章于 2024-07-16 16:09:32 发布
阅读量2.9k 收藏 4
点赞数 1
分类专栏： 前端进阶路 web开发 vue 高德地图 文章标签： vue 高德地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43935117/article/details/99964014
版权
本文记录了一个Vue项目中如何根据坐标进行地图定位的实现过程，详细介绍了相关代码，旨在帮助开发者解决问题。文章简洁明了，欢迎讨论交流。
摘要由CSDN通过智能技术生成

前言

项目中需要根据坐标定位，将自己的实现过程写下来，废话不多说，上代码

正文

var map,marker;
export default {
   
	data(){
   
	   return{
   
	      arriveCoor:[108.947025,34.2613255],//定位坐标
	　　　 arrive:"",//具体信息
	   }
	},
	mounted() {
        
	   mapDraw(this.arriveCoor),
	   mapCoor(this.a
最低0.47元/天 解锁文章
把你打到乱码
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue使用高德地图根据坐标定位点的实现代码
10-16
主要介绍了vue使用高德地图根据坐标定位点的实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue2高德地图实现定位、点击地图获取当前位置信息、搜索
qq_44724181的博客
02-11 7288
web高德地图定位、点击获取位置信息、搜索
【高德地图】vue使用高德地图（js api）
最新发布
m0_70950838的博客
07-16 1615
vue中使用高德JSapi，添加点标记以及其他覆盖物，高德JSapi的常用操作
vue 高德地图 地图选点 + 获取当前定位 + 地址逆解析
我的小鱼干呢！
05-10 2757
本文主要介绍了如何使用高德地图在 vue 中实现地图选点、获取定位、地址逆解析等功能。
html地图根据坐标定位,百度地图js根据经纬度定位和拖动定位点
weixin_34404599的博客
06-02 227
定位body, html, #allmap{100%;height: 100%;overflow: hidden;margin: 0;},.anchorBL{ //去Logodisplay:none;}// 百度地图API功能var map = new BMap.Map("allmap");// 创建Map实例map.enableScrollWheelZoom();//启用滚轮放大缩小//map....
记录--vue使用高德地图搜索选址&&拖拽选址
yynikki的博客
10-11 1696
1. 在index.html里引入<!-- 引入高德,一定要在头部引入,因为高德需要预加载--> 2.使用地理逆编码转换为经纬度定位到地图上 3.tips：使用地理逆编码，此时解析出的经纬度位置也应逆换 4. 2. 在build文件夹下的webpack.base.config.js配置,写在"module.exports={}''里最底下，与"entry{}"平级 externals: { 'AMap': 'AMap', 'AMapUI': 'AMapU }
vue2集成amap（高德地图）位置搜索和定位
xinzi11243094的博客
06-05 7704
有几个注意事项是，我是2017-6-15开发的，目前的vue-amap api太简陋了，而且定制化很恼火，所以建议集成vue-amap后，再结合官方文档。随便值得高兴的是，终于摆脱了百度地图恶心的api，不需要头部直接引用百度地图那个js了，因为我整个项目就只有一个页面要用到地图功能，全局引入太恶心了。下面进入正题：1. 到高德地图注册一个帐号，创建应用，创建一个key2.  安装[plain] ...
vue+高德地图写地图选址组件
yun的博客
05-17 4961
前言 现在做这个移动端的项目中有一个地图选址的功能，本来高德地图中有一个现成的选址组件，但是有两个问题，因为他是用iframe引用的，第一改不了样式，这点还勉强能接受；第二他的左上角有一个返回键，在搜索的时候可以返回到地图界面，但是在地图界面时点返回没有用，试了半天也没搞明白怎么监听到那个返回键的点击事件，所以趁这两天项目基本结束自己写一个把这个功能优化一下，也方便以后使用。 开整 vue的安装使...
vue 高德地图获取当前位置
且听风吟的博客
07-09 5403
vue 高德地图获取当前位置1.引入高德地图2.添加定位插件 1.引入高德地图 上一篇博客中已经详细讲解了如何在vue项目中引入高德地图，因此不再赘述。 2.添加定位插件 在引入高德地图的基础上，添加定位插件。如下图所示： 简单的几句代码，即可实现获取当前位置的功能。（不得不说，插件是个好东西呢，哈哈~）效果如下图所示： ...
vue使用elementui结合高德地图的定位以及位置显示
11-25
下面将详细解释如何在Vue项目中实现ElementUI与高德地图的整合，特别是定位和位置标记功能。 首先，我们需要在项目中引入ElementUI和高德地图API。安装ElementUI可以通过npm命令`npm install element-ui --save`...
vue+高德地图实现地图搜索及点击定位操作
10-14
主要介绍了vue+高德地图实现地图搜索及点击定位操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
前端项目vue3结合高德地图实战，可直接运行
06-02
这个项目不仅展示了如何在Vue3环境中引入和使用高德地图，还涵盖了地图的基本操作，如显示地图、添加和删除标记点。下面我们将详细探讨其中涉及的关键知识点。 1. **Vue3框架**： Vue3是Vue.js的最新版本，提供了...
高德、百度坐标系转天地图坐标系
06-06
在IT行业中，尤其是在地理信息系统（GIS）领域，不同的地图服务提供商通常使用不同的坐标系来表示地理位置。例如，高德地图、百度地图以及天地图分别采用了它们自己的坐标系。本篇文章将详细阐述高德、百度坐标系与...
vue添加定位功能_vue中引入高德地图实现定位功能
weixin_30828697的博客
01-30 1184
上次在实现一个需求时，需要在web端实现定位功能。即实现在web端搜索定位的功能。首先看一下效果如下：功能也相对不是很难，就是需要调用调用地图插件来完成页面地图的加载与显示，本来是打算选取某度的地图，偶然发现高德地图的api也很详细，所以来尝试一下。闲话少说，看具体实现。1.首先申请一个高德地图的开发平台秘钥这个秘钥在我们调用高德地图的api中需要使用到，所以必须要申请一个。申请方式搜索高德地图，...
（2021-2022）(vue)h5 通过高德地图（原生） 获取当前位置定位
yangzixiansheng的博客
09-08 6432
百度地图原生[点这里] vue-amap是基于高德原生封装好的供vue使用，对图层的操作会更便捷一些。 当前的需求，只需拿到当前定位。所以可以使用原生js
【VUE-AMap】记录一下VUE使用高德地图，用于公司官网，显示公司定位时，自定义图标不显示的问题
gaoyuekang的博客
06-01 1109
VUE 编写高德地图，自定义Mark图标不显示的问题
几个IP定位API接口
hongtailin的博客
10-24 674
在做定位的朋友，如果只是单纯的想获取地址而又不想集成高德等第三方sdk，可以试试以下地址： https://ip.seeip.org/geoip https://ip.nf/me.json http://ip-api.com/json 这几个地址是世界通用，不管是哪个ip都可以进行访问 如果还想进一步进行详细的地址解析，可以试试这个sdk https://github.com/maxmind/GeoIP2-java ...
vue简单使用高德地图定位
weixin_45321050的博客
03-16 4200
版权声明：本文为CSDN博主「jlinbk」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/jlinbk/article/details/118335607。我这里选的是web端，提交后会生成一个key值。3、在项目main.js引入vue-amap。我们需要到高德开放平台生成key。以上就是高德地图的简单使用。2、安装vue-amap。
vue2中如何使用高德地图对地图添加gps定位
05-27
要在Vue2中使用高德地图对地图添加GPS定位，可以按照以下步骤进行： 1. 首先，在Vue项目中引入高德地图JavaScript API的SDK，并在页面中添加地图容器。 2. 在Vue组件中使用AMap对象的定位插件AMap.Geolocation获取用户的位置信息，并将地图中心移动到用户当前位置。 以下是示例代码： ``` <template> <div id="map-container"></div> </template> <script> export default { mounted() { // 初始化地图对象 const map = new AMap.Map('map-container', { zoom: 14 }); // 使用定位插件获取用户位置信息 map.plugin('AMap.Geolocation', function() { const geolocation = new AMap.Geolocation({ enableHighAccuracy: true, // 是否使用高精度定位，默认:true timeout: 10000, // 超过10秒后停止定位，默认：无穷大 maximumAge: 0, // 定位结果缓存0毫秒，默认：0 convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true showButton: true, // 显示定位按钮，默认：true buttonPosition: 'LB', // 定位按钮停靠位置，默认：'LB'，左下角 buttonOffset: new AMap.Pixel(10, 60), // 定位按钮距离容器底部/右侧的像素距离，默认：Pixel(10, 20) showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true zoomToAccuracy: true // 定位成功后自动调整地图缩放级别以适应定位精度范围，默认：true }); map.addControl(geolocation); geolocation.getCurrentPosition(function(status, result) { if (status === 'complete') { // 定位成功，将地图中心移动到用户当前位置 map.setCenter([result.position.lng, result.position.lat]); } else { // 定位失败 console.log('定位失败'); } }); }); } } </script> ``` 在上面的示例代码中，我们首先初始化了一个地图对象，然后在组件的mounted生命周期函数中使用AMap.Geolocation插件获取用户位置信息，并将地图中心移动到用户当前位置。注意，需要在组件中引入高德地图JavaScript API SDK，并在页面中添加地图容器。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值