vue-map高德地图(2)输入地名或点击地图获取位置经纬度和地名(组件封装)

4 篇文章 1 订阅
2 篇文章 0 订阅
本文介绍如何在Vue.js应用中封装高德地图组件,实现通过输入地名模糊搜索或直接点击地图获取位置的经纬度和地名功能。用户可以使用该组件在模态窗中搜索或选择地点,然后关闭模态窗并将位置信息传递给父组件。
摘要由CSDN通过智能技术生成

使用:

点击按钮打开模态窗:

输入位置(支持模糊搜索)进行搜索,或者点击地图上的某处,进行位置获取。点击确定关闭模态窗,获取位置信息

上代码了~~~

父组件中使用

<template>
<div>
  <a class="get-position" @click="getLocationFlag=true">
    <el-icon class="el-icon-position" />
    获取位置
  </a>
 <get-location
   :get-position-flag="getLocationFlag"
   @close="closePosition"
   @getLocation="getLocation"
  />
</div>
</template>
import getLocation from "../../components/getLocation";
export default{
 components:{
   getLocation   //子组件
 },
 data:{
    return(){
      getLocationFlag: false, //子组件弹窗显示或隐藏
    }
 },
 methods:{
    //todo 这个方法是获取子组件传给父组件中的位置信息 经纬度和位置名称
   getLocation(data) {
      (this.addForm.placeTude = data.location.lat),
        (this.addForm.placeLong = data.location.lng),
        (this.addForm.placeAddr = data.name);
      this.$forceUpdate();
    },
    //todo 关闭子组件方法
   closePosition() {
      this.getLocationFlag = false;
    },
 }
}

获取地理位置的子组件封装

<template>
<el-dialog
  title="获取位置信息"
  :visible.sync="getPositionFlag"
  width="30%"
  :before-close="handleClose">
  <div
    class="amap-page-container"
    style="width: 80%; position: relative; height: 500px; margin: 30px 10%"
  >
    <el-amap-search-box
      class="search-box"
      :search-option="searchOption"
      :on-search-result="onSearchResult"
    ></el-amap-search-box>
    <el-amap
      ref="map"
      vid="amapDemo"
      :amap-manager="amapManager"
      :center="center"
      :zoom="zoom"
      :plugin="plugin"
      :events="events"
      class="amap-demo"
    >
    </el-amap>
    <div style="display:flex;justify-content:space-between;">
    <div>
    <p>{{ address }}</p>
    <p>{{ center }}</p>
    </div>
    <el-button type='success' size='mini' @click="handleClose" style="height:40px;margin-top:20px">确定</el-button>
    </div>
  </div>

</el-dialog>
</template>
<script>
import { AMapManager } from "vue-amap";

let amapManager = new AMapManager();
export default {
  name:'getPosition',
// 接收父组件传过来的信息
  props:{
    getPositionFlag:{
      type:Boolean,
      default:false
    }
  },
    data() {
    const self = this;
    return {
      locationMsg:{},
      searchOption: {
        // city: "北京", //搜索范围
        // citylimit: true, //限制搜索范围
        city: "",
        citylimit: false, // 不限制搜索范围搜索,比如想全国搜索
      },
      lng: "",
      lat: "",
      address: "",
      marker: "",
      amapManager,
      zoom: 12,
      center: [121.59996, 31.197646],
      events: {
        init: (o) => {
          o.getCity((result) => {
            let par = document.getElementsByClassName("search-box-wrapper")[0];
            par.firstChild.setAttribute(
              "placeholder",
              "您可以在这里输入要搜索的地址"
            );
            //todo 定位到搜索位置
            this.searchOption.city = result.city;
          });
        },
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          self.lng = e.lnglat.lng;
          self.lat = e.lnglat.lat;
          self.center = [self.lng, self.lat];
          let o = amapManager.getMap();
          if (!self.marker) {
            self.marker = new AMap.Marker({
              position: e.lnglat,
            });
            self.marker.setMap(o);
          }
          self.marker.setPosition(e.lnglat);
          let geocoder = new AMap.Geocoder({});
          geocoder.getAddress(e.lnglat, function (status, result) {
            if (status === "complete" && result.regeocode) {
              self.address = result.regeocode.formattedAddress;
            } else {
              console.log.error("根据经纬度查询地址失败");
            }
          });
        },
      },
      plugin: [
        "ToolBar",
        {
          pName: "MapType",
          defaultType: 0,
          events: {
            init(o) {
            },
          },
        },
        {
          pName: "Geolocation",
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                // console.log(JSON.stringify(result));
                if (result && result.position) {
                  self.lng = result.position.lng;
                  self.lat = result.position.lat;
                  self.address = result.formattedAddress;
                  self.center = [self.lng, self.lat];
                  //   console.log(self.center, 99666);
                  let o = amapManager.getMap();
                  if (!self.marker) {
                    self.marker = new AMap.Marker({
                      position: self.center,
                    });
                    self.marker.setMap(o);
                  }
                  self.marker.setPosition(self.center);
                }
              });
            },
          },
        },
      ],
    };
  },
  methods: {
      handleClose() {
        console.log(this.center,this.address)
        this.locationMsg.name=this.address
        this.locationMsg.location={
          lng:this.center[0],
          lat:this.center[1]
        }
        // console.log(this.locationMsg,'bbbbbbbb')
        this.$emit('getLocation',this.locationMsg)
        this.$emit('close')
      },
    onSearchResult(pois) {
      if (pois.length > 0) {
        let { lng, lat, name, location,address } = pois[0];
        //?显示
        this.address=address+name
        this.center=location
        this.locationMsg.name=address+name
        this.locationMsg.location=location
        let center = [lng, lat];
        this.lng = lng;
        this.lat = lat;
        this.center = [lng, lat];
        let o = amapManager.getMap();
        if (!this.marker) {
          this.marker = new AMap.Marker({
            position: center,
          });
          this.marker.setMap(o);
        }
        this.marker.setPosition(center);
      }
    },
  },
};
</script>
<style scoped>
::v-deep .el-dialog{
  width: 60% !important;
}
.amap-page-container{
 margin: 0 100px 100px 100px !important; 
}
.search-box {
  position: absolute;
  top: 25px;
  right: 120px;
}
.amap-page-container {
  position: relative;
}
</style>

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

liuwenjie_

感谢打赏,问题留言~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值