本文主要是介绍Vue-amp基于高德地图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、安装相关依赖
npm install vue-amp --save
二、在main.js文件中引用
然后在main.js入口文件中引入高德地图,分发出去,让每个组件都可以使用,
import AMap from 'vue-amap'
Vue.use(AMap)
初始化地图
AMap.initAMapApiLoader({
// 高德的key
key: 'a33ac630e30cd71cf228e2f465e8a96b',
// 插件集合
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
v: '1.4.4'
});
三、vue-amap | 基于 Vue 2.x 与高德的地图组件
官方网址:组件 | vue-amap
四、某一页面引入地图组件
import mapAdd from './mapAdd.vue'//高德地图
map-add ref="mapEdit" @obtain="position" :index="index">map-add>
五、地图为单独一个组件
<template><div><el-dialog :title="title" :visible.sync="editFormVisible" :modal-append-to-body="false" @close="close" ><div id="dialog_content" style="height: 360px;overflow-y: scroll" v-loading="loading"><div class="amap-page-container"><el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" ref="input"></el-amap-search-box><el-amap vid="amapDemo" :center="mapCenter" :zoom="12" class="amap-demo"><el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker" :draggable="true" :events="marker.events" :visible="marker.visible"></el-amap-marker></el-amap></div></div><div slot="footer" class="dialog-footer"><dj-button-save @click="handleSave"/><dj-button-cancel @click="editFormVisible=false"/></div></el-dialog></div>
</template><script>export default {props:['index'],data(){return{editFormVisible:false,loading:false,title:'',ruleForm:{name:''},list:'',//传过来的坐标值searchName:'',//传过来的搜索值markers: [],searchOption: {city: '济南',citylimit: false},mapCenter: [117.11946,36.654395]}},created(){},methods:{onSearchResult(pois) {let latSum = 0;let lngSum = 0;this.markers = []if (pois.length > 0) {this.markers.push([pois[0].lng, pois[0].lat]);pois.forEach(poi => {let {lng, lat} = poi;lngSum += lng;latSum += lat;});let center = {lng: lngSum / pois.length,lat: latSum / pois.length};this.mapCenter = [center.lng, center.lat];}console.log(this.markers,'marke')},close(){this.loading = truethis.markers = []this.ruleForm.name = ''this.$refs['input'].keyword = ''},handleSave(){const position = this.markers[0][0]+'/'+this.markers[0][1];const site = this.$refs['input'].keyword;console.log(site)this.$emit('obtain',position,this.index,site)this.$nextTick(()=>{this.editFormVisible = false})},show(visible = true) {this.editFormVisible = visiblethis.loading = falsethis.$nextTick(()=>{// console.log(this.list,'9999')this.$refs['input'].keyword = this.searchNamethis.markers.push(this.list)this.mapCenter = this.list})},/*** 处理新建*/handleCreate(title,list,searchName) {this.title = titlethis.list = listthis.searchName = searchName// 显示弹框this.show()},}}
</script><style scoped>
#container{width: 96%;margin-left: 2%;height: 350px;position: absolute;top: 150px;
}
.amap-demo {height: 350px;
}.search-box {position: absolute;top: 25px;left: 20px;
}.amap-page-container {position: relative;
}
</style>这篇关于Vue-amp基于高德地图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
