uniapp使用map实现周边门店页面

效果：

<template>
	<view class="md">
		
		<view class="map">
			 <!-- 地图部分 :include-points="markers"-->
			<map style="width: 100%; height: 700rpx;" :latitude="latitude" :longitude="longitude" :markers="markers" @tap="tap" :scale="16"/>
		</view>
		<scroll-view scroll-y="true" class="bgwhite" style="margin-top:-50rpx;padding-bottom: 20rpx;" :style="'height:'+storeHeight+'px;'" >
			<view class="mdList">
				<view class="item" v-for="(item,index) in storeList" :key="index">
					<view class="distance">{{item.distance_unit}}</view>
					<view class="lef">
						<view class="address">{{item.address}}</view>
						<view class="smj_code">统一自动售货机：{{item.name}}</view>
						<view class="isSupport">支持售货机代金券</view>
					</view>
					<view class="btn" @click="daohangClick(item.latitude,item.longitude)">去看看</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	
	// 引入高德地图api提供的微信小程序的接口
	var amapFile = require('@/utils/amap-wx.js');//如：..­/..­/libs/amap-wx.js
	
	// 创建地图
	var myAmapFun = new amapFile.AMapWX({key: '9d3d5a85c5c55f3f0e10322a4d1e596c'});
	
	var system = uni.getSystemInfoSync();
	export default{
		data(){
			return{
				storeHeight:system.screenHeight-400,
				latitude:'',
				longitude:'',
				markers: [
					// {
					// 	id:1,
					// 	latitude: 39.909,
					// 	longitude: 116.39742,
					// 	width:30,
					// 	height:30,
					// },
				],
				storeList:[],
			}
		},
		onLoad() {
			this.getStoreList();
		},
		methods:{
			getStoreList(){
				var _this = this
				uni.getLocation({
					type: 'wgs84',
					isHighAccuracy: true,//开启高精度定位默认false
					success: function (res) {
						_this.latitude = res.latitude
						_this.longitude = res.longitude
						_this.$http._get('shop/shopList',{
							latitude:_this.latitude,
							longitude:_this.longitude
						},res=>{
							if(res.code == 1){
								_this.storeList = res.data
								for(var i = 0;i<_this.storeList.length;i++){
									const markerList = {
										id:_this.storeList[i].id,
										latitude: _this.storeList[i].latitude,
										longitude: _this.storeList[i].longitude,
										width:14,
										height:18,
										iconPath: '../../static/images/map-icon-address.png', // 显示的图标
									}
									_this.markers.push(markerList)
								}
							}
						})
					}
				});
				
			},
			// 点击去看看跳转
			daohangClick(latitude,longitude){
				var _this = this
				console.log('latitude',typeof(Number(latitude)))
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					success: function () {
						console.log('success');
					}
				});
			},
			// 在地图上点击进行选点，这个选点在地图缩放比例较大时无效，因为精读的问题。
			tap(e){
				console.log(e);
				var location = e.detail.longitude +',' + e.detail.latitude;
				
				// myAmapFun.getRegeo({
				//   location: location,
				//   success: (data)=>{
				// 	console.log("获取指定定位信息",data);
				// 	this.selectAddr = {
				// 		address:data[0].regeocodeData.formatted_address,
				// 		latitude:e.detail.latitude,
				// 		longitude:e.detail.longitude
				// 	};
				// 	this.markers[0].latitude = data[0].latitude;
				// 	this.markers[0].longitude = data[0].longitude;
				// 	myAmapFun.getPoiAround({
				// 	  location: data[0].longitude+','+data[0].latitude,
				// 	  success: (data)=>{
				// 		console.log("获取当前的列表",data);
				// 		this.dataTips = data.poisData;
				// 	  },
				// 	  fail: (info)=>{
				// 		console.log(info)
				// 	  }
				// 	})
				//   },
				//   fail: (info)=>{
				// 	    console.log(info);
				//   }
				// })
				
			},

		}
	}
</script>

<style>
	.bgwhite{
		background: #fff;
	}
	.md .map{
		width: 100%;
		height: 700rpx;
		position: relative;
		z-index: -1;
	}
	.md .mdList{
		padding: 0 20rpx;
	}
	.md .mdList .item{
		width: 100%;
		height: 242rpx;
		background-image: linear-gradient(0deg, 
			#fffdfc 0%, 
			#fff7e9 61%, 
			#fff0d6 100%), 
		linear-gradient(
			#ffffff, 
			#ffffff);
		background-blend-mode: normal, 
			normal;
		box-shadow: 0px 1px 16rpx 0px 
			rgba(19, 23, 35, 0.08);
		border-radius: 10rpx;
		padding-left: 20rpx;
		padding-right: 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: relative;
		margin-top: 30rpx;
	}
	.md .mdList .item .distance{
		position: absolute;
		top: 0;
		right: 0;
		min-width: 138rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: url(../../static/images/map-bg-distance.png) center center no-repeat;
		background-size: 100% 100%;
		/* padding-left: 18rpx; */
		padding:0 10rpx 0 30rpx;
		box-sizing: border-box;
		text-align: center;
		color: #ffffff;
		font-size: 24rpx;
	}
	.md .mdList .item .lef{
		flex: 1;
	}
	.md .mdList .item .address{
		line-height: 40rpx;
		font-size: 30rpx;
		letter-spacing: -1px;
		color: #282828;
		margin-bottom: 34rpx;
		background: url(../../static/images/map-icon-address.png) left 10rpx no-repeat;
		background-size: 24rpx 28rpx;
		padding-left: 34rpx;
	}
	.md .mdList .item .smj_code{
		line-height: 40rpx;
		font-size: 24rpx;
		letter-spacing: -1px;
		color: #656565;
		line-height: 1;
		background: url(../../static/images/map-icon-smj.png) 6rpx top no-repeat;
		background-size: 13rpx 23rpx;
		padding-left: 34rpx;
	}
	.md .mdList .item .isSupport{
		width: 195rpx;
		height: 30rpx;
		line-height: 30rpx;
		border-radius: 15rpx;
		font-size: 18rpx;
		padding-left: 40rpx;
		box-sizing: border-box;
		background: url(../../static/images/map-icon-wxzf.png) #e5c194 12rpx 8rpx no-repeat;
		background-size: 19rpx 17rpx;
		margin-top: 20rpx;
		color: #fff;
	}
	.md .btn{
		width: 150rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		background-image: linear-gradient(0deg, 
			#ff6717 0%, 
			#ff9b0b 100%), 
		linear-gradient(
			#ff5757, 
			#ff5757);
		background-blend-mode: normal, 
			normal;
		border-radius: 30rpx;
		font-size: 30rpx;
		letter-spacing: -1px;
		color: #ffffff;
		margin-left: 78rpx;
	}
</style>

高德地图api提供的微信小程序的接口文件