vue3和百度地图关键字检索 定位 点击定位

时间：2023-01-29 19:06:54

效果图

vue3和百度地图关键字检索 定位 点击定位

在index.html中引入

百度地图开放平台  去申请你的ak 非常的简单可以自己百度 一下

  <!-- 这个用官网给的有好多警告 更具百度的把 https://api.map.baidu.com/getscript?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxx 换为这个就没有那么多 报错了 -->
  <script
    type="text/javascript"
    src="https://api.map.baidu.com/getscript?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx" // 这个替换为你自己申请的ak 
  ></script>

 创建一个组件

<template>
  <div style="width: 100%; height: 440px;">
    <!-- 显示小地址小框框 -->
    <div class="ipt">
      <div class="address">
        {{ address }}
      </div>
      <!-- 支持模糊查询 -->
      <input type="text"  />
    </div>
    <!-- 地图 -->
    <div >
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, defineProps, ref, defineEmits } from 'vue'
// 传入的中心点 刷新页面加载的点
const props = defineProps({
  latitude: {
    type: String,
    default: () => {
      return '40.083402'
    },
  },
  longitude: {
    type: String,
    default: () => {
      return '113.368374'
    },
  }
})
// 传出地址
const emits = defineEmits(['addressData'])
// 显示地址
const address = ref('')
// 引入的地图的api
const BMap = (window as any).BMap
onMounted(() => {
  // 创建地图实例
  var map = new BMap.Map('map')
  // 这个创建地理服务的 下面是把定位转换为详细文字地址 
  var geoc = new BMap.Geocoder();
  //建立一个自动完成的对象 主要关键字查询
  var ac = new BMap.Autocomplete(
    {
      // suggestId 是输入框id 
      "input": "suggestId"
      //  这个是地图实例
      , "location": map
    });
  // 下拉列表里的内容确认发生的事件 ()
  ac.addEventListener('onconfirm', function (e: any) {
    // 把城市啥的拼接起来
    const myValue =
      e.item.value.province +
      e.item.value.city +
      e.item.value.district +
      e.item.value.street +
      e.item.value.business
    // 搜索
    // 搜索结束执行的函数
    const mySearchFun = () => {
      // 传入定位函数的经纬度 
      getAddOverlay(local.getResults().getPoi(0).point)
      // 定位中心点 
      map.centerAndZoom(local.getResults().getPoi(0).point, 15)
    }
    // 创建一个搜索的实例
    var local = new BMap.LocalSearch(map, {
      //搜索成功后的回调 
      onSearchComplete: mySearchFun,
    })
    // 传入搜索位置的关键字
    local.search(myValue)
  })

  // 下面是开始定位的
  var point = new BMap.Point(props.longitude, props.latitude) // 定位
  getAddOverlay(point)
  map.centerAndZoom(point, 5) // 中心点位 15是级别
  map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
  // 当地图点击的时候发生的事件 
  map.addEventListener('click', function (e: any) {
    // 创建标点
    getAddOverlay(new BMap.Point(e.point.lng, e.point.lat))
  })
  // 定位点的函数  
  function getAddOverlay(point: any) {
    // 清空地图上所有的标准当然你想要多个点的话可以不清除
    map.clearOverlays()
    var marker = new BMap.Marker(point);        // 创建标注    
    map.addOverlay(marker); // 添加到地图
    // 把定位转换为详细文字地址  
    geoc.getLocation(point, (rs: any) => {
      // 显示到页面上
      address.value = rs.address
    })
    // 把位置传出
    emits('addressData', point)
  }
})

</script>


<style lang="scss" >
.anchorBL {
  display: none;
}
</style>
<style lang="scss"  scoped>
.ipt {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  min-width: 300px;
  height: 25px;
  margin-bottom: 10px;

  #suggestId {
    width: 40%;
    min-width: 250px;
    padding: 5px 10px;
    outline: none;
    font-size: 13px;
    font-family: monospace;
    color: #606266;
    border-radius: 4px;
    border: 1px solid #ddd;
  }

  .address {
    position: absolute;
    width: 300px;
    height: 20px;
    font-size: 12px;
    left: 0;
    bottom: 0;
  }
}
</style>

 

在父组件引入

  <center-map @addressData="addressData" :latitude="latitude" :longitude="longitude"></center-map>

　　

相关文章