首先    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.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation'],
v: '1.4.4' });

 

 map.vue文件

其中有个BUS.js,是基于观察者模式的发布订阅封装

<template>
<div class="_map">
<div class="amap-page-container">
<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" ></el-amap-search-box>
<el-amap ref="map" vid="amapDemo" :plugin="plugin" :zoom="zoom" :center="center" class="amap-demo" :events="events">
<el-amap-marker vid="component-marker" :position="makerConf.position" :content="makerConf.content" ></el-amap-marker>
</el-amap>
</div>
<div class="adrs">
<ul>
<li class="" v-for="(item,index) in list" :key="index" :class="currIndex == index ? 'active':''" @click="select(item,index)">
<p class="address">{{item.address}}</p>
<p class="nm">{{item.name}}</p>
</li>
</ul>
</div>
</div>
</template> <style>
.amap-page-container{
height: 300px;
position: relative;
}
.search-box {
position: absolute !important;
top: 25px;
left: 20px;
z-index: 200 !important;
}
.amap-demo {
height: 300px;
}
.amap-logo {
display: none;
}
.amap-copyright {
bottom:-100px;
display: none;
}
.amap-scalecontrol{
bottom: 4px !important;
}
.amap-geolocation-con{
bottom: 30px !important;
z-index: 199 !important;
}
ul li.active{
color: deeppink;
}
</style> <script> export default {
name: 'amap-page',
components: {},
data() {
var me = this;
me.city = me.city || '武汉';
return {
list:[],
currIndex:0,
zoom: 16,
center: [114.397169, 30.50576],
events:{
init: (o) => {
o.setCity(me.city,result => {
console.log("----------setCity",result);
if(result && result.length > 0){
me.zoom = 16;
me.makerConf.position = result;
me.getList(result);
}
});
//去掉logo
document.getElementsByClassName("amap-logo")[0].style.display = "none";
},
"dragend":function(e){
//console.log("dragging",e,this.getCenter());
var point = this.getCenter();
var pos = [point.lng,point.lat];
me.makerConf.position = [point.lng,point.lat];
me.getList(pos);
}
},
makerConf: {
position: [114.397169, 30.50576],
content:""
},
searchOption: {
city: me.city,
citylimit: true
},
plugin:[
'ToolBar',
'Scale',
{
pName: 'Geolocation',
events: {
init(o) { },
complete:function(result){
//定位成功
var address = result.formattedAddress
var point = result.position;
var obj = {
address:address,
name:"",
location:point
}
me.list = [obj];
me.makerConf.position = [point.lng,point.lat];
},
error:function(){ }
}
}
]
};
},
created(){
var me = this; },
mounted(){ },
methods: {
select:function(item,index){
var me = this;
me.currIndex = index;
var point = item.location;
me.makerConf.position = [point.lng,point.lat];
me.center = [point.lng,point.lat]; },
//this.$refs.map.$$getCenter()
getList:function(result){
//获取列表
var me = this;
me.$Geocoder({
lnglatXY:result,
success:function(res){
if(res.regeocode && res.regeocode.pois){
me.list = res.regeocode.pois;
}else{
me.list = [];
}
},
error:function(res){
me.list = [];
}
}); },
onSearchResult(pois) {
//搜索
let latSum = 0;
let lngSum = 0;
var me = this; var mymap = me.$refs.map.$$getInstance(); if (pois && pois.length > 0) { //如果长度为1则无需转化
var poi = pois[0];
var lng = poi["lng"];
var lat = poi["lat"];
me.center = [lng, lat];
me.makerConf.position = [lng, lat];
//me.makerConf.content = poi.name;
me.list = pois;
}else{
me.list = [];
}
}, $Geocoder(options){
//将坐标点转化为,详细地址
options = options || {};
if(AMap){
AMap.plugin(['AMap.Geocoder'], () => {
const geocoder = new AMap.Geocoder({
radius: options.radius || 1000,
extensions: options.extensions || "all"
})
var lnglatXY = options.lnglatXY || [114.397169, 30.50576]; //已知点坐标
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
options.success && options.success(result);
}else{
options.error && options.error(status,result);
}
});
}); } }
},
"watch":{
list:function(){
this.currIndex = 0;
}
} }; /*
me.$Geocoder({
lnglatXY:[center.lng, center.lat],
success:function(res){
console.log(res);
}
});
*
* */
</script>

  

 

  bus.js

let instance = null;

class EventBus {
constructor() {
if (!instance) {
this.events = {};
instance = this;
}
return instance;
} $emit(event, message) {
if (!this.events[event])
return; const callbacks = this.events[event]; for (let i = 0, l = callbacks.length; i < l; i++) {
const callback = callbacks[i]; callback.call(this, message);
}
} $on(event, callback) {
if (!this.events[event])
this.events[event] = []; this.events[event].push(callback);
}
} export default new EventBus();

  

