vue 使用高德地图vue-amap组件过程解析
程序员文章站
2022-06-14 09:03:06
这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
首先...
这篇文章主要介绍了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();
效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 微信小程序页面滚动到指定位置代码实例
下一篇: 数据库面试时常见的26个问题