uni map地图相关使用小计（多点标识，拖拽起点，地图画圆）

这次的项目用到了地图，特别记录下

1. 小程序不执行地图相关事件时候，看下小程序的调试基础库
2. 进行多点标注时候，经纬度要正确，图标设置50就好了，ID是一定得绑定的。
3. 动态传参时候如果需要保留之前的标注点就做数组拼接，不需要的话直接覆盖掉。
4. 画圆时候，半径跟圆心经纬度设置正确就没问题
5. 拖拽地图移动指定标记只要选择对ID就没问题
6. 计算是拖拽的标记点否在圆的覆盖范围时候的时候，用圆心跟指定标试点计算距离就好（没拖拽次就传参计算，只能想到这个，有更靠谱的方法拜托告诉我了）
7. 不规则多边形传递经纬度数组，每次转折的经纬度（项目没用到）

<template>
	<view class="content">
		<view class="map">
			  <map id="my_test_map"  style="width: 750rpx; height: 540upx;"  :include-points='get_address'  @markertap="check_market" :circles="circles"   :scale="scale" @regionchange="regionchange" :markers='markers' :latitude="center_lat" :longitude="center_lng" >
			  </map>
			  
			 
		 
			  <button @click="change_markers">变更</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				  id:'ybus_map',
				   center_lat: 34.252109,
				    center_lng: 108.840866,  
					markers:[
						{
							 id:'begin',
							 latitude: 34.252109,
								longitude:  108.840866, 
								iconPath:"../../static//map_getaddress.png",
							 width:50,
							 height:50
						}
					],
					scale:15,
					get_address:[
					],
					circles:[
						// {//在地图上显示圆
						//  　　latitude: 34.252109,
						//  　　longitude: 108.840866,
						//  　　fillColor:"#e6060a6A",//填充颜色
						// 　　 color:"#e6060a6A",//描边的颜色
						//  　　radius:300,//半径
						// 　　 strokeWidth:2//描边的宽度
						//  }
					]
				
			}
		},
		onLoad() {
			 console.log("is my map test");
		},
		methods: {
			change_markers(){
				console.log("开始执行地图标注");
				 this.center_lat=34.275092
				 this.center_lng=108.961716
				 //生成标记点
				 var begin_markers=[{
					 id:123,
					   latitude: 34.275093,
					    longitude: 108.961716,
					 iconPath: '../../static/map_getaddress.png',
					 width:50,
					 height:50,
					 // title:'标注点A',
					 callout:[{
						 content:"tes****123456t",
						 color:'#333',
						 bgColor:"#fff",
						 fontSize:'68',
						 padding:'20upx',
						 display:'ALWAYS'
					 }]
				 },{
					 id:124,
					 latitude: 34.254430,
					    longitude:  108.947040, 
					   	iconPath:"../../static//map_getaddress.png",
					 width:50,
					 height:50
				 }]
				 var now_address=[{
					 id:'begin',
					 latitude: 34.252109,
					longitude:  108.840866, 
					iconPath:"../../static//map_getaddress.png",
					 width:50,
					 height:50
				 }] 
				 //获取地图
				 this.markers = now_address.concat(begin_markers);
				 console.log();
				 
				 this.circles=[{//在地图上显示圆
				   　　 latitude: 34.254430,
					      longitude:  108.947040, 
				   　　fillColor:"#9db0de6A",//填充颜色
				  　　 color:"#00aaff",//描边的颜色
				   　　radius:300,//半径
				  　　 strokeWidth:1//描边的宽度
				   },
				   {//在地图上显示圆
				    　　latitude: 34.275093,
				    　　longitude: 108.966816,
				    　　fillColor:"#9db0de6A",//填充颜色
				   　　 color:"#00aaff",//描边的颜色
				    　　radius:300,//半径
				   　　 strokeWidth:1//描边的宽度
				    }]
					//缩放视野以包含所有给定的坐标点
					this.get_address=[
						{
						latitude: 34.254430,
						longitude:  108.947040, 
						},
						{latitude: 34.275093,
				    　　longitude: 108.966816}
					]
				  
				 //
				 // this.$forceUpdate();
			},
			// 拖拽地图
			regionchange(e){
				console.log(e);
				
				var  _that= this;
				_that.mainmap=uni.createMapContext('my_test_map',this);
				_that.mainmap.getCenterLocation({
								   success(res) {   
										var lat= res.latitude
										var lng= res.longitude  
										console.log(lat);
										console.log(lng);
										//重设标记点
										_that.mainmap.translateMarker({
											markerId:'begin',
											destination:{
										     	latitude: lat,
											    longitude: lng
											}, 
											 duration:350，
											  animationEnd(){
												 console.log('设置');
											 }
										})
								   }  
				  }) 
				
			},
			//点击标记
			check_market(e){
				console.log(e.detail);
			}
		}
	}
</script>

<style>
 .map{
	 width: 100%;
	 
 }
</style>