离线地图

zhangxiaoxu123

2023-07-06 d8ce22d6c645699ce0b3783860dec1baf0e6d8f5

 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%;