zd_wechatApp/pages/mapindex/mapindex.vue

<template>
  <view class="content">
	 <!-- <button type="primary" @click="location">位置定位</button> -->
    <map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude" :enable-3D="true" @markertap="location":markers="markers">
		<view class="img-map2">
<cover-image  style="width: 100rpx;height: 100rpx;" src="https://121.37.40.217/app/images/ef712ef2a0bf48f48bf56ea655e8359c.png"   @click="getregulatorBoxList "></cover-image>
调压箱
</view>
	<view class="img-map3">
		<cover-image   style="width: 100rpx;height: 100rpx;"  src="https://121.37.40.217/app/images/6ba09f14edcc49b5bd2ff0f6dee4bdb9.png"  @click="getvalveWellPositionlist"></cover-image>
		<!-- <u-popup v-model="show"  mode="bottom" height='600rpx'>
					<view>出淤泥而不染，濯清涟而不妖</view>
				</u-popup> -->
				阀井
	</view>
	</map>
  </view>
</template>

<script>
  // const img = 'https://121.37.40.217/app/images/6ba09f14edcc49b5bd2ff0f6dee4bdb9.png';
import service from '@/api/index.js'
  export default {
    data() {
      return {
        latitude: 43.771703,
        longitude: 125.367899,
		_mapContext:null,
		show:true,
		positions:[],
		markers:[],
		type:1
      }
    },
    onReady() {
		this.getconter()
      this._mapContext = uni.createMapContext("map", this);
      // 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
      this._mapContext.initMarkerCluster({
        enableDefaultStyle: false,
        zoomOnClick: true,
        gridSize: 10,
        complete(res) {
          console.log('initMarkerCluster', res)
        }
      });
      this._mapContext.on("markerClusterCreate", (e) => {
        console.log("markerClusterCreate", e);
      });
      
    },
	onShow() {
		this.getconter()
		setTimeout(()=>{
		this.getvalveWellPositionlist()
		},100)			
	},
    methods: {
		//右下角定位按钮的点击事件
		clickcontrol(){
			this.show=true
	console.log(this.latitude,this.longitude)
	uni.authorize({
		scope: 'scope.userLocation',
		success() {
			uni.getLocation({
				type: 'gcj02',
				 altitude: true, //高精度定位
				 //定位成功，更新定位结果
				 success: function(res) {
					console.log(res)
					that.latitude=res.latitude;
					that.longitude=res.longitude;
					that.covers[0].latitude=res.latitude;
					that.covers[0].longitude=res.longitude;
				}
			});
		}
	});

			this._mapContext.moveToLocation({   //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
		        latitude: this.latitude,
		        longitude: this.longitude
			});  
		},
		getvalveWellPositionlist()
		{
			service.getvalveWellPositionlist({}).then(res => {
				console.log('getwarningPileList', res)
				if (res.length == 0) {
					this.$UTILS.showPrompt('暂无项目!')
				}
				this.positions = res;
			let	img='https://121.37.40.217/app/images/6ba09f14edcc49b5bd2ff0f6dee4bdb9.png'
			
				setTimeout(()=>{this.addMarkers(img)},1000)
				})
		},
		getregulatorBoxList()
		{
			this.positions=[]
		service.getregulatorBoxList({}).then(res => {
			console.log('getwarningPileList', res)
			if (res.length == 0) {
				this.$UTILS.showPrompt('暂无项目!')
			}
			this.positions = res.rows;
		 let img='https://121.37.40.217/app/images/ef712ef2a0bf48f48bf56ea655e8359c.png'
			setTimeout(()=>{this.addMarkers2(img)},1000)
		
			})
			},
			addMarkers2(img) {
				this.type=2
			  const positions = [
			    {
			      latitude: 43.771703,
			      longitude: 125.376804
			    },{
			      latitude: "43.780458",
			      longitude: "125.367899"
			    }
			  ]
					
			  this.markers = []
			  this.positions.forEach((p, i) => {
			    this.markers.push(
			      Object.assign({},{
			        id: p.id,
					type:2,
			        iconPath: img,
			        width: 45,
			        height: 50,
						  latitude:parseFloat(p.latitude),
						  longitude:parseFloat(p.longitude),
			        joinCluster: true, // 指定了该参数才会参与聚合
			        // label: {
			        //     width: 50,
			        //     height: 30,
			        //     borderWidth: 1,
			        //     borderRadius: 10,
			        //     bgColor: '#ffffff',
			        //     content: p.valveWellName,
			        //   latitude:p.latitude,
			        //   longitude:p.longitude
			        // },
			        callout:{
			          borderWidth: 1,
			          borderRadius: 10,
			          bgColor: '#ffffff',
							fontSize:20,
							padding:3,
			          content: p.name,
			          display:'ALWAYS'
			        }
			      })
			    )
			  })
			  console.log(this.markers)
					setTimeout(()=>{
			  this._mapContext.addMarkers({
			      markers:this.markers,
			      clear: true,
			      complete(res) {
			        console.log('addMarkers', res)
			      }
				 
			  })
			  
					},100)
				
			},
      addMarkers(img) {
		  this.type=1
        const positions = [
          {
            latitude: 43.771703,
            longitude: 125.376804
          },{
            latitude: "43.780458",
            longitude: "125.367899"
          }
        ]
		
        this.markers = []
        this.positions.forEach((p, i) => {
          this.markers.push(
            Object.assign({},{
              id: p.id,
			  type:1,
              iconPath: img,
              width: 45,
              height: 50,
			  latitude:parseFloat(p.latitude),
			  longitude:parseFloat(p.longitude),
              joinCluster: true, // 指定了该参数才会参与聚合
              // label: {
              //     width: 50,
              //     height: 30,
              //     borderWidth: 1,
              //     borderRadius: 10,
              //     bgColor: '#ffffff',
              //     content: p.valveWellName,
              //   latitude:p.latitude,
              //   longitude:p.longitude
              // },
              callout:{
                borderWidth: 1,
                borderRadius: 10,
                bgColor: '#ffffff',
				fontSize:20,
				padding:3,
                content: p.valveWellName,
                display:'ALWAYS'
              }
            })
          )
        })
        console.log(this.markers)
		setTimeout(()=>{
        this._mapContext.addMarkers({
            markers:this.markers,
            clear: true,
            complete(res) {
              console.log('addMarkers', res)
            }
        })
		},100)
      },

	  //位置定位
	  location(e){
		  if(this.type==1)
		  {
		  console.log(e)
		  service.getvalveWellPosition(e.markerId).then(res => {
		  	console.log('getwarningPileList', res)
          console.log(e)
		 uni.openLocation({
		     latitude: parseFloat( res.latitude),
			   longitude: parseFloat(res.longitude),
		     success: function (res) {
		         console.log('打开系统位置地图成功')
		     },
		     fail: function (error) {
		         console.log(error)
		     }
		 })
		 // this.positions = res;
		 })
		 }else{
			 console.log(e)
			 service.getregulatorBox(e.markerId).then(res => {
			  	console.log('getwarningPileList', res)
			  console.log(e)
			 uni.openLocation({
			     latitude: parseFloat( res.latitude),
			 			   longitude: parseFloat(res.longitude),
			     success: function (res) {
			         console.log('打开系统位置地图成功')
			     },
			     fail: function (error) {
			         console.log(error)
			     }
			 })
			 // this.positions = res;
			 })
			
		 }
	  },
      clickMarker(e)
      {
        console.log("点击了",e)
		 this._mapContext.removeMarkers()
      },
	  getconter()
	  {
		  var that = this;
		  		// 获取经纬度
		  			uni.authorize({
		  				scope: 'scope.userLocation',
		  				success() {
		  					uni.getLocation({
		  						type: 'gcj02',
		  						 altitude: true, //高精度定位
		  						 //定位成功，更新定位结果
		  						 success: function(res) {
		  							console.log(res)
		  							that.latitude=res.latitude;
		  							that.longitude=res.longitude;
		  							that.latitude=res.latitude;
		  							that.longitude=res.longitude;
		  							console.log(this.latitude,this.longitude)
		  						}
		  					});
		  				}
		  				
		  			});
	  }
    }
  }
</script>

<style>
  .content {
    flex: 1;
  }

  .map {
	  width:100%;
	  height: 100rem;
    flex: 1;
  }
  .img-map2{
  	width: 100rpx;
  	height: 140rpx;
  	position: fixed;
  	bottom: 12vh;
  	right: 2vh;
	text-align: center;
	display: flex;
	  flex-direction: column;
  	background-color: #FFFFFF;
  	border-radius: 5px;
  }
  .img-map3{
  	width: 100rpx;
  	height: 140rpx;
  	position: fixed;
  	bottom: 23vh;
  	right: 2vh;
	text-align: center;
	display: flex;
	  flex-direction: column;
  	background-color: #FFFFFF;
  	border-radius: 5px;
  }
</style>