vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）

需求描述：

在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 self
export 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: 2022-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: 2022-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地址：

https://lbsyun.baidu.com/jsdemo.htm#localSearchKey

vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）相关推荐

Vue项目中使用百度地图API
百度地图官方文档 1. 申请百度账号和ak 申请 2. 引用百度地图API文件 <script type="text/javascript" src="https: ...
vue项目中通过百度地图API获取当前位置定位
1.申请自己的Ak(密钥) 百度地图开发平台登录后到控制台,然后创建应用,选择对应的配置创建成功后复制对应的AK就行(注意:创建过程中需要注意应用类型) 2. 创建一个map.js 里面写此代码需 ...
vue项目中使用百度地图轨迹动画
在上篇博客中,介绍了如何在vue项目中集成百度地图,这篇博客主要是说如何在vue项目中使用轨迹动画在项目开发过程中,比如你需要实时的观察一个人的行走路线,行走过程. 这个时候我们就需要在地图上使用 ...
百度地图的使用方法，如何在Vue项目中使用百度地图
关于百度地图的解释百度地图又称LBS:LocationBussinessServer,是基于定义位置的商业服务,现在常用的地图有百度地图和高德地图居多官网入口 https://lbsyun.bai ...
前端项目中使用百度地图api，含实例
前言一.使用百度地图接口的步骤二.简单例子 1.第一个地图 2.控件 3.静态/动态添加点圈线面 4.文字标注.信息窗口 5. Web服务API-IP定位服务 6.Web服务API-地点检索服务 ...
vue项目中使用百度地图
安装首先在vue项目中,我们可以使用 vue-baidu-map 插件来替代直接引入百度地图js sdk. 官方文档 JavaScript API v2.0类参考 npm install --sav ...
笔记：vue项目中引用百度地图，地图空白现象
最近在项目中使用百度离线地图,可是一切都正常完成的情况下.页面中的地图区域居然是显示空白的: 检查了好久,发现是自己的全局样式造成的: 解决:将全局样式中img标签的max-width和max-hei ...
Vue项目中使用百度地图+mapv
1.安装依赖 npm install vue-baidu-map --save npm install mapv --save 2.main.js import BaiduMap from " ...
nuxt项目中调用百度地图api
1:配置代理 2:封装接口 // 该项目涉及到多个跨域,这里将请求前缀注释, //在api下的map.js文件中封装接口export default ({$axios},inject) => { ...

vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）

解决方案一：利益vue-baidu-map的`BmAutoComplete` 自动填充功能。(很垃圾，不推荐)

解决方案二：利用vue-baidu-map的`BmLocalSearch`组件实现 (推荐)

解决方案三：使用`BMap.LocalSearch`来实现自定义搜索功能（强烈推荐）

vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）相关推荐

最新文章

热门文章

vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）

解决方案一： 利益vue-baidu-map的BmAutoComplete 自动填充 功能。(很垃圾，不推荐)

解决方案二：利用vue-baidu-map的BmLocalSearch组件实现 (推荐)

解决方案三：使用BMap.LocalSearch来实现自定义搜索功能 （强烈推荐）

vue项目中使用百度地图api完成自定义搜索功能（包含搜索详细地理位置）相关推荐

最新文章

热门文章

解决方案一：利益vue-baidu-map的`BmAutoComplete` 自动填充功能。(很垃圾，不推荐)

解决方案二：利用vue-baidu-map的`BmLocalSearch`组件实现 (推荐)

解决方案三：使用`BMap.LocalSearch`来实现自定义搜索功能（强烈推荐）