vue 使用高德地图vue-amap组件
首先 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组件的更多相关文章
- 基于vue 2.X和高德地图的vue-amap组件获取经纬度
今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码 ...
- vue调用高德地图:vue-amap
前言:之前没有接触过页面调用地图的项目,某次面试,老板要求我用vue-amap调用高德地图,回家以后,我去网上查了一些案例和教程,看似很简单的引入调用,我却整整弄了一宿,还没弄出来!!!百般无奈之下, ...
- vue集成高德地图
vue集成高德地图 前言 二.使用步骤 1.注册高德开发平台 2.vue 结尾 前言 之前玩Thymeleaf的时候玩过高德地图,现在无聊Vue项目也整个地图进去~ 二.使用步骤 1.注册高德开发平台 ...
- Android 编程 AMapLocationClientOption 类中的 setNeedAddress 方法用处 (高德地图 com.amap.api.location.AMapLocationClientOption 中的类)
最近在用高德地图来写Android App, 其中有一些 方法是不太理解的,这里写一下 对 高德地图 com.amap.api.location.AMapLocationClientOption ...
- VUE 高德地图选取地址组件开发
高德地图文档地址 http://lbs.amap.com/api/lightmap/guide/picker/ 结合步骤: 1.通过iframe内嵌引入高德地图组件 key就选你自己申请的key &l ...
- VUE 2.0 引入高德地图,自行封装组件
1. 高德地图官网 申请帐号, 申请相应(JavaScript API)的 Key 2. 在项目中引入, 这里和其他的引入不同的是 直接在 index.html, 不是在 main.js 引入, 博主 ...
- vue+vant ui+高德地图的选址组件
首先在index.html引入高德地图的js <script src="https://webapi.amap.com/maps?v=1.4.14&key=你的key" ...
- vue 调用高德地图
一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. ...
- 前端vue使用高德地图
首先,注册Key 1.注册开发者账号,成为高德开放平台开发者 2.登陆之后,在进入「应用管理」 页面「创建新应用」 3.为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 ...
- Android 编程 AMapLocationClientOption 类中的 setMockEnable (高德地图 com.amap.api.location.AMapLocationClientOption 中的类)
setMockEnable 高德地图中 AMapLocationClientOption 中有一个方法是设置APP是否接受模拟定位的设置,就是方法 setMockEnable //设置是否允许模拟位置 ...
随机推荐
- Mysql 全文搜索 Match Against用法
全文检索在 MySQL 中就是一个 FULLTEXT 类型索引.FULLTEXT 索引用于 MyISAM 表,可以在 CREATE TABLE 时或之后使用 ALTER TABLE 或 CREATE ...
- iTerm2中粘贴tab问题
点过Remember 后,这个窗口就再也不弹出来了.可随后想修改配置,在preferences中又没有找到. 解决方案: 思路:/Users/${name}/Library/Preferences/c ...
- 网络通信协议六之IP地址和MAC地址特征分析
逻辑地址和物理地址 >>逻辑地址:工作在网络层,也叫IP地址,①具有全局唯一性②用软件实现③32位 10.1.0.6 -——>00001010.00000001.00000000.0 ...
- Caused by: java.sql.BatchUpdateException
Caused by: java.sql.BatchUpdateException: Table (%s) has been dropped, altered or renamed.解决方法重启项目
- 关于html中input组件间空隙的去除
有空隙的时候的代码是这样的: <input type="text" name="search" title="请输入要搜索的内容" s ...
- c# 串口关闭死机
用C#编写的wince串口通信程序基本大功告成了,与之前用API函数和线程来做串口通信不同,这次直接使用SerialPort控件来做,原本以为使用控件做会简单和方便许多,没成想,还遇到了很多麻烦. 通 ...
- Codeforces 1132D - Stressful Training - [二分+贪心+优先队列]
题目链接:https://codeforces.com/contest/1132/problem/D 题意: 有 $n$ 个学生,他们的电脑有初始电量 $a[1 \sim n]$,他们的电脑每分钟会耗 ...
- SQLServer 索引重建
SQL Server 索引重建脚本 在数据的使用过程中,由于索引page碎片过多,带来一些不利的性能问题,我们有时候需要对数据库中的索引进行重组或者重建工作.通常这个阈值为30%,大于30%我们建议进 ...
- Transfrom笔记
1.在不是以左上角为缩放点进行缩放时,其实比例不能为0,因为0将导致缩放可能出现动画效果不可控,务必选取0.1等较小值来变化
- [troubleshoot][archliunx][chromium][flash] chrome提示flash不是最新
最近chrome总是在提示flash不是最新要求更新. 原来以前用的flash包 chromium-pepper-flash 不见了,改名变成了pepper-flash. /home/tong [to ...