公司近段时间在搞离线地图，开发离线地图我目前知道的有两种方法：

1、把全国每个城市经纬度坐标拿到利用highcharts渲染到页面
2、下载地图瓦片使用百度、高德…读取瓦片数据渲染到页面

今天主要说一下百度地图加载离线瓦片并标点、连线

1、首先要下载百度离线文件

2、使用瓦片下载器下载需要的瓦片、下载后可以把瓦片放到本地也可以放到服务器、我把百度离线文件和瓦片下载器放到网盘上有需要的可以下载（下载后可直接使用）

链接：https://pan.baidu.com/s/14WrA1Gtx84qMh-pZVbT3jw
提取码：6666

3、瓦片做nginx代理

4、把百度离线文件放到static文件夹下、并修改百度离线文件map3.0_init.js（如果放到本地可直接写文件目录）

5、在index.html文件中引入离线文件

6、渲染地图并标点、连线


<template><div class="Hbox" :style="{width:(Mapwidth-230)+'px'}" id="Hbox"><div class="mapBOX" id="GDcontainer"></div></div>
</template><script>
var map;
export default {data() {return {Mapwidth: document.documentElement.clientWidth,mapList: [],};},mounted() {this.initAMap()this.init()},created() {},watch: {Mapwidth: (val) => {var newWidth = document.getElementById("Hbox")if (newWidth) {newWidth.style.width = Number(val) + 'px'}},},methods: {initAMap() {// 百度地图API功能map = new BMap.Map("GDcontainer", { minZoom: 0, maxZoom: 13 }); // 创建Map实例（minZoom、maxZoom：设置地图最小、最大缩放级别）map.centerAndZoom(new BMap.Point(107.505583, 26.317692), 10); // 设置中心点//先清除所有内容map.clearOverlays();map.enableScrollWheelZoom();     //开启鼠标滚轮缩放},init() {this.mapList = [{ lng: '107.505583', lat: '-26.317692', listType: 1 },{ lng: '107.51775', lat: '-26.365743', listType: 1 },{ lng: '107.524074', lat: '-26.399921', listType: 1 },{ lng: '107.549371', lat: '-26.452722', listType: 4 },{ lng: '107.563168', lat: '-26.488426', listType: 5 },{ lng: '107.570642', lat: '-26.50705', listType: 4 },]let newdatas = []this.mapList.forEach((item, index) => {if (item.lat != null) {//---------------------------------标点开始---------------------------------let point = new BMap.Point(item.lng, 0 - (item.lat))let myIcon = new BMap.Icon(`require('../../assets/svg/point.svg')`, new BMap.Size(23, 27));myIcon.setImageSize(new BMap.Size(23, 28));let label = new BMap.Label(`添加文本`, {       // 创建文本标注position: point,                          // 设置标注的地理位置offset: new BMap.Size(-6, -11)           // 设置标注的偏移量})let marker = new BMap.Marker(point, { icon: myIcon })map.addOverlay(marker)map.addOverlay(label)label.setStyle({                              // 设置label的样式color: '#000',fontSize: '10px',border: '0px solid #1E90FF',background: 'transparent',})//---------------------------------标点结束---------------------------------//---------------------------------连线开始---------------------------------newdatas.push(new BMap.Point(item.lng, 0 - (item.lat)),)//---------------------------------连线结束---------------------------------}})var polyline = new BMap.Polyline(newdatas, { strokeColor: "#F59A23", strokeWeight: 2, strokeOpacity: 1 });map.addOverlay(polyline);}},
}
</script>
<style lang='scss' scoped>
.mapBOX {height: 100%;width: 100%;
}
</style>

7、效果图

vue百度地图加载离线瓦片（包含百度离线文件+瓦片下载器）相关推荐

cesium加载百度地图_Cesium专栏-百度地图加载（附源码下载）
Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...
百度地图加载不出来，问题根源在SHA1
最近做的项目用到了百度地图,结果开发过程中一切正常,但是最后打包的程序的地图却加载不出来,尝试了好多办法,最后还是没有成功.最后找出来问题的根源,都是SHA1惹的货. 首先获取SHA1,这里推荐两种办 ...
华为手机android7.0应用中百度地图加载不出来解析包时出现问题
第一次写博客,写的不好请各路大神多多海涵. 之前写的app在华为手机上出现了问题,android版本是7.0.据统计,android7.0和7.1的市场份额分别是:安卓7.0的份额为0.5%,安卓7. ...
java百度地图离线LBS_Web版百度地图加载离线瓦片
注:本文参考网络教程,瓦片也是通过网络下载.向原作者致敬!原作地址:http://download.csdn.net/download/dkm8873/9233731 原作版本已久,由于代码混淆压缩, ...
jsp 百度地图离线使用_Web版百度地图加载离线瓦片
注:本文参考网络教程,瓦片也是通过网络下载.向原作者致敬!原作地址:http://download.csdn.net/download/dkm8873/9233731 原作版本已久,由于代码混淆压缩, ...
解锁Vue百度地图加载的N种姿势
加载方法最近在使用Vue开发百度地图功能,首先就碰到了百度地图Api如何引入的问题,查了查,网上有N种加载方案,简单梳理了下,大体可以分为以下三种: 一.简单粗暴直接引入法第一步.在index.h ...
百度地图加载空白颜色_详细解析百度收录和百度排名关系
虽然很多人说收录和排名没有很大的关系,包括百度官方也是这样说的,但总而言之,要想排名,必须要先收录,所以百度收录和百度排名是有直接关系,并且关系还不小,那么今天我来教大家用几个小方法,可以解决网站快速 ...
百度地图加载过慢问题
参考百度的建议: 常见问题7.标注过多时,地图在IE中速度会下降,尤其是IE6.如何解决? 回复: 标注数据量请控制在150个以内,以保持高性能. 标注数量在260以内,可以使用自定义覆盖物实现. 标 ...
百度地图加载海量标注性能优化策略
在上一篇博客中关于Vue表单验证的话题里,我提到了这段时间在做的城市配载功能,这个功能主要着眼于,如何为客户提供一条路线最优.时效最短.装载率最高的路线.事实上,这是目前物流运输行业智能化.专业化的一 ...
swift 百度地图加载与百度地图电子围栏加载
最近在写百度地图电子围栏加载,研究源码,也花了一些时间. 1.百度电子围栏整体思路 1)用户创造实体,赋予监控权限 2)对该实体创造电子围栏,有服务端和本地端两种方式,先创造实体,上传到的服务器中.在 ...

