高德地图点选定位

一、申请高德地图的使用密钥key

二、安装依赖。

npm install -S vue-amap

三、使用。

import VueAMap from 'vue-amap'
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
	key: '你的key',// 高德的key
	// 插件集合
	plugin: [
		'AMap.CircleEditor',// 圆形编辑器插件
		"AMap.Geolocation", // 定位控件，用来获取和展示用户主机所在的经纬度位置
		"AMap.Geocoder", // 地理编码与逆地理编码服务，用于地址描述与坐标间的相互转换
		"AMap.Autocomplete",
		"AMap.PlaceSearch",
		"AMap.CitySearch",
	],
});
//高德的安全密钥
window._AMapSecurityConfig = {
	securityJsCode:'你的安全密钥',
}

index.html文件引入如下script

<script type="text/javascript" src="https://webapi.amap.com/maps?key="你的高德key"&v=1.4.4&plugin=AMap.Geolocation,AMap.Autocomplete,AMap.PlaceSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MapType,AMap.PolyEditor,AMap.CircleEditor,AMap.Geocoder"></script>

封装地图组件：

<template>
  <div>
    <div>
      <div style="border: 1px solid #cccccc" @dblclick="clickSelect">
        <!-- //搜索框 -->
        <el-tag type="danger">双击选取定位！</el-tag>
        <el-amap-search-box :search-option="searchOption" :on-search-result="onSearchResult" />
        <!-- 地图 -->
        <el-amap class="amap-box" :zoom="amap.zoom" :center="amap.center" :plugin="amap.plugin" :events="amap.events">
          <!-- 当前位置图标 -->
          <el-amap-marker v-for="(marker, index) in amap.markers" :key="'marker' + index" :position="marker.position == [] ? amap.center : marker.position" />
          <!-- 位置名称显示 -->
          <el-amap-text v-for="(marker, index) in amap.markers" :key="'text' + index" :text="marker.text" :offset="marker.offset" :position="marker.position" />
        </el-amap>
      </div>
    </div>
  </div>
