需求描述：
在vue项目中，有时候，我们需要自定义百度地图的一些功能。譬如，现在的需求，就是需要自定义搜索内容和结果展示。
类似如下页面的功能：
首先在vue项目中，我们可以使用vue-baidu-map插件来替代直接引入百度地图js sdk。
npm install --save vue-baidu-map
vue-baidu-map的具体使用文档参考官方文档：
https://dafrok.github.io/vue-baidu-map/#/zh/start/installation
解决方案一： 利益vue-baidu-map的BmAutoComplete自动填充 功能。(很垃圾，不推荐)
我们可以实现类似的效果。但是，非常的不好用，也不建议，有z-index的问题，结果也不能自定义。
不过也贴一段参考代码：
<template><div><el-form ref="form" label-width="136px"><div class="mg-b16"><baidu-map class="bm-view" ak="你的百度ak" :center="mapCenter" :zoom="mapZoom" :scroll-wheel-zoom="true" @ready="handlerBMap"> </baidu-map></div><el-form-item label="详细地址：" prop="projectId" class="mg-b16 autocomplete-wrapper"><el-input v-model="mapLocation.address" type="text" :sugStyle="sugStyle" ref="suggestInput" style="width: 400px; "></el-input></el-form-item><el-form-item label="详细坐标：" prop="projectId" class="mg-b0"><el-input v-model="mapLocation.str" type="text" :readonly="true" style="width: 400px"></el-input></el-form-item></el-form><div class="a-r"><el-button @click="flag = false">取消</el-button><el-button type="primary" @click="confirmFn">确定</el-button></div></div></template><script>import BaiduMap from 'vue-baidu-map/components/map/Map.vue'let selfexport default {name: 'mapLabel',props: ['mapObj'],data() {return {flag: false,mapZoom: 15,sugStyle: {zIndex: 999},mapCenter: {lng: 0, lat: 0 },mapLocation: {index: 0,address: '',str: '',city: '',point: {lng: 0,lat: 0}}}},watch: {mapObj: {deep: true,handler(val) {this.mapLocation.index = val.indexthis.mapLocation.address = val.fullAddrthis.mapLocation.city = val.cityNamethis.mapLocation.point.lng = val.longitudethis.mapLocation.point.lat = val.latitudeif (val.latitude && val.latitude) {this.mapLocation.str = 'E' + val.longitude + ' N' + val.latitude}}}},components: {BaiduMap },created() {self = this},methods: {handlerBMap({BMap, map }) {this.map = mapthis.input = this.$refs.suggestInput.$el.querySelector('input')this.ac = new BMap.Autocomplete({input: this.input,location: this.map,onSearchComplete: () => {// 手动添加z-indedconst $sugs = document.querySelectorAll('.tangram-suggestion-main')for (const $sug of $sugs) {for (const name in this.sugStyle) {$sug.style[name] = this.sugStyle[name].toString()}}}})//手动设置input值self.mapLocation.address && this.ac.setInputValue(self.mapLocation.address)this.ac.addEventListener('onconfirm', function(e) {//鼠标点击下拉列表后的事件var _value = e.item.valueself.mapLocation.address = _value.province + _value.city + _value.district + _value.street + _value.businessmap.clearOverlays() //清除地图上所有覆盖物function myFun() {if (local.getResults().getPoi(0)) {var pp = local.getResults().getPoi(0).point //获取第一个智能搜索的结果var str = 'E' + pp.lng + ' N' + pp.latself.mapLocation.str = strself.mapLocation.point = ppmap.centerAndZoom(pp, 15)map.addOverlay(new BMap.Marker(pp)) //添加标注} else {self.mapLocation.point = {}}}var local = new BMap.LocalSearch(map, {//智能搜索onSearchComplete: myFun})local.search(self.mapLocation.address)})if (self.mapLocation.point && self.mapLocation.point.lng) {this.mapCenter.lng = this.mapLocation.point.lngthis.mapCenter.lat = this.mapLocation.point.latthis.mapZoom = 15map.addOverlay(new BMap.Marker(this.mapLocation.point))} else if (this.mapLocation.city) {this.map.centerAndZoom(this.mapLocation.city, 11)} else {this.map.centerAndZoom('深圳', 11)}},show() {this.flag = true},hide() {this.flag = false},confirmFn() {var obj = this.mapLocationif (!obj.point.lng) {this.$message.error('请先标注经纬度')return false}this.$emit('mapCallback', obj)this.hide()}}}</script><style lang="scss">.bm-view {width: 100%;height: 300px;}</style>
解决方案二：利用vue-baidu-map的BmLocalSearch组件实现 (推荐)
最后实现的效果如下：
代码如下：
<!--* @Description: 地图标记* @Autor: bolingsun* @Date: -02-23 13:38:59--><template><div class="map-maker-wrapper"><Header title="选择地址"><template v-slot:right><div class="btn-confrim" @click="handleSubmit">确定</div></template></Header><baidu-mapclass="bm-view"ak="你的百度ak":center="mapCenter":zoom="mapZoom":scroll-wheel-zoom="true"@ready="onReady"><bm-local-search:keyword="keyword"@searchcomplete="onSearchComplete":auto-viewport="true":panel="false"></bm-local-search></baidu-map><div class="search-wrap"><div class="search"><img class="search-img" src="@/assets/images/icon_nav_search_18_black@2x.png" /><input class="search-input" type="text" v-model="keyword" /><span class="search-btn" @click="handleSearch">搜索</span></div><!-- 检索结果 --><div v-show="showResultFlag" class="search-result"><div v-for="(item, index) in searchResult" class="item" :key="index" @click="handleSelect(item)"><p class="title">{{item.title }}</p><p class="address">{{item.address }}</p></div></div></div></div></template><script>import {Toast } from 'vant'import Header from '@/components/Header'import BaiduMap from 'vue-baidu-map/components/map/Map.vue'import {BmLocalSearch } from 'vue-baidu-map'const defaultInfo = {lng: 0,lat: 0,addressStr: '',title: '',province: '', // 省city: '', // 市district: '' // 区}export default {name: 'MapMaker',components: {Header,BaiduMap,BmLocalSearch},data() {return {BMap: null,map: null,mapZoom: 15,mapCenter: {lng: 116.404, lat: 39.915 },keyword: '',searchResult: [], // 检索结果列表showResultFlag: true,selectInfo: Object.assign({}, defaultInfo)}},methods: {// 地图初始化回调onReady({BMap, map }) {this.BMap = BMapthis.map = map// console.log('BMap', BMap)},handleSearch() {},handleSubmit() {console.log('this.selectInfo', this.selectInfo)},// 搜索回调onSearchComplete(res) {console.log('res', res)if (res && res.Kr) {this.searchResult = [...res.Kr]if (this.onceFlag) {this.onceFlag = false} else {this.showResultFlag = true}}},handleSelect(item) {let self = thisconsole.log('item', item)let title = item.titlelet {lng, lat } = item.marker.pointconsole.log('lng,lat', lng, lat)// 以下代码是为了根据经纬度去转换出 省、市、区的信息出来。如果，不需要，可以自行修改。let point = new this.BMap.Point(lng, lat)let geoc = new this.BMap.Geocoder()geoc.getLocation(point, function (res) {// console.log('res111', res)let addString =res.addressComponents.province + res.addressComponents.city + res.addressComponents.district + titleconsole.log('addString', addString)self.onceFlag = trueself.showResultFlag = falseself.keyword = addStringself.map.clearOverlays() //清除地图上所有覆盖物self.map.addOverlay(new self.BMap.Marker({lng, lat }))self.mapCenter.lng = lngself.mapCenter.lat = latself.mapZoom = 15})}}}</script><style lang="scss" scoped>.map-maker-wrapper {position: relative;}.btn-confrim {width: 120px;height: 56px;line-height: 56px;background-color: #5ac9d4;border-radius: 8px;color: #ffffff;text-align: center;}.bm-view {width: 100%;height: calc(100vh - 88px);}.search-wrap {position: absolute;top: 120px;left: 0;width: 100vw;box-sizing: border-box;padding: 0 32px;// background-color: red;.search {background-color: #fff;padding: 28px 32px;border-radius: 24px;display: flex;justify-content: space-between;align-items: center;margin-bottom: 16px;.search-img {width: 48px;height: 48px;}.search-input {flex: 1;outline: none;border: none;background: none;font-size: 28px;color: #313233;}.search-btn {font-size: 28px;font-weight: 600;color: #313233;}}.search-result {background-color: #fff;padding: 0 32px;border-radius: 24px;max-height: 720px;overflow: scroll;.item {border-bottom: 1px solid #ebeef2;padding: 32px 0;&:last-child {border-bottom: none;}.title {font-size: 28px;font-weight: 600;color: #313233;}.address {font-size: 24px;font-weight: 400;color: #9ca5b3;margin-top: 8px;}}}}</style>
备注：
参考了以下代码，，实现根据已知的经纬度 =》 得出省、市、区的信息数据。
var x = 115.792111;var y = 33.877972;var point = new BMap.Point(x,y);var geoc = new BMap.Geocoder();geoc.getLocation(point, function(rs){var addComp = rs.addressComponents;$('p').html(addComp.city+addComp.district+addComp.street+addComp.streetNumber);});
解决方案三：使用BMap.LocalSearch来实现自定义搜索功能 （强烈推荐）
<!--* @Description: 地图标记* @Autor: bolingsun* @Date: -02-23 13:38:59--><template><div class="map-maker-wrapper"><Header title="选择地址"><template v-slot:right><div class="btn-confrim" @click="handleSubmit">确定</div></template></Header><baidu-mapclass="bm-view"ak="你的百度ak":center="mapCenter":zoom="mapZoom":scroll-wheel-zoom="true"@ready="onReady"></baidu-map><div class="search-wrap"><div class="search"><img class="search-img" src="@/assets/images/icon_nav_search_18_black@2x.png" /><input class="search-input" type="text" v-model="keyword" /><span class="search-btn" @click="handleSearch">搜索</span></div><!-- 检索结果 --><div v-show="showResultFlag" class="search-result"><div v-for="(item, index) in searchResult" class="item" :key="index" @click="handleSelect(item)"><p class="title">{{item.title }}</p><p class="address">{{item.address }}</p></div></div></div></div></template><script>import {Toast } from 'vant'import Header from '@/components/Header'import BaiduMap from 'vue-baidu-map/components/map/Map.vue'// import { BmLocalSearch } from 'vue-baidu-map'const defaultInfo = {lng: 0,lat: 0,addressStr: '',title: '',province: '', // 省city: '', // 市district: '' // 区}export default {name: 'MapMaker',components: {Header,BaiduMap},data() {return {BMap: null,map: null,mapZoom: 15,mapCenter: {lng: 116.404, lat: 39.915 },keyword: '',searchResult: [], // 检索结果列表showResultFlag: true,selectInfo: Object.assign({}, defaultInfo)}},methods: {// 地图初始化回调onReady({BMap, map }) {this.BMap = BMapthis.map = map// console.log('BMap', BMap)},handleSearch() {let self = thisself.showResultFlag = trueconsole.log('111111111', defaultInfo)self.selectInfo = Object.assign({}, defaultInfo)let local = new this.BMap.LocalSearch(this.map, {renderOptions: {map: this.map,selectFirstResult: false},onSearchComplete: function (res) {// console.log('results', res)if (res && res.Kr) {self.searchResult = [...res.Kr]}}})local.search(this.keyword)},handleSelect(item) {let self = thisconsole.log('item', item)let title = item.titlelet {lng, lat } = item.marker.pointconsole.log('lng,lat', lng, lat)let point = new this.BMap.Point(lng, lat)let geoc = new this.BMap.Geocoder()geoc.getLocation(point, function (res) {// console.log('res111', res)let addString =res.addressComponents.province + res.addressComponents.city + res.addressComponents.district + titleconsole.log('addString', addString)self.showResultFlag = falseself.keyword = addStringself.map.clearOverlays() //清除地图上所有覆盖物self.map.addOverlay(new self.BMap.Marker({lng, lat }))self.mapCenter.lng = lngself.mapCenter.lat = latself.mapZoom = 15self.selectInfo = {lng,lat,addressStr: addString,title: title,province: res.addressComponents.province,city: res.addressComponents.city,district: res.addressComponents.district}})},handleSubmit() {console.log('this.selectInfo', this.selectInfo)}}}</script><style lang="scss" scoped>.map-maker-wrapper {position: relative;}.btn-confrim {width: 120px;height: 56px;line-height: 56px;background-color: #5ac9d4;border-radius: 8px;color: #ffffff;text-align: center;}.bm-view {width: 100%;height: calc(100vh - 88px);}.search-wrap {position: absolute;top: 120px;left: 0;width: 100vw;box-sizing: border-box;padding: 0 32px;// background-color: red;.search {background-color: #fff;padding: 28px 32px;border-radius: 24px;display: flex;justify-content: space-between;align-items: center;margin-bottom: 16px;.search-img {width: 48px;height: 48px;}.search-input {flex: 1;outline: none;border: none;background: none;font-size: 28px;color: #313233;}.search-btn {font-size: 28px;font-weight: 600;color: #313233;}}.search-result {background-color: #fff;padding: 0 32px;border-radius: 24px;max-height: 720px;overflow: scroll;.item {border-bottom: 1px solid #ebeef2;padding: 32px 0;&:last-child {border-bottom: none;}.title {font-size: 28px;font-weight: 600;color: #313233;}.address {font-size: 24px;font-weight: 400;color: #9ca5b3;margin-top: 8px;}}}}</style>
原理，也很简单，就是使用百度本身的搜索功能。
对应的百度地图demo地址：
/jsdemo.htm#localSearchKey
