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