在vue中使用高德地图点击打点，搜索打点，高德地图组件封装

最新推荐文章于 2024-06-12 14:23:36 发布

葫芦娃y

最新推荐文章于 2024-06-12 14:23:36 发布

阅读量788

点赞数 7

分类专栏：地图前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43857653/article/details/135551568

版权

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

地图

11 篇文章 0 订阅

订阅专栏

一。安装高德地图

npm install @amap/amap-jsapi-loader --save

二、在index.html文件中引入高德地图JavaScript API：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 2 AMap Demo</title>
  <script src="https://webapi.amap.com/maps?v=2.0&key=你的key"></script>
</head>
<body>
  <div id="app"></div>
  <script src="/dist/build.js"></script>
</body>
</html>`在这里插入代码片`

三、创建Vue组件，AMapMarker.vue

<template>
  <div class="map-wrap" :style="{ width: width, height: height }">
    <el-form
      :model="formData"
      :rules="rules"
      :disabled="disabled"
      class="mapFormData"
      ref="mapFormData"
    >
      <el-form-item label="关键词" prop="address" label-width="80px">
        <el-input
          v-model="formData.address"
          id="tipinput"
          placeholder="请输入关键词"
          clearable
        ></el-input>
      </el-form-item>
    </el-form>
    <div id="container" class="container map"></div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  props: {
    //地图宽度
    width: {
      type: String,
      default: '100%',
    },
    //地图高度
    height: {
      type: String,
      default: '500px',
    },
    /**
     * 默认显示的地图对象信息
     * 地址 经度 纬度
     *  { address: '', lat: '',lng: '',}
     */
    defaultMapData: {
      type: Object,
      default: () => new Object(),
    },

    //禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      mapInfo: null,
      marker: null,
      searchValue: '',
      formData: {
        address: '',
        lat: '',
        lng: '',
      },
      rules: {},
    }
  },

  watch: {
    defaultMapData: {//默认地图显示的点位
      handler(newV) {
        if ((newV && JSON.stringify != '{}') || newV.lat) {
          this.formData = {...newV} //
          this.initMap()
        } else {
          this.formData = {
            address: '',
            lat: '',
            lng: '',
          }
        }
      },
      deep: true,
      immediate: true,
    },
    disabled: { //地图是否禁用打点
      handler(newV) {
        if (newV) {
          this.setMapEvent(true)
        } else {
          this.setMapEvent(false)
        }
      },
      immediate: true,
    },
  },
  methods: {
    initMap() {
     
      AMapLoader.load({
        key: '你的key',
        version: '2.0',
        plugins: ['AMap.Geocoder', 'AMap.Geolocation', 'AMap.CitySearch'],
        resizeEnable: true,
      })
        .then((AMap) => {
          this.mapInfo = new AMap.Map('container', {
            resizeEnable: true,
            zoom: 16,//缩放等级
            center:[116.397428, 39.90923],//中心点
          })

          if (this.defaultMapData.lat && this.defaultMapData.lng) {//父组件传过来的点 默认点位打点
            this.marker && this.mapInfo.remove(this.marker)
            this.marker = new AMap.Marker({
              position: new AMap.LngLat(this.defaultMapData.lng, this.defaultMapData.lat),
            })
            this.mapInfo.add(this.marker)
            this.setMapCenter(this.defaultMapData.lng, this.defaultMapData.lat)
          }

          const autoOptions = {
            input: 'tipinput',
          }
          AMap.plugin(['AMap.AutoComplete'], () => { //搜索
            const auto = new AMap.AutoComplete(autoOptions)
            auto.on('select', this.adrSelect) //
          })

          this.setMapEvent(this.disabled)
        })
        .catch((e) => {
          //加载错误提示
        })
    },
    setMapCenter(lng, lat) { 
      this.mapInfo.setZoomAndCenter(16, [lng, lat])
    },
    adrSelect(e) {//搜索
      this.setMapCenter(e.poi.location.lng, e.poi.location.lat)
      this.marker && this.mapInfo.remove(this.marker)
      this.marker = new AMap.Marker({
        position: new AMap.LngLat(e.poi.location.lng, e.poi.location.lat),
      })
      this.setFormData( e.poi.location.lng, e.poi.location.lat,e.poi.name)
      this.emitMapData(e.poi.name, e.poi.location.lng, e.poi.location.lat)
      this.mapInfo.add(this.marker)
    },
    addMarker(e) {//添加点位
      this.marker && this.mapInfo.remove(this.marker)
      this.marker = new AMap.Marker({
        position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat),
      })

      this.setFormData(e.lnglat.lng, e.lnglat.lat, this.formData.address)
      this.emitMapData(this.formData.address, e.lnglat.lng, e.lnglat.lat)

      this.mapInfo.add(this.marker)

      const geocoder = new AMap.Geocoder({
        radius: 1000,
        extensions: 'all',
      })

      geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], (status, result) => {//转换地址
        if (status === 'complete' && result.regeocode) {
          this.$set(this.formData, 'address', result.regeocode.formattedAddress)
        } else {
        }
      })
      this.setMapCenter(e.lnglat.lng, e.lnglat.lat)
    },
    setFormData(lng, lat, address) {
      this.$set(this.formData, 'address', address)
      this.$set(this.formData, 'lng', lng)
      this.$set(this.formData, 'lat', lat)
    },
    emitMapData(address = this.formData.address, lng = this.formData.lng, lat = this.formData.lat) {  //将已选择的点传给父组件
      this.$emit('getMapData', {
        address,
        lng,
        lat,
      })
    },
    setMapEvent(flg) {
      this.$nextTick(() => {
        if (flg) {
          this.mapInfo && this.mapInfo.off('click', this.addMarker)
        } else {
          this.mapInfo && this.mapInfo.on('click', this.addMarker)
        }
      })
    },
  },
  destroyed() {},
}
</script>

<style lang="less" scoped>
.map-wrap {
  width: 100%;
  height: 500px;
  position: relative;
  .mapFormData {
    position: absolute;
    width: 100%;
    top: 18px;
    left: 0;
    z-index: 99;
    ::v-deep .el-input__inner {
      width: 70%;
    }
  }
  .map {
    width: 100%;
    height: 100%;
  }
  .row {
    margin-top: 10px;
    display: flex;
  }
  .mr20 {
    margin-right: 20px;
  }
}
</style>

四、在需要使用组件的地方引入并使用AMapMarker组件

<template>
  <div :style='width:500px;height:500px;'>
    <AMapMarker @getMapData='getMapData' :defaultMapData='defaultMapData' />
  </div>
</template>

<script>
import AMapMarker from './AMapMarker.vue';

export default {
  components: {
    AMapMarker 
  },
  data(){
  	return {
  		defaultMapData:{},//默认点位信息为空
	}
  },
  methods:{
  getMapData(mapInfo){
  console.log('获取到的地图地址经纬度信息：',mapInfo)
  }
}
};
</script>