在最近的一个项目中由于需要使用到离线地图，在网上搜索发现了bigemap这一款能够简单部署离线地图的软件，在这里给大家演示一下我的用法。

软件使用

离线地图服务器_快速搭建离线地图服务_离线地图软件开发

点击立即下载后跳转到下载页面根据需求进行下载，我选择的是win64版本

下载完成并进入以后即可看见使用界面

选择添加离线地图(2D)进入添加地图界面，然后将你下载的地图添加进入（我这里是通过配套的Bigemap Gis Office下载的地图）

添加完成后即可在离线服务中看到添加的离线地图服务

点击开发使用就能看到如何在项目中使用，官网也有一些案例可以进行查看

开发使用

在Vue中使用需要在项目中加入map.js文件并在页面中引入

//map.js
// 换成本地的服务器js文件即可
let script = ['http://localhost:9000/bigemap.js/v2.1.0/bigemap.js',//如果有更多的JS要引用 ，也一起放到这个数组中
];
export default new Promise(resolve => {let link = document.createElement("link");link.rel = "stylesheet";link.async = false;// 换成本地的服务器css文件即可link.href = "http://localhost:9000/bigemap.js/v2.1.0/bigemap.css";document.head.appendChild(link);let loads = script.map(v => {let script = document.createElement("script");script.type = "text/javascript";script.async = false;script.src = v;document.head.appendChild(script);return script;});let end = loads.pop();end.onload = resolve;});

//需要使用的页面
<div style="width: 100%; height: 800px" id="map"></div>
<script>
import maps from '../../map';
mounted(){let BM;maps.then(() => {BM = window.BM;BM.Config.HTTP_URL = 'http://localhost:9000';let map = BM.map('map', '在软件中开发使用中的地图id', {center: [37.74539566040039, 119.09660339355469],zoom: 5,zoomControl: true,});map.fitBounds([[37.638702392578125, 118.89404296875],[37.85208511352539, 119.29916381835938],]);
}</script>

这样一个简单的离线地图服务就搭建完成啦，你们可以在官网中的开发文档中查阅进行更多的操作。

在Vue中Bigemap离线地图的基本使用相关推荐

基于Vue的高德离线地图开发--省市县
基于Vue的高德离线地图离线地图优势环境需要下载地图离线资源包本项目功能具体代码离线地图优势高德地图接口,个人每天免费调用次数为500次,渲染速度受网络波动影响,又或许项目部署在局域网, ...
离线地图开发--BigeMap(离线地图服务器构建，支持百度、谷歌、高德等地图)
前言: 目前高德地图以及百度谷歌等地图对Web端离线功能支持不太友好(甚至没有离线地图功能),这致使我们在进行内网服务器使用的地图开发时非常的不便利,因此在进行离线地图开发时我们通常选择引入第三方地图 ...
vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
在Vue中使用高德地图
在Vue中使用高德地图一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图二.根据关键词搜 ...
【VUE】在vue中使用google地图
文章目录前言前期准备一.获取google地图的key 二.使用步骤 1.安装google官方依赖 2.使用googlemap 其他小方法1:设置marker 其他小方法2:设置infowindo ...
Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
vue中调用百度地图获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度拖动小红标获取经纬度关键词查询获取经纬度前期准备 ...
Vue中使用百度地图做路径分析并根据起终点坐标模拟道路里程桩
1.我们先要在vue中引入百度地图的API 第一步:在vue中的index.html文件中加上一个script标签: <script type="text/javascript&quo ...
Vue中使用百度地图
安装 npm $ npm install vue-baidu-map --save cdn <script src="https://unpkg.com/vue-baidu-map&q ...

在Vue中Bigemap离线地图的基本使用

软件使用

开发使用

在Vue中Bigemap离线地图的基本使用相关推荐

最新文章

热门文章