有关百度地图信息窗口问题_百度地图点弹窗一直显示-CSDN博客

本文链接：https://blog.csdn.net/weixin_41655541/article/details/106192653

1.百度地图添加自定义信息窗口的时候，点击地图本身的标注会有百度自己的信息窗口弹出，如图所示

 <li v-for="(item,index) in nutList" :key="index" class="listitemtwo" @click="nutClick(item,index)" ref='indexnuxt'>
</li>

如何解决百度默认窗口会弹出的问题（关闭默认地图POI事件）：let map = new window.BMap.Map('mapContainer',{enableMapClick:false});

初始化地图的时候加上一句：{enableMapClick:false} 即构造地图时关闭底图可点击功能

2.在地图的实现自定义信息窗口

let sContent ='<div class=\'infoWindow\' style=\'width:200px;\'>' +
                            '<p style=\'color:#000000\'>'+orgName+'</p>'+
                            '<p style=\'padding:5px 0;color:#666666;font-size:14px;\'><span style=\'color:#666666;margin:0 5px 0 0\'>xxx范围:</span>' + sendingAttribute +'</p>'+
                            '<p style=\'padding:5px 0;color:#666666;font-size:14px;\'><span style=\'color:#666666;margin:0 5px 0 0\'>xxx联系方式:</span>' +phone +'</p>'+
                            '<p style=\'font-size:14px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;color:#666666\'><span style=\'color:#666666;margin:0 5px 0 0\'>网点地址:</span><span id="addressCopy">' + detailAddress +'</span><input id="mapbtn"  type="button" value="复制" style=\'cursor: pointer;border:1px solid #A076F4;width:30px;height:20px;background-color:#A076F4;color:#fff;border-radius: 4px;margin-left:5px;font-size:12px;\' data-sid="'+ detailAddress +'"  οnclick="return devDisplay()"/></p>'+
                            '<div>';
            let infoWindow = new BMap.InfoWindow(sContent);
self.mapB.openInfoWindow(infoWindow, point);

3.在信息窗口里实现复制功能

因为是原生的所以用的也是js原生的方法

 let self=this;
            if (!self.infoWindow.isOpen()) {
                //如果没有打开，则监听打开事件，获取按钮，添加事件
                self.infoWindow.addEventListener('open', function () {
                    document.getElementById('mapbtn').onclick = function (e) {
                        let addressCopy=document.getElementById('txt1');
                        addressCopy.select(); // 选择对象用户定义的代码区域
                        document.execCommand('Copy'); //原生copy方法执行浏览器复制命令
                        if(document.execCommand('copy', false, null)){
                            self.openSucess('复制成功！');
                        } else{
                            self.openError('复制失败！');
                        }
                    };
                });
            } else {//如果已经打开，直接获取按钮，添加事件
                document.getElementById('mapbtn').onclick = function (e) {
                    let addressCopy=document.getElementById('txt1');
                    addressCopy.select(); // 选择对象用户定义的代码区域
                    document.execCommand('Copy'); //原生copy方法执行浏览器复制命令
                    if(document.execCommand('copy', false, null)){
                        self.openSucess('复制成功！');
                    } else{
                        self.openError('复制失败！');
                    }
                };
            }

注意：在这里用原生实现复制功能一定要用input按钮形式，点击按钮用一个input框，在用一个textera框来放置要复制的内容,需要注意的是在点击input按钮之前一点更要把要复制的内容先放置在textera框里，点击按钮的时候才会一次就复制了。否则就会出现点击一次，再点击一次才会复制

4.实现点击地图上的点，左侧列表能够滚动到相应的位置

<1>首先在循环的列表之上加上ref

    <li v-for="(item,index) in nutList" :key="index" class="listitemtwo" @click="nutClick(item,index)" ref='indexnuxt'>
</li>

<2>在地图的点击事件中获取列表的第index个li

 let anchor = this.$refs.indexnuxt[index];
                anchor.scrollIntoView({block: 'end', inline: 'nearest',behavior:'smooth'});

科普下scrollIntoView（）方法的用法，戳链接 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

5.高德地图坐标转百度地图坐标

gps_bgps(gg_lng, gg_lat) {
            let X_PI = Math.PI * 3000.0 / 180.0;
            let x = gg_lng, y = gg_lat;
            let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
            let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
            let bd_lng = z * Math.cos(theta) + 0.0065;
            let bd_lat = z * Math.sin(theta) + 0.006;
            return {
                bd_lat: bd_lat,
                bd_lng: bd_lng
            };
        }

6.如何在地图的标注上添加数字

loopaddWindowinfo(result){
            this.active=0;
            let self=this;
            self.mapB.clearOverlays(); //清除地图上所有覆盖物
            let marketList=[];
            let markersList = [];
            for (let i = 0; i < result.length; i++) {
                let point = new window.BMap.Point(Number(result[i].lng),Number(result[i].lat));
                let pointone = new window.BMap.Point(Number(result[0].lng),Number(result[0].lat));
                let marker = new window.BMap.Marker(point,{ icon: self.zIcon });  // 创建标注
                marker.setZIndex(9);
                self.mapB.centerAndZoom(pointone, 12);
                marker.setLabel(self.getNumberLabel(i+1));
                self.mapB.addOverlay(marker);
                self.addClickHandler(marker,result[i],i);//给marker上添加数字
                marketList.push(marker);
            }
            self.markers=marketList;
            self.singleaddMarker(result[0],0);//默认窗口
        },    

getNumberLabel(number) {
            let offsetSize = new BMap.Size(0, 0);
            let labelStyle = {
                color: '#fff',
                backgroundColor: 'none',
                border: '0'
            };
            switch((number + '').length) {
            case 1:
                labelStyle.fontSize = '14px';
                offsetSize = new BMap.Size(11, 10);
                break;
            case 2:
                labelStyle.fontSize = '12px';
                offsetSize = new BMap.Size(9, 10);
                break;
            case 3:
                labelStyle.fontSize = '10px';
                offsetSize = new BMap.Size(7, 10);
                break;
            default:
                break;
            }
 
            let label = new BMap.Label(number, {
                offset: offsetSize
            });
            label.setStyle(labelStyle);
            return label;
        },