vue 中使用高德地图（原生方法）可搜索定位

最新推荐文章于 2024-07-23 15:55:45 发布

迷失过日光

最新推荐文章于 2024-07-23 15:55:45 发布

阅读量1k

点赞数

分类专栏：高德地图文章标签： vue

本文链接：https://blog.csdn.net/weixin_39325930/article/details/118031486

版权

高德地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求：表单中的经纬度和位置需要通过高德地图定位点进行拾取，并且地图可以进行搜索，搜素出来的定位点也可进行点击获取位置

<template lang="html">
<Modal v-model="visible" title="位置定位" width="800px" :mask-closable="false" @on-cancel="closeModal">
  <div class="container">
    <div class="search-box">
      <input id="tipInput" placeholder="输入关键字搜索"/>
    </div>
    <div style="height:400px" id="container" tabindex="0"></div>
    <div class="toolbar">地址: {{ address }}</div>
  </div>
  <div slot="footer" class="dialog-footer">
    <Button type="primary" @click="onSave">确定</Button>
    <Button style="margin-left: 8px" @click="closeModal">取消</Button>
  </div>
</Modal>
</template>

<script>
export default {
  name: 'MyMap',
  props: {
    // 控制model显示隐藏
    isShow: {
      type: Boolean,
      default: true
    },
    location: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    let self = this
    return {
      map: null,
      visible: this.isShow,
      address: '',
      lng: 108.88671,
      lat: 34.22344
    }
  },
  watch: {
    isShow(n, o) {
      if (n && o) {
        this.visible = n;
      }
    }
  },
  mounted() {
    this.init()
    this.mapSearchInit()
  },
  methods: {
    closeModal() {
      this.visible = false;
      this.$emit('showModel', this.visible);
    },
    //地图初始化
    init() {
      let that = this
      that.address = that.location.address;
      let map = new AMap.Map('container', {
        resizeEnable: true,
        center: [that.location.lng, that.location.lat],
        zoom: 16,
        lang: 'zh'
      })
      that.map = map;
      AMap.plugin(['AMap.Geocoder'], () => {
        let geocoder = new AMap.Geocoder({
          radius: 1000
        })
        let marker = new AMap.Marker({
          position: [that.location.lng, that.location.lat],
          offset: new AMap.Pixel(-13, -30),
          icon: new AMap.Icon({
            image: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            size: new AMap.Size(28, 35), //图标大小
            imageSize: new AMap.Size(28, 35)
          }),
        })
        marker.setMap(map);
        // 绑定事件
        map.on('click', function (ev) {
          console.log('ev', ev)
          regeoCode([ev.lnglat.lng, ev.lnglat.lat])
          that.lng = ev.lnglat.lng.toString()
          that.lat = ev.lnglat.lat.toString()
        })

        function regeoCode(lnglat) {
          map.add(marker)
          marker.setPosition(lnglat)
          geocoder.getAddress(lnglat, function (status, result) {
            if (status === 'complete' && result.regeocode) {
              that.address = result.regeocode.formattedAddress
              console.log('address', that.address);

            } else {
              console.log('位置获取失败')
            }
          })
        }
      })

      AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.Geocoder', 'AMap.Geolocation'], () => {
        map.addControl(new AMap.Scale())
      })
      window.modalMap = map
    },
    mapSearchInit() {
      let that = this;
      var autoOptions = {
        input: "tipInput"
      };
      var auto = new AMap.Autocomplete(autoOptions);
      console.log('auto', auto)
      var placeSearch = new AMap.PlaceSearch({
        map: that.map
      });  //构造地点查询类
      AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
      AMap.event.addListener(placeSearch, 'markerClick', function(e) {
        console.log('eeee', e)
        that.address = e.data.address;
        that.lng = e.data.location.lng
        that.lat = e.data.location.lat
        // that.$emit('saveModel', e.data.location.lng, e.data.location.lat, e.data.address);
      })
      function select(e) {
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name);  //关键字查询查询
      }
    },
    onSave() {
      this.$emit('saveModel', this.lng, this.lat, this.address);
    }
  }
}
</script>

<style lang="css">
.container {
  width: 100%;
  height: 500px;
}

.search-box {
  z-index: 5;
  width: 100%;
  height: 30px;
  margin-bottom: 20px;
}

.search-box input {
  float: left;
  width: 80%;
  height: 100%;
  border: 1px solid #30ccc1;
  padding: 0 8px;
  outline: none;
}

.search-box button {
  float: left;
  width: 20%;
  height: 100%;
  background: #30ccc1;
  border: 1px solid #30ccc1;
  color: #fff;
  outline: none;
}

.toolbar {
  margin-top: 20px;
}
.amap-sug-result { z-index: 9999; }
</style>