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

效果图

在index.html中引入

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

?

1 2 3 4 5

<!-- 这个用官网给的有好多警告 更具百度的把 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>

 创建一个组件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144

<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, true)     }     // 创建一个搜索的实例     var local = new BMap.LocalSearch(map, {       //搜索成功后的回调       onSearchComplete: mySearchFun,     })     // 传入搜索位置的关键字     local.search(myValue)   })     // 下面是开始定位的   var point = new BMap.Point(props.longitude, props.latitude) // 定位   getAddOverlay(point, true)   map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放   // 当地图点击的时候发生的事件   map.addEventListener('click', function (e: any) {     // 创建标点     getAddOverlay(new BMap.Point(e.point.lng, e.point.lat))   })   // 定位点的函数    function getAddOverlay(point: any, centerAndZoom: boolean = false) {     // 清空地图上所有的标准当然你想要多个点的话可以不清除     map.clearOverlays()     var marker = new BMap.Marker(point);        // 创建标注        map.addOverlay(marker); // 添加到地图       centerAndZoom && map.centerAndZoom(point, 15) // 中心点位 15是级别       // 把定位转换为详细文字地址      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>

　　

在父组件引入

?

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