From d8ce22d6c645699ce0b3783860dec1baf0e6d8f5 Mon Sep 17 00:00:00 2001 From: zhangxiaoxu123 <819527061@qq.com> Date: 星期四, 06 七月 2023 08:27:00 +0800 Subject: [PATCH] 离线地图 --- src/pages/show/showIndex/showIndex.vue | 126 +++++++++++++++++++++++++++++++---------- 1 files changed, 94 insertions(+), 32 deletions(-) diff --git a/src/pages/show/showIndex/showIndex.vue b/src/pages/show/showIndex/showIndex.vue index 02ec8b2..501ac81 100644 --- a/src/pages/show/showIndex/showIndex.vue +++ b/src/pages/show/showIndex/showIndex.vue @@ -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() { + let map = new window.BMap.Map("map"); + console.log(map,'map===') + map.centerAndZoom(new BMap.Point(118.183450598,39.6505309225), 11) + //map.enableScrollWheelZoom(true) //榧犳爣婊氬姩缂╂斁 + map.setCurrentCity('鍞愬北') // 璁剧疆鍦板浘鏄剧ず鐨勫煄甯� 姝ら」鏄繀椤昏缃殑 + map.enableScrollWheelZoom(true) //寮�鍚紶鏍囨粴杞缉鏀� + //this.getMapData() + //this.addMarker() + + }, uploadClick(type) { console.log(type,'type===') this.uploadVisiable = true @@ -88,28 +107,67 @@ } }) }, - 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 + let map = new window.BMap.Map("map"); + //let map = new window.BMap.Map("map"); + let BMapLib = window.BMapLib + let mapMarkers = [] + this.mapData = [{ + lon:118.167201, + lat:39.60944, + address: '娌冲寳鐪佸攼灞卞競寮�骞冲尯涓滆タ澶ц199鍙�', + health: '0' + },{ + lon:118.15782, + lat:39.63102, + address: '娌冲寳鐪佸攼灞卞競寮�骞冲尯涓滆タ澶ц199鍙�', + health: '0' + },{ + lon:118.09289, + lat:39.58163, + address: '娌冲寳鐪佸攼灞卞競寮�骞冲尯涓滆タ澶ц199鍙�', + health: '0' + },{ + lon:118.145069, + lat:39.662586, + address: '娌冲寳鐪佸攼灞卞競寮�骞冲尯涓滆タ澶ц199鍙�', + 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,'缁忕含----') @@ -130,7 +188,7 @@ let point = new BMap.Point(longitude,latitude) let marker = new BMap.Marker(point,{icon:myIcon}) map.addOverlay(marker) - map.setZoom(13) + map.setZoom(11) // 娣诲姞榧犳爣鍒掑叆鍧愭爣鐐圭殑鏄剧ず鍐呭 let isH = '' if(item.health == 0) { @@ -163,7 +221,7 @@ label.hide() // 鍦ㄥ叏鏅満鏅唴娣诲姞瑕嗙洊鐗� map.addOverlay(label); - marker.addEventListener('mouseover', function () { + /*marker.addEventListener('mouseover', function () { console.log(marker,'marker==') //榧犳爣绉诲叆鍔ㄧ敾 let divElement = document.createElement('div') @@ -180,7 +238,7 @@ marker.addEventListener('mouseout', function () { marker.hd.className = '' label.hide() - }) + })*/ } }) @@ -248,6 +306,10 @@ top: -0.4167rem /* -80/192 */; bottom: 0; right: 0; + .map{ + width: 100%; + height: 100%; + } .map_container{ width: 100%; height: 100%; -- Gitblit v1.9.1