vue引入百度离线地图

vue中引入百度离线地图

前几天在vue中引入了在线百度地图，并根据demo测试，写了几种方法《vue中引入在线百度地图》，今天就介绍如何在vue中引入百度离线地图。

1、首先要准备下载百度离线地图所需的文件，文件地址：vue中引入百度离线地图所需文件
里面缺少了bmap_offline_api_v3.0_min.js，自己可以百度查询下载或者留言发邮箱

在这里就不介绍百度离线地图下载方式了，自己百度查询

2、其次将所需要的文件引入到index.html

     <script type="text/javascript" src="static/map_load.js"></script><script type="text/javascript" src="static/bmap_offline_api_v3.0_min.js"></script><script type="text/javascript" src="static/map_plus.js"></script><script type="text/javascript" src="static/map_city.js"></script>

上述目录tiles中，为百度离线地图解压包，也就是百度离线瓦片图（不建议将百度离线地图放入static文件下，主要是因为当文件过大时，在npm run dev的时候会出现内存溢出 ），所以建议用nginx代理：

server {listen       8866;server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;location / {root  E:\BaiduMap;                  #放入你百度离线的路径#index  index.html;}#error_page  404              /404.html;# redirect server error pages to the static page /50x.htmlerror_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}

如果使用nginx代理，打开bmap_offline_api_v3.0_min.js文件，找到6517行将代理地址拷贝进行替换，这里我进行修改，可以替换下面代码，将代理地址添加即可

var test2=("你nginx所代理的百度地图文件地址"+b+"/" + (e + "").replace(/-/gi, "M") + "/" + (a + "").replace(/-/gi, "M") + ".png").replace(/-(\d+)/gi, "M$1");return test2;

如上述，假如电脑IP地址为：10.82.25.25，代理地址就可以为：10.82.25.25:8866/（记住/这一斜杠别忘添加）

3.新建map.vue文件

4、创建百度地图，在这里为了调用map的其他方法（如画圆、测距等），我把map存一个所谓的全局变量，方便调用

<template><div id='MapBox'><div  class='baiduMap' id='mapShow'></div></div>
</template>
<script>
import "../../static/map_load.js"
export default {name:'baiduMap',data() {return{map:undefined,    overView:undefined,marker:undefined,}},mounted(){this.baiduMap();},methods:{baiduMap:function(){var me=this;me.map = new BMap.Map("mapShow")var point = new BMap.Point(114.065537,22.553321);  // 创建点坐标  me.marker=new BMap.Marker(point);me.overView=new BMap.OverviewMapControl({isOpen: true});//缩略地图控件。me.map.addControl(me.overView);me.map.addOverlay(me.marker);//添加一个标注me.map.centerAndZoom(point, 13);                 // 初始化地图，设置中心点坐标和地图级别  me.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放  }}
}
<style>
#MapBox {width: 100%;height: 100%;padding: 10px;position: relative;}/* 地图 */
.baiduMap{height: 100%;width: 100%;
}  /* 去除地图上，左下字体标注 */
.anchorBL{display:none;
}
</style>

 /* 去除地图上，左下字体标注 */
.anchorBL{display:none;
}

参考来源：
百度离线地图JS API V3.0

vue引入百度离线地图相关推荐

vue整合百度离线地图api3.0
文章目录前言一.场景二.操作步骤 1.引入3.0js文件 2.创建map_load.js 3.修改bmap_offline_api_v3.0_min.js文件 3.1屏蔽ak验证 3.2加载mo ...
html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
vue引入百度地图BMapGL，获取天地图根据名称显示坐标定位信息
1. 解决提示:解决调用百度地图API弹出提示 "百度未授权使用地图API,可能是因为您提供的密钥不是有效的百度LBS开放平台密钥"的方法百度官网生成ak: https://lb ...
解决Vue引入百度地图JSSDK：BMap is undefined 问题
原文链接:解决Vue引入百度地图JSSDK:BMap is undefined 问题百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入异步加载但vue项目中仅某一两个 ...
vue百度离线地图v3.0---初始化地图
1. 百度离线文件百度网盘下载:https://pan.baidu.com/s/1Lz5BGeKD6lr4x36hRLyepQ 提取码:rnij 2. 百度离线地图瓦片下载器百度网盘下载:http ...
web百度离线地图开发（详细教程）2019
web百度离线地图开发(详细教程) 需求情景主要参考开发步骤一.JS API文件下载二.修改API文件 1.屏蔽ak验证 2.设置引用本地资源路径 3.下载本地资源 4.引用本地资源三.加载 ...
百度离线地图示例之三：矢量图
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...
vue2+百度离线地图实现多车辆行驶动态轨迹
vue2+百度离线地图实现行驶多车辆动态轨迹实现多多车辆实时轨迹监控,每个10秒监测一次接口,进行动态追加.(前端实现,如果数量庞大的车辆移动,很消耗性能) 百度离线地图引入方法查看: vue项目实 ...
【web百度离线地图开发】原生实现百度地图离线版速览
需求如下,在基于在线地图的基础上展现离线地图 //在线用以下插件展示"vue-baidu-map": "^0.21.22", vue中展示离线地图第一步:把配 ...
百度离线地图示例之四：热力图
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...

vue引入百度离线地图

vue中引入百度离线地图

vue引入百度离线地图相关推荐

最新文章

热门文章