![](https://img-blog.csdnimg.cn/20200727161142898.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
高德地图组件
前端基于vue的高德地图组件的引用
yssa1125001
呆呆的初心者...
展开
-
前端 vue 使用高德地图组件:(三)设置检索框使用地图插件进行位置检索定位
地图组件在业务中往往也需要设置检索框进行位置的检索及定位,这需要用到高德的两个插件,关键字检索插件和根据关键字定位插件完整代码如下:<template> <div class="app-container"> <div id="title">高德地图组件展示</div> <div id="searchDiv"> <el-input id="inputContent"原创 2020-07-27 18:14:38 · 2849 阅读 · 2 评论 -
前端 vue 使用高德地图组件:(二)获取鼠标点击位置坐标 和 图标覆盖物拖动后的坐标
上一篇文章,我们已经成功加载了地图并设置了自定义的图标覆盖物,但是在业务开发中,对地图的运用肯定不是到此为止,对地图组件的操作经常需要坐标值的参与,这篇文章就是简单介绍下坐标值的获取一:我们可以给地图组件绑定单击事件,当鼠标单击时获取对应位置的经纬度://绑定地图组件内单击事件 this.mapMain.on('click', (e) => { this.lngMain = e.lnglat.getLng() this.latMain = e.ln原创 2020-07-27 17:30:58 · 3068 阅读 · 3 评论 -
前端 vue 使用高德地图组件:(一)加载地图并设置自定义覆盖物图标
博主这里用了vue-admin-template作为前台模板做测试...这里使用的是外引高德css和js的方式,因为是spa单页面应用,所以只有一个index.html,在其中添加上相关应用即可:引入(那个key换成自己在高德申请的):<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main.css" /> <script type="text/javascript"原创 2020-07-27 16:33:21 · 5604 阅读 · 2 评论