怪兽充电小程序

第一首先看中心点上有个小图标
实现方式，我们可以使用map 结合一个图片覆盖物实现，在结合定位

   <map id="myMap" 
						show-location
						enable-poi
						enable-building 
						:latitude="latitude"
						:longitude="longitude"
						:markers="markers"
						@regionchange="anchorpointtapmap"
						>
					    <cover-image class="img-map" src="../../static/mark.png" >  </cover-image>
                   </map>


#myMap {
		width: 100%;
		height: 100%;
		position: relative;
	}
	 
.img-map {
			width: 54rpx;
			height:80rpx;
			position: absolute;
			left: calc(50% - 0rpx);
			top: calc(50% - 40rpx);
			transform: translate(-50%,-50%); 
		}
		.coview{
			position: absolute;
			bottom: 0px;
			width: 100%;
			height: 50px;
			background: red;
		}

当我们拖动的时候，点击刷新按钮让中心小图标回来
实现思路，当我们第一获取当前位置的时候，存储一个当前坐标
在移动回来
在data中定义两个字段

deflatitude:"",
deflongitude:"",


  <cover-view class="backcenter"  @click="backcenter()">
	<cover-image style="width: 40px; height: 25px;margin: 8px 0px;"   src="../../static/sx.png" ></cover-image >
  </cover-view> 


	backcenter(){
				  this.$nextTick(() => {
					     const mapCtx = wx.createMapContext("myMap",this);
					      mapCtx.moveToLocation({
					          latitude:this.deflatitude,
					          longitude:this.deflongitude,
					          success:() => {
								
							 },
					      });
				  })
			
			},

在
mounted() {
this.onAuthLocation();
}

    onAuthLocation() {
				      var that =this;
				 	  uni.getLocation({
						  type: 'gcj02',
						  altitude:true,
						  isHighAccuracy:true,
						  success: function (res) {
							  that.latitude =res.latitude;
							  that.longitude =res.longitude;
							  that.deflatitude =res.latitude;
							  that.deflongitude =res.longitude;
						  }
					  });
	         },

充电宝小图标标注只要使用markers
在拖动地图的获取到对应坐标。后台返回当前坐标附近有充电宝的数组，赋值给markers 这里只做死数据演示。
完整代码

使用uni-app创建项目

pages.json


{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "怪兽充电"
			}
		}
	    ,{
            "path" : "pages/nearshop/nearshop",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "附近门店",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/user/user",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "个人中心",
                "enablePullDownRefresh": false,
				"navigationStyle":"custom",
				"app-plus":{
			     	"titleView":false
				}
            }
            
        }
       
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "怪兽充电",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}



index.vue


<template>
    <view class="page">
	
        <view class="page-body">
                  <map id="myMap" 
						show-location
						enable-poi
						enable-building 
						:latitude="latitude"
						:longitude="longitude"
						:markers="markers"
						@regionchange="anchorpointtapmap"
						>
					    <cover-image class="img-map" src="../../static/mark.png" >  </cover-image>
                   </map>
		
				   <view class="pop-up">
				         <view class="mian">
							 
							  <view class="item1" @click="gonear(1)">
								      <image style="width: 30px; height: 30px; " :mode="aspectFit"
								      src="../../static/md.png"
								       ></image>
								       	 <text>附近门店</text>               
							  </view>
							  <view class="item2">
								   <button type="default" @click="scanCode">扫码充电</button>
							  </view>
							  <view class="item3" @click