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 = true
        this.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 = visible
        this.loading = false
        this.$nextTick(()=>{
          // console.log(this.list,'9999')
          this.$refs['input'].keyword = this.searchName
          this.markers.push(this.list)
          this.mapCenter = this.list
        })
      },
      /**
       * 处理新建
       */
      handleCreate(title,list,searchName) {
        this.title = title
        this.list = list
        this.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>