百度离线地图-Vue

最新推荐文章于 2024-09-20 19:56:55 发布

尚梦

最新推荐文章于 2024-09-20 19:56:55 发布

阅读量1.1k

点赞数 2

文章标签：前端 vue.js javascript 百度

本文链接：https://blog.csdn.net/qq_42164957/article/details/126931954

版权

一. 下载文件

链接: 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。

<template>
    <div class='baiduMap' id='mapShow' ref="mapShow"></div>
</template>

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

<style>
.baiduMap {
  width: 100%;
  height: 100%;
}

.anchorBL {
  display: none;
}
</style>