</template>
<script>
import { log } from 'console'
  //初始数据
  function getFormData() {
    return {
      lat: '39.909186',
      lon: '116.39746',
      orgAddr: '天安门',
      province: '',
      city: '',
      district: '',
    }
  }

  export default {
    name: 'Map',
    props: {
      formIn: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      const vm = this
      return {
        // form对象
        dataForm: getFormData(),
        // 地图搜索对象
        searchOption: {
          city: '全国',
          citylimit: false,
        },
        lng: 0,
        lat: 0,
        // 地图对象
        amap: {
          zoom: 16,
          center: [],
          events: {
            // 点击获取地址的数据
            click(e) {
              const { lng, lat } = e.lnglat
              vm.dataForm.lon = lng
              vm.dataForm.lat = lat
              // 这里通过高德 SDK 完成。
              var geocoder = new AMap.Geocoder({
                radius: 100,
                extensions: 'all',
              })
              geocoder.getAddress([lng, lat], function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                  if (result && result.regeocode) {
                    console.log('点击获取地址的数据', result)
                    vm.dataForm.orgAddr = result.regeocode.formattedAddress
                    vm.dataForm.province = result.regeocode.addressComponent.province
                    vm.dataForm.city = result.regeocode.addressComponent.city
                    vm.dataForm.district = result.regeocode.addressComponent.district
                    vm.dataForm.lat = lat ? lat.toString() : ''
                    vm.dataForm.lon = lng ? lng.toString() : ''
                    vm.amap.markers = []
                    const obj = {
                      position: [lng, lat],
                      text: result.regeocode.formattedAddress,
                      offset: [0, 30],
                    }
                    vm.amap.markers.push(obj)
                    console.log('niaiwo')
                    vm.sure()
                  }
                }
              })
              vm.$nextTick(() => {})
            },
          },

          plugin: [
            {
              // 定位
              pName: 'Geolocation',
              events: {
                init(o) {
                  // o是高德地图定位插件实例
                  o.getCurrentPosition((status, result) => {
                    console.log('定位：', result)
                    if (result && result.position) {
                      // 设置经度
                      vm.lng = result.position.lng
                      // 设置维度
                      vm.lat = result.position.lat
                      // 设置坐标
                      vm.amap.center = [vm.lng, vm.lat]
                      let op = {
                        position: [vm.lng, vm.lat],
                        text: result.formattedAddress,
                        offset: [0, 30],
                      }
                      vm.amap.markers.push(op)
                      // 页面渲染好后
                      vm.$nextTick(() => {})
                    }
                  })
                },
              },
            },
          ],
          //
          markers: [],
        },
      }
    },
    created() {
      if (this.formIn.lat) {
        console.log('gfs')
        this.$nextTick(() => {
          this.amap.center[1] = this.formIn.lat + ''
          this.amap.center[0] = this.formIn.lng + ''
        })
        if (this.amap.markers.length == 0) {
          let op = {
            position: [this.formIn.lng + '', this.formIn.lat + ''],
            // text: result.formattedAddress,
            offset: [0, 30],
          }
          this.amap.markers.push(op)
        }
      } else {
        console.log('ds')
        this.amap.center[0] = '116.39746'
        this.amap.center[1] = '39.909186'
        if (this.amap.markers.length == 0) {
          let op = {
            position: this.amap.center,
            // text: result.formattedAddress,
            offset: [0, 30],
          }
          this.amap.markers.push(op)
        }
      }
    },
    methods: {
      // 地图搜索回调
      onSearchResult(pois) {
        console.log(pois,"0123");
        const vm = this
        vm.amap.markers = []
        let latSum = 0
        let lngSum = 0
        console.log('地图回调', pois)
        if (pois.length > 0) {
          pois.forEach((poi, index) => {
            const { lng, lat } = poi
            if (index === 0) {
              lngSum = lng
              latSum = lat
              const obj = {
                position: [poi.lng, poi.lat],
                text: poi.name,
                offset: [0, 30],
              }
              vm.amap.markers.push(obj)
              console.log('地图搜索回调', poi)
              vm.dataForm.orgAddr = poi.name
              vm.dataForm.lat = poi.lat ? poi.lat.toString() : ''
              vm.dataForm.lon = poi.lng ? poi.lng.toString() : ''
            }
          })
          vm.amap.center = [lngSum, latSum]
        }
      },
      // 提交方法
      sure() {
        const vm = this
        this.$emit('updateLocation', vm.dataForm)
        console.log(this.formIn, 78787)
      },
      // 双击点选定位
      clickSelect() {
        this.$parent.clickSelect(this.dataForm)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .amap-box {
    height: 44vh;
    height: calc(100vh - 45px);
  }

  .el-vue-search-box-container {
    // top: 45px;
    width: 100% !important;
  }

  .search-box {
    position: absolute;
    z-index: 5;
    width: 70%;
    left: 13%;
    top: 10px;
    height: 30px;
  }

  .search-box .el-input {
    float: left;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 0 7px 7px 0;
    outline: none;
    position: relative;
  }

  .search-box .el-button {
    position: absolute;
    right: 0;
    top: 1px;
    width: 20%;
    background: #38a28a;
    border-radius: 0 7px 7px 0;
    border: none;
    color: #fff;
    outline: none;
  }

  .tip-box {
    text-align: center;
    width: 100%;
    position: absolute;
    top: 35px;
    padding: 10px 0;
    background-color: #fff;
    opacity: 0.8;
  }
  ::v-deep *{
    transition: unset !important;
  }
  ::v-deep .el-tag{
    position: absolute;
    left: 30%;
    margin-top: 10px;
    z-index: 99;
    font-size: 16px;
  }
</style>

使用组件：

<template>
<div>
    <Map ref="map" @updateLocation="updateLocation" />
</div>
</template>
 
<script>
import Map from '@/地图组件路径'
export default {
    name: '',
    props: {
    },
    components: {
        Map
    },
    data () {
        return {
 
        }
    },
    mounted() {
 
    },
    methods: {
        updateLocation(Addr) {
            console.log('位置信息：',Addr)
        }
    },
}
</script>
 
<style scoped lang='scss'>
 
</style>