效果图

相关文档地址: https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

vue 使用高德地图vue-amap组件的更多相关文章

  1. 基于vue 2.X和高德地图的vue-amap组件获取经纬度

    今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码 ...

  2. vue调用高德地图:vue-amap

    前言:之前没有接触过页面调用地图的项目,某次面试,老板要求我用vue-amap调用高德地图,回家以后,我去网上查了一些案例和教程,看似很简单的引入调用,我却整整弄了一宿,还没弄出来!!!百般无奈之下, ...

  3. vue集成高德地图

    vue集成高德地图 前言 二.使用步骤 1.注册高德开发平台 2.vue 结尾 前言 之前玩Thymeleaf的时候玩过高德地图,现在无聊Vue项目也整个地图进去~ 二.使用步骤 1.注册高德开发平台 ...

  4. Android 编程 AMapLocationClientOption 类中的 setNeedAddress 方法用处 (高德地图 com.amap.api.location.AMapLocationClientOption 中的类)

    最近在用高德地图来写Android App, 其中有一些 方法是不太理解的,这里写一下 对  高德地图  com.amap.api.location.AMapLocationClientOption ...

  5. VUE 高德地图选取地址组件开发

    高德地图文档地址 http://lbs.amap.com/api/lightmap/guide/picker/ 结合步骤: 1.通过iframe内嵌引入高德地图组件 key就选你自己申请的key &l ...

  6. VUE 2.0 引入高德地图,自行封装组件

    1. 高德地图官网 申请帐号, 申请相应(JavaScript API)的 Key 2. 在项目中引入, 这里和其他的引入不同的是 直接在 index.html, 不是在 main.js 引入, 博主 ...

  7. vue+vant ui+高德地图的选址组件

    首先在index.html引入高德地图的js <script src="https://webapi.amap.com/maps?v=1.4.14&key=你的key" ...

  8. vue 调用高德地图

    一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. ...

  9. 前端vue使用高德地图

    首先,注册Key 1.注册开发者账号,成为高德开放平台开发者 2.登陆之后,在进入「应用管理」 页面「创建新应用」 3.为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 ...

  10. Android 编程 AMapLocationClientOption 类中的 setMockEnable (高德地图 com.amap.api.location.AMapLocationClientOption 中的类)

    setMockEnable 高德地图中 AMapLocationClientOption 中有一个方法是设置APP是否接受模拟定位的设置,就是方法 setMockEnable //设置是否允许模拟位置 ...

随机推荐

  1. linux 常用 掌握要点 详细终结

    linux 命令大全 每个开发者应该了解的 10 个 Linux 命令 1.查看正在执行的进程(Process) ps命令 Process Status 进程状态 语法: ps  [option]   ...

  2. EF Core 2.1变化

    EF Core 2.1随.NET Core 2.1一起发布,本篇文章总结一下EF Core的新增功能,先从简单的开始说. 一.延迟加载 延迟加载不用介绍了吧,直接看一下怎样配置吧.EF Core 2. ...

  3. TF-IDF概念

    之前就了解过TF-IDF,现在做一个回顾. 概念: TF(Term Frequency)词频:一个文档中关键词出现的次数/该文档的总词数, IDF(Inverse Document Frequency ...

  4. 我的阿里、腾讯暑期实习Offer经历

    三四月份对我拿来说是个忙碌的两个月,实验室项目到了关键的时刻,自己又需要抽身去找暑期实习,总之过得很快.值得欣慰的是幸运的拿到了阿里和腾讯的暑期实习offer,也算是对三四月份的忙碌一些回报吧.阿里的 ...

  5. C语言指针赋值前的指向问题

    以下代码运行会得到什么结果? #include<stdio.h> int main() { int *k;//定义一个指针变量 *k=100;#给指针变量所指的内存赋值 printf(&q ...

  6. 自动化运维工具-pdsh工具安装配置及简单使用讲解

    1.先决条件: 安装pssh工具的主机针对远程主机需要配置免秘钥认证: ssh-keygen -t rsa ssh-copy-id [remotehost] 2.下载pssh工具安装介质: https ...

  7. 一个按成绩排序SQL的写法问题

    测试数据: SQL> select * from sscore; NAME       SCORE ---------- ----- aa            99 bb            ...

  8. Srt字幕文件解析

    // // ViewController.m // 字幕解析 // // Created by admin on 2018/8/30. // Copyright © 2018年 admin. All ...

  9. Flash builder 、flash cs6、 as 3.0研究

    1.Flash/Actionscript3 载入资源文件方法考 http://zengrong.net/post/1107.htm 2.使用Flash Professional CS5和Flash B ...

  10. Appium环境配置(一)

    一:环境准备(Windows 7版本 64位系统) 1.jdk1.6.0 (64位) 2.android-sdk 3.appium 4.Node.js:node-v8.11.1 5.Appium-Py ...