效果图
在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>