文章目录
前言
一、离线地图准备
1、使用离线地图时一般需要先下载瓦片图,这里使用全能电子地图下载器
2、将下载的瓦片图放到服务器上,或者本地启个nginx测试使用
3、全能电子地图下载器下载链接(百度网盘)
二、百度地图离线地图实现
1、一些简单的功能都可以离线实现,比如点、点聚合之类
2、实现上面功能前还需要一些基础的配置才行
3、最重要的就是demo了,马上呈现(百度网盘)
总结
前言
内网环境使用地图时只能使用离线地图,还有就是解决百度地图有时候一直提示“未获取百度地图商用版权”问题,所以来尝试使用离线地图
一、离线地图准备
1、使用离线地图时一般需要先下载瓦片图,这里使用全能电子地图下载器
注意:因为使用的是百度地图,地图选择时请选择百度地图,一般地图级别到15级就够用了,当然地图级别越高地图也可以放大更多,瓦片图占用存储空间也越大。另外瓦片图下载完成后不要拼接地图,要选择否;
2、将下载的瓦片图放到服务器上,或者本地启个nginx测试使用
确保瓦片图可以正常访问即可
3、全能电子地图下载器下载链接(百度网盘)
链接: https://pan.baidu.com/s/19M-u2k6YsbTHvjQJVYSo4Q 提取码: 1FFS
二、百度地图离线地图实现
1、一些简单的功能都可以离线实现,比如点、点聚合之类
实现代码如下:
export default {
name: 'HelloWorld',
data() {
return {
// 地图实例
map: null,
// 点实例
mk: null
}
},
created() {
// 加载地图
this.$nextTick(() => {
this.initMap()
})
},
methods: {
// 获取地图
initMap() {
// 内网使用-地图对象-在public/index.html引入文件
let BMap = window.BMap;
// 创建Map实例
this.map = new BMap.Map('container');
// 使用卫星地图
// this.map.setMapType(BMAP_HYBRID_MAP);
// 地图中心点-经纬度决定我们加载哪里的地图
var Point = new BMap.Point(113.664653, 34.75291);
// 初始化地图中心点和放大级别
this.map.centerAndZoom(Point, 11)
// 限制地图放大等级-为什么限制
// 1.因为内网时我们访问不到公网百度地图数据资源
// 2.同时这里地图放大等级也对应着我们下载的瓦片图资源
this.map.setMaxZoom(15)
//开启鼠标滚轮缩放
this.map.enableScrollWheelZoom(true)
// 添加中心标注点
// this.mk = new BMap.Marker(Point)
// this.map.addOverlay(this.mk);
this.setMarkerClusterer();
this.getBoundaryss('郑州', this.map)
},
// 点聚合
setMarkerClusterer() {
let BMap = window.BMap;
const BMapLib = window.BMapLib;
// 创建Marker标注
var pt1 = new BMap.Point(113.673707,34.761689);
var marker1 = new BMap.Marker(pt1