parking_h5/pages/parkingLists/parkingLists.vue

<template>
	<view>
		<map 
		id="pagemap" 
		style="width: 100%; height: 100vh;" 
		:show-location="true" 
		:latitude="latitude" 
		:longitude="longitude" 
		@markertap="markertap"
		:markers="covers"></map>
		<!-- <u-empty src="/static/img/empty.png" icon-size="335" text="正在建设中" color="#878787" mode="search"></u-empty> -->
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default{
		data(){
			return{
				page_map:'',
				id: 0, //使用 marker点击事件 需要填写id
				latitude: 26.64969,
				longitude: 106.636453,
				covers: [{
                latitude: 26.597864,
                longitude: 106.72947,
                iconPath: 'https://www.baidu.com/img/flexible/logo/pc/result.png'
            }],
				
			}
		},
		onLoad(){
			this.page_map = uni.createMapContext("pagemap",this);
			// console.log('page_map',this.page_map);
			this.getNearRoadsl();
		},
		onShow() {
			this.getLocation();
			
		},
		methods:{
			getLocation(){
				let that = this;
				// console.log("请求定位")
				uni.getLocation({
					type:"gcj02",
					success : function (res) {
						// console.log("定位返回信息:", res);
						that.latitude = res.latitude;
						that.longitude = res.longitude;
						// console.log('that.latitude',that.latitude)
						// console.log(res.longitude + "," + res.latitude )
					},
					fail: function(res){
						console.log("请求错误:", res)
					}
				})
			},
			async getNearRoadsl(){
				await this.getLocation();
				this.$u.api.nearRoadsl({latitude:this.latitude,longitude:this.longitude})
				.then(res=>{
					// this.$refs.uToast.show({
					// 	title: res.msg,
					// 	type: 'success',
					// });
					// this.covers = res.data;
					// console.log('this.covers',this.covers)
					res.data.forEach(item=>{
						if(item.latitude&&item.longitude){
							let marker = {
								latitude: item.latitude,
								longitude:item.longitude,
								// id:'0',
								iconPath: 'https://www.baidu.com/img/flexible/logo/pc/result.png'
							}
							this.covers.push(marker);
						}
					})
					// this.covers = 
					// console.log('getNearRoadsl',res)
				}).catch(err=>{
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
					});
					console.log('getNearRoadsl ',err)
				});
			},
			markertap(e){
				console.log('markertap',e)
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{margin-top: 20vh;}
	@import url("./parkingLists.scss");
</style>