vue百度地图加载离线瓦片（包含百度离线文件+瓦片下载器）

公司近段时间在搞离线地图，开发离线地图我目前知道的有两种方法：

今天主要说一下百度地图加载离线瓦片并标点、连线

1、首先要下载百度离线文件

2、使用瓦片下载器下载需要的瓦片、下载后可以把瓦片放到本地也可以放到服务器、我把百度离线文件和瓦片下载器放到网盘上有需要的可以下载（下载后可直接使用）

3、瓦片做nginx代理

4、把百度离线文件放到static文件夹下、并修改百度离线文件map3.0_init.js（如果放到本地可直接写文件目录）

5、在index.html文件中引入离线文件

6、渲染地图并标点、连线

7、效果图

vue百度地图加载离线瓦片（包含百度离线文件+瓦片下载器）相关推荐

最新文章

热门文章

vue百度地图加载离线瓦片（包含百度离线文件+瓦片下载器）

公司近段时间在搞离线地图，开发离线地图我目前知道的有两种方法：

今天主要说一下百度地图加载离线瓦片并标点、连线

1、首先要下载百度离线文件

2、使用瓦片下载器下载需要的瓦片、下载后可以把瓦片放到本地也可以放到服务器、我把百度离线文件和瓦片下载器放到网盘上 有需要的可以下载（下载后可直接使用）

3、瓦片做nginx代理

4、把百度离线文件放到static文件夹下、并修改百度离线文件map3.0_init.js（如果放到本地可直接写文件目录）

5、在index.html文件中引入离线文件

6、渲染地图并标点、连线

7、效果图

vue百度地图加载离线瓦片（包含百度离线文件+瓦片下载器）相关推荐

最新文章

热门文章

2、使用瓦片下载器下载需要的瓦片、下载后可以把瓦片放到本地也可以放到服务器、我把百度离线文件和瓦片下载器放到网盘上有需要的可以下载（下载后可直接使用）