地图标点

zhangxiaoxu123

2023-07-06 72c9ddc3256c4cd4c3db2bd1fb2510bc29bb2515

 src/pages/show/showIndex/showIndex.vue

@@ -61,7 +61,7 @@
                uploadVisiable:false,  //上传文件弹框
                timer:null,
                mapData:[],
                map:{}
                map:''
            }
        },
        destroyed() {
@@ -82,14 +82,14 @@
        },
        methods: {
            initMap() {
                let map = new window.BMap.Map("map");
                this.map = new window.BMap.Map("map");
                console.log(map,'map===')
                map.centerAndZoom(new BMap.Point(118.183450598,39.6505309225), 11)
                this.map.centerAndZoom(new BMap.Point(118.183450598,39.6505309225), 11)
                //map.enableScrollWheelZoom(true)    //鼠标滚动缩放
                map.setCurrentCity('唐山')   // 设置地图显示的城市 此项是必须设置的
                map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
                this.map.setCurrentCity('唐山')   // 设置地图显示的城市 此项是必须设置的
                this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
                //this.getMapData()
                //this.addMarker()
                this.addMarker()

            },
            uploadClick(type) {
@@ -125,9 +125,8 @@

            addMarker() {
                let BMap = window.BMap
                let map = new window.BMap.Map("map");
                this.map.clearOverlays() // 清除地图上所有覆盖物
                //let map = new window.BMap.Map("map");
                let BMapLib = window.BMapLib
                let mapMarkers = []
                this.mapData = [{
                    lon:118.167201,
@@ -137,17 +136,22 @@
                },{
                    lon:118.15782,
                    lat:39.63102,
                    address: '河北省唐山市开平区东西大街199号',
                    address: '河北省唐山市路南区新华西道76号4层',
                    health: '0'
                },{
                    lon:118.09289,
                    lat:39.58163,
                    address: '河北省唐山市开平区东西大街199号',
                    address: '河北省唐山市丰南区正苑大街7号',
                    health: '0'
                },{
                    lon:118.145069,
                    lat:39.662586,
                    address: '河北省唐山市开平区东西大街199号',
                    address: '河北省唐山市丰润区曹雪芹大街17号',
                    health: '0'
                },{
                    lon:118.45153,
                    lat:39.74049,
                    address: '河北省唐山市古冶区永盛路',
                    health: '0'
                }]
                // this.mapData.forEach(item => {
@@ -187,8 +191,8 @@

                        let point = new BMap.Point(longitude,latitude)
                        let marker = new BMap.Marker(point,{icon:myIcon})
                        map.addOverlay(marker)
                        map.setZoom(11)
                        this.map.addOverlay(marker)
                        this.map.setZoom(11)
                        // 添加鼠标划入坐标点的显示内容
                        let isH = ''
                        if(item.health == 0) {
@@ -220,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()
                        // })

                    }
                })