vue 对接百度地图,选择附近的点

安装依赖

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>