由于项目使用在交警内网,无法使用百度在线地图.并且由于种种限制使用了望远网百度离线地图.此使用方法实在vue2.0项目上使用,没在vue3上使用过.
1,因为我使用的是望远网的矢量地图,所以需要下载望远网线下工具
http://www.wmksj.com/script.html 打开地址后下载
2,打开地址 http://www.wmksj.com/map.html
打开如上图页面,第一步,选择个性地图矢量地图;第二步,点击编辑json样式,把你在百度地图上设置的个性化样式json复制到内容框里面;第三步,选择你要下载地图卡片的区域;第四步,在地图上右键下载
3.现在需要使用到第一步下载的工具包
找到此文件双击出现上图右边app.输入望远网账号和密码,选择主题为自定义样式,把前面复制的坐标粘贴到输入坐标框上面,选择保存路径,选择webGL矢量,勾选要下载的瓦片,点击开始下载,这样就可以下载到你想要的矢量地图.
如何在vue项目中使用
1.打开http://www.wmksj.com/script.html 选择如下图文件
下载完成解压后找到如下图offlinemap文件,
把offlinemap文件放在vue项目public下的static文件下
2.把我们最先下载好的矢量图片放在offlinemap文件下的 tiles_v文件里面
3,在vue项目入口文件index.html引入如下文件,
4.组件页面使用(暂时没找到支持vue-baidu-map组件的方法)
<template>
<div>
<div>this is a test</div>
<div id="map_container" style="width: 100%; height: 500px;"></div>
</div>
</template>
<script>
export default {
data() {
return{
}
},
mounted () {
this.$nextTick(() => {
this.drawMap()
})
},
methods: {
drawMap () {
var map = new window.BMapGL.Map("map_container"); // 创建Map实例
//初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(new BMapGL.Point(121.56847909,29.8100979777), 17)
//开启鼠标滚轮缩放
map.enableScrollWheelZoom(true);
var navi3DCtrl = new BMapGL.NavigationControl3D(); // 添加3D控件
map.addControl(navi3DCtrl);
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
map.addControl(zoomCtrl);
map.setMapStyleV2({styleJson: stylejson});
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html, body, #map_container{
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
}
.BMap_cpyCtrl {
display: none;
}
.anchorBL {
display: none;
}
.BMap_mask {
z-index: 999;
}
</style>
最后说明一下,一般下载的瓦片数量比较大,我后面使用了nginx代理,这样就不用把这么多的瓦片放在前端.具体方法就是需要后端给你一个nginx地址,只需要把引用地址更换一下就可以,下面是具体更换位置