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" id="suggestId" placeholder="搜索地名" />

    </div>

    <!-- 地图 -->

    <div id="map" :style="{ width: '100%', height: 400 + 'px' }">

    </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>