亲测可用，若有疑问请私信

官网：组件 | vue-amap

昨天把vue的地图（高德）搞了下：

步骤：
1.去高德开发者平台申请key；
2.安装vue-amap；
3.使用组件调用地图

1.npm安装vue-amap
npm install vue-amap --save

2.在项目main.js引入vue-amap

import AMap from 'vue-amap';
Vue.use(AMap);// 初始化vue-amap
AMap.initAMapApiLoader({// 高德keykey: '你的key',// 插件集合 （插件按需引入）plugin: ['AMap.Geolocation']
});

3.重点来了

（1）在map.vue(我自己定义的 .vue) template 中加入

<template><div class="amap-page-container"><div :style="{width:'100%',height:'300px'}"><el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center"></el-amap></div><div class="toolbar"><span v-if="loaded">location: lng = {{ lng }} lat = {{ lat }}</span><span v-else>正在定位</span></div><divv-on:click="req_post()">查询周边</div></div>
</template>
<style>.amap-demo {height: 300px;}
</style>

（2）在 script export default 中加入

      export default {data(){const self = this;return {center: [121.59996, 31.197646],lng: 0,lat: 0,loaded: false,plugin: [{enableHighAccuracy: true,//是否使用高精度定位，默认:truetimeout: 100,          //超过10秒后停止定位，默认：无穷大maximumAge: 0,           //定位结果缓存0毫秒，默认：0convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true,        //显示定位按钮，默认：truebuttonPosition: 'RB',    //定位按钮停靠位置，默认：'LB'，左下角showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy:true,//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：fextensions:'all',pName: 'Geolocation',events: {init(o) {// o 是高德地图定位插件实例o.getCurrentPosition((status, result) => {console.log(result)if (result && result.position) {self.lng = result.position.lng;self.lat = result.position.lat;self.center = [self.lng, self.lat];self.loaded = true;self.$nextTick();}});}}}]}}}

效果如下

DD19A1E3-C878-433E-B9EB-C47349447057.png

其中location: lng和 lat 为定位成功获取到的经纬度

但这只是定位，我们一般肯定是需要获取周围信息，并加以运用的，经过不屑努力找到了方法。

 req_post() {const that=this;const registerUrl="http://restapi.amap.com/v3/batch?key=您的高德key";const newUserInfo={"ops": [{"url": "/v3/place/around?offset=10&page=1&key=您的高德key&location="+that.lng+","+that.lat+"&output=json&radius=100000&types=080000"}]};that.axios.post(registerUrl, newUserInfo, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(function (response) {console.log(response['data'][0]['body']['pois'])}).catch(function (error) {console.log(error);});}

获取的数据如下：

746924CC-0B01-49CD-8A58-DA438C1ABF9E.png

怎样运用就看大家自己了

vue-amap(vue 地图)相关推荐

vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue 引入json地图_使用vue引入maptalks地图及聚合效果的实现
1.安装maptalks.js npm install maptalks --save 2.安装聚合mapkercluster npm install maptalks.markercluster 3 ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
vue：高德地图的使用
1.安装 npm安装: npm install vue-amap --save CDN: <script src="https://unpkg.com/vue-amap/dist/in ...
vue使用高德地图小demo（标记点，画线，3D，叠加图片图层）
vue使用高德地图小demo(标记点,画线,3D) 这个模式是3D的,可以看到地图是带有一定的倾角的. 注意:3D模式下,是不能够将进行画线的,不能使用PathSimplifier,改成2D可以正常使 ...
vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...
vue使用高德地图api，点击地图标记，弹出弹窗，使用animate让弹窗有动画的加载
分以下步骤一.引入高德地图 1.在高德地图--控制台--获取key 2.npm 安装 3.新建一个vue文件作为地图容器二.引入animate.css动画 1.npm 安装 2.main.js引 ...
移动端vue+vant+高德地图实现拖拽选址，周边选址，搜索选址，自动定位，选择城市功能，获取地址经纬度，详细地址
效果图: 在public文件夹下的index.html文件中head标签下加上script标签如下: <script type="text/javascript">wi ...
Vue 引入高德地图 vue-amap
一.在高德开发平台,获取Key(已有可跳过): 高德开发者平台-链接地址 1.控制台--我的应用--创建应用--添加key 创建应用新建应用选择web端(JS平台) last:到这里的 key ...

vue-amap(vue 地图)

亲测可用，若有疑问请私信

vue-amap(vue 地图)相关推荐

最新文章

热门文章