安装依赖

npm install vue-baidu-map@0.21.22

编写页面

<template><view class="nearLocation"><u-navbar :is-back="false" title="选择附近的点" title-color="black"><view style="padding-left: 20px;" class="leftButton"><u-image width="28px" height="28px" src="~@/static/images/mmwz/family/back@3x.png" @click="back"></u-image></view><view slot="right"><view style="padding-right: 20px;" class="rightButton"><!-- <u-button shape="circle" size="mini" :customStyle="{color:'rgba(236, 99, 56, 1)',fontSize: '18px',fontWeight: '700',fontFamily: 'syst-bold'}" @click="confirmUpload">上传</u-button> --></view></view></u-navbar><u-input class="input" v-model="keyword" type="text" :border="true" /><baidu-map class="bm-view" ak="p1On6Mpg您的AKgJsRF87Fjia" :zoom="15" :center="center" @ready="handler" :scroll-wheel-zoom="true"><!-- <bm-mapView class="map"></bm-mapView> --><bm-circle :center="center" :radius="radius" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2" @lineupdate="" :editing="false"></bm-circle><bm-local-search :keyword="keyword" :location="center" :nearby="{center:center,radius:radius}" @resultshtmlset="searchcomplete" @markersset="markersset" @infohtmlset="infohtmlset"></bm-local-search></baidu-map></view>
</template><script>import BaiduMap from 'vue-baidu-map/components/map/Map.vue'import bmGeolocation from 'vue-baidu-map/components/controls/Geolocation.vue'import bmCircle from 'vue-baidu-map/components/overlays/Circle.vue'import bmLocalSearch from 'vue-baidu-map/components/search/LocalSearch.vue'//import bmMapView from 'vue-baidu-map/components/map/MapView.vue'export default {components: {BaiduMap,bmGeolocation,bmCircle,bmLocalSearch,//bmMapView},data() {return {center:{lng: "112.53450131",lat: "32.99656220"},radius:1000,keyword:'',currentPageLocationList:[]}},methods: {handler({BMap, map}){let _this = this;var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r){//_this.center = {lng: r.longitude, lat: r.latitude};		// 设置center属性值_this.center.lng = r.longitude;_this.center.lat = r.latitude;//console.log(r);console.log(_this.center);var geoc = new BMap.Geocoder();geoc.getLocation(new BMap.Point(r.longitude, r.latitude), function (rs) {var addComp = rs.addressComponents;//var result = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;var result = addComp.province + addComp.city + addComp.district + addComp.street;_this.keyword	 = result;});},{enableHighAccuracy: true});},searchcomplete(results ){var _this = this;//console.log(results);var lis = results.querySelectorAll('li');lis.forEach(function(li,index,arr) {li.addEventListener("click", function (e) {_this.selectLocation(index);}, true);});},markersset(pois){//console.log(pois);this.currentPageLocationList=pois;//console.log(this.currentPageLocationList);},infohtmlset(poi){//console.log(poi);},selectLocation(index){//console.log(index);var location = this.currentPageLocationList[index];console.log(location);let pages = getCurrentPages()let prevPage = pages[pages.length -2]if(prevPage == null){return;}prevPage.$vm.setLocation(location);uni.navigateBack({delta: 1 // 返回的页面数})},back(){let pages = getCurrentPages()let prevPage = pages[pages.length -2]if(prevPage == null){return;}prevPage.$vm.setLocation(null);uni.navigateBack({delta: 1 // 返回的页面数})}}}
</script><style lang="scss">
.nearLocation{::v-deep .u-navbar{margin-top: 25px;background: none !important;.u-navbar-inner{.u-navbar-content-title{font-family: 'syst-bold', sans-serif;font-size: 18px;font-weight: 900;color: rgba(82, 45, 42, 1);.u-title{color: rgba(82, 45, 42, 1) !important;}}.u-slot-right{.rightButton{/* ::v-deep .u-default-hover{color: rgb(236,99,56) !important;} */}}}}::v-deep .u-border-bottom:after {border-bottom-width: 0px !important;}.input{margin-top: 20px;}.bm-view {width: 100%;height: 300px;}
}
</style>