百度离线地图-Vue

一. 下载文件

链接: https://pan.baidu.com/s/1N2TDDF2z-D-bfQW5h3ohWg?pwd=3917 提取码: 3917 

         其中modules文件存放的是百度离线地图工具包，titles文件夹存放的是1-18级瓦片地图图片, map.js是百度地图离线api的js文件

        下载瓦片图片：百度离线地图 —— 瓦片地图下载 - 爱码网

        下载map.js文件：地图JS API示例 | 百度地图开放平台 --------打开，点击框中的 js 文件就可以获得百度地图api的 js 代码。点击左下角的图标，整理代码格式。

        ​

 

二. 存放项目位置已经引入

        1.存放在static文件下在index.html 文件引入， 注意map_loader.js文件要在map.js文件之前引入。

         ​

 

三. 百度地图使用

        注意不在使用 new BMapGL ， 而是使用 new BMap。

<script>
export default {
    data() {
        return {
            map: undefined,
            overView: undefined,
            marker: undefined,
            BMap: undefined,
            markerArr: [
                {
                    position: {
                        lng: '116.403963',
                        lat: '39.915119'
                    }
                },
                {
                    position: {
                        lng: '114.838532',
                        lat: '40.818898'
                    }
                },
                {
                    position: {
                        lng: '116.686553',
                        lat: '39.543145'
                    }
                },
                {
                    position: {
                        lng: '115.99599',
                        lat: '39.487724'
                    }
                },
            ]
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.baiduMap()           
        })
    },
    methods: {
        baiduMap(){
            // debugger
            this.BMap = BMap;
            // 创建地图实例
            this.map = new BMap.Map("mapShow");
            // 创建点坐标
            let point = new BMap.Point(116.403963,39.915119);
            //创建标注
            for(var i = 0; i < this.markerArr.length; i++){
                var pt = new BMap.Point(this.markerArr[i].position.lng, this.markerArr[i].position.lat);
                var marker = new BMap.Marker(pt);
                this.map.addOverlay(marker);
            }
            // 初始化地图，设置中心点坐标和地图级别
            this.map.centerAndZoom(point, 9);
            //开启鼠标滚轮缩放
            this.map.enableScrollWheelZoom(false);
            // this.handlePolygon();  // 绘制面
        },
        handlePolygon() {
            // 绘制面
            var circle = new BMap.Circle(new BMap.Point(116.404, 39.915), 50000, {
                strokeColor: 'blue',
                strokeWeight: 2,
                strokeOpacity: 0.5
            });
            this.map.addOverlay(circle);
            circle.addEventListener('click', function(e) {
                console.log('-----e------', e);
            })
        }
    },
}
script>
​