有關百度地圖信息窗口問題

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;
        },

注意：如果只設置一種的話1-9之間的數字是居中了，但是10之後的的數字就是歪的，所以要根據數字的長短來設置大小