vue+离线百度地图

首先，使用离线百度地图首先需要准备好瓦片图，由于资源内容较大不适合直接放在项目中，因此使用nginx代理

server {listen       80;server_name  127.0.0.1;location / {root E:/BMap/baidumaps;               //配置本地百度地图离线资源路径}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}

在public目录下新建BMap文件夹存放所需要的静态资源。
具体需要的文件有：

离线地图包 （main.js）
modules文件（百度地图提供的各种图层类，标记类，控件类等等都可以看作是modules，使用这些功能需要加载对应的模块js文件）
css样式
基础图片（包括marker在内的各种图标）
各个控件对应的js文件（比如绘图工具等）
创建mapApi.js文件，配置离线地图的路径指向：

var bmapConfig = {//填写本地的nginx代理地址，指向离线瓦片图资源'tiles_path': 'http://192.168.0.22/maptile', 'home': ''};(function() {//动态获取离线地图包的路径的函数function getHomePath() {var scripts = document.getElementsByTagName('script')var JS__FILE__ = scripts[scripts.length - 1].getAttribute('src')console.log(JS__FILE__)//具体地址视情况需要略作修改return JS__FILE__.substr(0, JS__FILE__.lastIndexOf('/')+1)}//在html页面写入js路径的函数function getScript(src) {document.write('<' + 'script src="' + src + '"' +' type="text/javascript"><' + '/script>')}//配置bmapConfig的home属性，必须bmapConfig.home = getHomePath()     window.BMap_loadScriptTime = (new Date()).getTime()//写入js地址getScript(bmapConfig.home + 'main.js')})()

在public路径下的index.html文件中引入mapApi.js文件
注意要写在< head >标签内，不能写在body标签后，否则加载会出现问题

<script type="text/javascript" src="./BMap/mapapi.js"></script>

在vue文件中创建地图对应的div，并初始化

<template><div id="map" class="baiduMap" />
</template>
<script>
export default {data() {return {map:null,}},mounted() {this.initMap()},methods: {initMap() {this.map = new BMap.Map('map')           //写入地图div的id名称var point = new BMap.Point(116.40323, 39.91522)  // 创建点坐标var marker = new BMap.Marker(point)                    // 创建覆盖物点this.map.addOverlay(marker)                            // 添加覆盖物点this.map.centerAndZoom(point, 13)      // 初始化地图，设置中心点坐标和地图级别this.map.enableScrollWheelZoom()                    // 开启鼠标滚轮缩放}}
}
</script>
<style lang="scss" scoped>
/*引入地图样式*/
@import url("../../../public/BMap/css/DrawingManager_min.css");
@import url("../../../public/BMap/css/bmap.css");
/*给地图元素设置宽高*/
#map{width: 100%;height: 90vh;
}
.anchorBL{display:none;
}
</style>

最终的public目录下BMap相关的文件目录如下，目录结构尽量不要改变，否则会报错

其中modules文件夹内的文件内容如下：

文中提到的文件主要是公司提供的，需要下载的同学可以去本文参考的博客找找，地址如下：
百度离线地图JS API V3.0

vue+离线百度地图相关推荐

vue集合离线百度地图
vue集合离线百度地图 vue.js百度地图api离线发布于 1月9日一.需求场景所谓离线,大概都是项目在内网中使用,无法连接外网,所以需要开发离线地图功能. 在看以下步骤前,先提示这个vue项 ...
html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
qaxwidget传递参数到html,记一次QT使用QAxWidget打开.html文件调用显示离线百度地图不能缩放，自定义图片不能显示解决方法...
主要问题: 一开始用的是在线的,都没有什么问题,自定义图片均可以显示,可是后面试了一下离线百度地图,在qt中运行打开.html文件和在电脑上面直接双击打开此文件显示是有差别的,在qt生成的程序中,地图 ...
Vue引用百度地图API
Vue引用百度地图API 一. 通过官网申请ak 1. 打开百度地图官网,在开发文档中找到JavaScript API 2.点击账号和获取密钥 3.按照页面步骤操作即可二. 通过模块化引入 1. 安 ...
vue使用百度地图获取位置信息
vue使用百度地图获取位置信息最近再做H5页面,就一个单页面,进来的时候,要获取地理位置,上代码 1.使用srcipt不受同源策略的影响,来获取百度api 写在了一个bmap.js里面,onBMap ...
vue整合百度地图（关键字检索）
百度地图文章目录百度地图一.申请百度地图的密钥二.官方示例三.使用vue整合百度地图步骤说明 3.1 效果图: 3.2 方式一 vue脚手架2.0版本引用(不推荐): 3.3 方式二封装成 ...
Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
vue自定义百度地图弹窗
vue自定义百度地图弹窗 1.全局注册方式 1.1 引入百度地图和百度地图自定义弹窗js(自己去百度api里面下载就可以了) <!DOCTYPE html> <html lang=& ...
VUE使用百度地图插件
VUE使用百度地图插件实现功能百度地图的使用相关代码片段实现功能需求: 使用百度地图插件, 实现手动定位, 获取经纬度地址; 设置经纬度定位; 地址搜索百度地图的使用参考 Vue Bai ...
Vue+Echarts+百度地图API
Vue+Echarts+百度地图API 不容易啊,又注册了一个地图账户使用npm安装方式去百度地图官网申请key,也就是地图API密钥AK 在vue项目的public文件夹中的index.html ...

vue+离线百度地图

vue+离线百度地图相关推荐

最新文章

热门文章