~kongdeqiang/tangshanDaPing.git

			@@ -1,12 +1,13 @@
			<template>
			<div class="showIndex-wrap">
			<div class="mapBox">
			<baidu-map
			:center="center"
			:zoom="zoom"
			class="bm-view"
			@ready="handler">
			</baidu-map>
			<!-- <baidu-map-->
			<!-- :center="center"-->
			<!-- :zoom="zoom"-->
			<!-- class="bm-view"-->
			<!-- @ready="handler">-->
			<!-- </baidu-map>-->
			<div class="map" id="map"></div>
			<!--<div class="map_container" id="map_container"></div>-->
			</div>
			<div class="upload-box">
			@@ -56,10 +57,11 @@
			center: { lng: 118.20, lat: 39.63},
			zoom: 6,
			mapObj:{},
			mapData:[],
			mapData2:[],
			uploadVisiable:false, //上传文件弹框
			timer:null
			timer:null,
			mapData:[],
			map:''
			}
			},
			destroyed() {
			@@ -68,11 +70,28 @@
			mounted() {
			//this.getMapData()
			//this.initMap()
			this.timer = setInterval(() => {
			this.getMapData()
			},300000)
			this.$nextTick(() => {
			this.initMap()
			})


			// this.timer = setInterval(() => {
			// this.getMapData()
			// },300000)

			},
			methods: {
			initMap() {
			this.map = new window.BMap.Map("map");
			console.log(map,'map===')
			this.map.centerAndZoom(new BMap.Point(118.183450598,39.6505309225), 11)
			//map.enableScrollWheelZoom(true) //鼠标滚动缩放
			this.map.setCurrentCity('唐山') // 设置地图显示的城市此项是必须设置的
			this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
			//this.getMapData()
			this.addMarker()

			},
			uploadClick(type) {
			console.log(type,'type===')
			this.uploadVisiable = true
			@@ -88,28 +107,71 @@
			}
			})
			},
			handler({BMap, map}) {
			this.mapObj = {BMap, map}
			let goodsData = require('../../../assets/js/custom_map_config2')
			let point = new BMap.Point(118.183450598,39.6505309225)
			map.centerAndZoom(point, 15)
			map.enableScrollWheelZoom(true) //鼠标滚动缩放
			map.setMapStyleV2({
			styleJson: goodsData
			// styleId: '5f9b8a9639cf6e4ae8806379bedba141'
			// style: 'bluish'
			})
			map.setCurrentCity('唐山') // 设置地图显示的城市此项是必须设置的
			this.getMapData()

			},
			// handler({BMap, map}) {
			// this.mapObj = {BMap, map}
			// //let goodsData = require('../../../assets/js/custom_map_config2')
			// let point = new BMap.Point(118.183450598,39.6505309225)
			// map.centerAndZoom(point, 11)
			// map.enableScrollWheelZoom(true) //鼠标滚动缩放
			// // map.setMapStyleV2({
			// // styleJson: goodsData
			// // // styleId: '5f9b8a9639cf6e4ae8806379bedba141'
			// // // style: 'bluish'
			// // })
			// map.setCurrentCity('唐山') // 设置地图显示的城市此项是必须设置的
			// this.getMapData()
			//
			// },

			addMarker() {
			let BMap = this.mapObj.BMap
			let map = this.mapObj.map
			let BMap = window.BMap
			this.map.clearOverlays() // 清除地图上所有覆盖物
			//let map = new window.BMap.Map("map");
			let mapMarkers = []
			this.mapData = [{
			lon:118.167201,
			lat:39.60944,
			address: '河北省唐山市开平区东西大街199号',
			health: '0'
			},{
			lon:118.15782,
			lat:39.63102,
			address: '河北省唐山市路南区新华西道76号4层',
			health: '0'
			},{
			lon:118.09289,
			lat:39.58163,
			address: '河北省唐山市丰南区正苑大街7号',
			health: '0'
			},{
			lon:118.145069,
			lat:39.662586,
			address: '河北省唐山市丰润区曹雪芹大街17号',
			health: '0'
			},{
			lon:118.45153,
			lat:39.74049,
			address: '河北省唐山市古冶区永盛路',
			health: '0'
			}]
			// this.mapData.forEach(item => {
			// let marker = new BMap.Marker(item.lon,item.lat)
			// mapMarkers.push(marker)
			// this.mapObj.map.addOverlay(marker)
			// })
			// let markerClusterer = new BMapLib.MarkerClusterer(this.mapObj.map, {
			// markers: mapMarkers,
			// styles: [
			// {
			// url: "./static/img/markerIcon3",
			// size: new BMap.Size(35, 35),
			// },
			// ],
			// })
			// markerClusterer.setMinClusterSize(2)
			this.mapData.forEach(item => { //lng 经度 lat 经度
			console.log(this.mapData,'this.mapData===')
			if(item.lat && item.lat) {
			if(item.lon && item.lat) {
			let longitude = item.lon
			console.log(item.lon,'经纬----')
			console.log(item.lat,'经纬----')
			@@ -129,8 +191,8 @@

			let point = new BMap.Point(longitude,latitude)
			let marker = new BMap.Marker(point,{icon:myIcon})
			map.addOverlay(marker)
			map.setZoom(13)
			this.map.addOverlay(marker)
			this.map.setZoom(11)
			// 添加鼠标划入坐标点的显示内容
			let isH = ''
			if(item.health == 0) {
			@@ -162,25 +224,41 @@
			// 默认不显示文本标注
			label.hide()
			// 在全景场景内添加覆盖物
			map.addOverlay(label);
			marker.addEventListener('mouseover', function () {
			console.log(marker,'marker==')
			//鼠标移入动画
			let divElement = document.createElement('div')
			divElement.className = 'before'
			let divElement2 = document.createElement('div')
			divElement2.className = 'after'
			marker.hd.innerHtml = marker.hd.childNodes[0]
			marker.hd.appendChild(divElement)
			marker.hd.appendChild(divElement2)
			marker.hd.className = ''
			marker.hd.className = 'mapBGFault'
			label.show()
			this.map.addOverlay(label);


			marker.addEventListener("click", (e)=> {
			let p = e.target;
			let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
			let infoWindow = new BMap.InfoWindow(str, {
			// width: 320, // 信息窗口宽度
			// height: 200, // 信息窗口高度
			// title: '监控信息', // 信息窗口标题ee
			enableMessage: false, //设置允许信息窗发送短息
			str,
			}); // 创建信息窗口对象
			this.map.openInfoWindow(infoWindow, point); //开启信息窗口
			})
			marker.addEventListener('mouseout', function () {
			marker.hd.className = ''
			label.hide()
			})

			// marker.addEventListener('mouseover', function () {
			// alert(marker)
			// console.log(marker,'marker==')
			// //鼠标移入动画
			// let divElement = document.createElement('div')
			// divElement.className = 'before'
			// let divElement2 = document.createElement('div')
			// divElement2.className = 'after'
			// marker.hd.innerHtml = marker.hd.childNodes[0]
			// marker.hd.appendChild(divElement)
			// marker.hd.appendChild(divElement2)
			// marker.hd.className = ''
			// marker.hd.className = 'mapBGFault'
			// label.show()
			// })
			// marker.addEventListener('mouseout', function () {
			// marker.hd.className = ''
			// label.hide()
			// })

			}
			})
			@@ -248,6 +326,10 @@
			top: -0.4167rem /* -80/192 */;
			bottom: 0;
			right: 0;
			.map{
			width: 100%;
			height: 100%;
			}
			.map_container{
			width: 100%;
			height: 100%;