百度离线地图使用_高德地图网页版

百度离线地图使用_高德地图网页版前言介绍:主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本,实现的功能点概要如下:地图示例:地图展示同时加载两个地图设置地图最大及最小级别移动地图缩放地图拖拽地图设置地图显示范围获取地图显示范围测距地图控件:工具条、比例尺控件地图类型缩略图控件添加版权控件添加自定义控件覆盖物示例:添加/删除覆盖物折线上添加方向箭头添加动画标注点设置点的新图标设

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

前言介绍:

主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末有个人微信二维码,有不完善的地方,可加微信一起探讨交流,实现的功能点概要如下:

地图示例:

地图展示
同时加载两个地图
设置地图最大及最
小级别移动地图
缩放地图
拖拽地图
设置地图显示范围
获取地图显示范围
测距

地图控件:

工具条、比例尺控件 地图类型
缩略图控件
添加版权控件
添加自定义控件

覆盖物示例:

添加/删除覆盖物
折线上添加方向箭头
添加动画标注点
设置点的新图标
设置点是否可拖拽 设置线、面可编辑
设置覆盖物的显示与隐藏
文本标注
带文字标签的覆盖物
获取覆盖物的信息
添加多个标注点
从多个点删除指定点
加载闪烁点
加载海量点 添加弧线
画椭圆
添加自定义覆盖物
点聚合
添加/删除地面叠加层
热力图功能示例
矢量图
添加自定义控件

信息窗口示例:

纯文本的信息窗口
添加复杂内容的信息窗口
给多个点添加信息窗口
获取信息窗口的信息

右键菜单示例:

给地图添加右键菜单
给覆盖物添加右键菜单

鼠标操作示例

设置地图默认的鼠标样式
鼠标滚轮缩放地图
鼠标拖拽地图
鼠标测距
单击获取点击的经纬度
鼠标绘制工具

添加层示例:

添加清华校园微观图
自定义网格

事件示例

图块加载完毕
地图单击事件
给覆盖物注册事件
传递事件参数
为多个点注册单击事件
注销事件

除了离线了官方API外,还对一些操作工具类进行了离线(总计11个工具),比如:

Heatmap

作用:热力图

SearchInfoWindow

作用:百度地图样式”的信息窗口工具。该工具为用户提供带搜索框的信息窗口,该窗口内容可自由定制多种风格。同时,用户可以将信息窗口标题以短信方式发送到手机上。

MarkerClusterer

作用:多标注聚合器。此工具解决加载大量点要素到地图上造成缓慢,且产生覆盖现象的问题。

RectangleZoom

作用:区域缩放工具。此工具将根据用户拖拽绘制的矩形区域大小对地图进行放大或缩小操作。

TextIconOverlay

作用:自定义覆盖物工具。用户可以使用该工具在地图上添加文字和图标样式的覆盖物。

LuShu

作用:路书,轨迹运动工具。此工具用以实现marker沿路线运动,并有暂停等功能。

GeoUtils

作用:几何运算工具。此工具提供判断点与矩形、 圆形、多边形线、多边形面的关系,并提供计算折线长度和多边形的面积的公式。

DistanceTool

作用:测距。

DrawingManager

作用:矢量图绘制。

代码示例实现:

1、百度地图离线API下载地址
2、百度地图离线工具类集合下载地址

html引用示例代码如下:

可以看出全部是离线引用,当然哪些工具类可以在组件内用的时候再引用也可以

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>百度离线地图</title>
<!-- 百度地图3.0 API Begin -->
<script src="static/offlineMapLib/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="static/offlineMapLib/map3.0_init.js"></script>
<script type="text/javascript" src="static/offlineMapLib/map3.0.js"></script>
<script type="text/javascript" src="static/offlineMapLib/layer.js"></script>
<script type="text/javascript" src="static/offlineMapLib/demo.js"></script>
<!-- 热力图 -->
<script type="text/javascript" src="static/offlineMapLib/library/Heatmap_min.js"></script>
<!-- 画弧线 -->
<script type="text/javascript" src="static/offlineMapLib/library/CurveLine.min.js"></script>
<!-- 点聚合 -->
<script type="text/javascript" src="static/offlineMapLib/library/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="static/offlineMapLib/library/MarkerClusterer_min.js"></script>
<!-- 测距 -->
<script type="text/javascript" src="static/offlineMapLib/library/DistanceTool_min.js"></script>
<!-- 鼠标绘制 -->
<link rel="stylesheet" href="static/offlineMapLib/library/DrawingManager_min.css" />
<script type="text/javascript" src="static/offlineMapLib/library/DrawingManager_min.css"></script>
<!-- 百度地图3.0 End -->
</head>
<body>
<div id="app"></div>
</body>
</html>

Jetbrains全家桶1年46,售后保障稳定

组件内示例代码如下:

<!-- 地图展示 -->
<template>
<div style ="width:100%;height:100%">
<div id="allmap"></div>
</div>
</template>
<script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
export default { 

//import引入的组件需要注入到对象中才能使用
components: { 
},
data() { 

//这里存放数据
return { 

offlineMapObj: { 

map: { 
},
point: { 
},
points: [],
heatmapOverlay: { 
},
},
};
},
//监听属性 类似于data概念
computed: { 
},
//监控data中的数据变化
watch: { 
},
//方法集合
methods: { 

initMap() { 

// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 6); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(
new BMap.MapTypeControl({ 

mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
})
);
//离线不支持
//map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
setTimeout(function() { 

layer.msg("鼠标滚轮缩放", { 
 offset: "b" });
}, 1000);
},
},
//生命周期 - 创建完成(可以访问当前this实例)
created() { 

},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() { 

this.initMap();
},
beforeCreate() { 
}, //生命周期 - 创建之前
beforeMount() { 
}, //生命周期 - 挂载之前
beforeUpdate() { 
}, //生命周期 - 更新之前
updated() { 
}, //生命周期 - 更新之后
beforeDestroy() { 
}, //生命周期 - 销毁之前
destroyed() { 
}, //生命周期 - 销毁完成
activated() { 

}, //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
#allmap { 

width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
font-family: "微软雅黑";
}
</style>

地图实现效果展示:
在这里插入图片描述
下一篇:百度离线地图示例之二:测距
系列文章后续一直有进行更新,有不完善的地方,可加微信一起交流:
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/198331.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • PHP工厂模式的好处

    PHP工厂模式的好处 顾名思义,工厂是可以加工零件的,PHP程序中的工厂模式也有相同的功能,可以方便的使用一个静态的工厂方法来实例化某一个类,那么这样做的好处是什么呢?初学PHP的设计模式,以下是我个人的理解 一般我们实例化一个类会给它一些参数以便在其构析的时候可以根据不同的参数反馈出我们需要的结果。举例说明,以下是一个User类,非常简单:01.02.      03.    int

  • 交通灯控制逻辑电路设计实验报告_交通灯控制电路的设计报告

    交通灯控制逻辑电路设计实验报告_交通灯控制电路的设计报告交通灯控制逻辑电路设计这是一个数电实验,交通灯,如果使用FPGA或者单片机来完成的话,会简单很多,这里采用的是使用常规的计数器,触发器,门电路等基本器件搭建,扩展部分可以完成总通行时间在100s内任意设置,红、黄、绿灯亮的时间长短之和在100s内任意设置,其实想要超过100s只需要扩展相应的计数器,以及门电路即可,限制功能的往往是资源;一、选题背景1.1、应用背景为了确保十字路口的车辆顺利、畅通地通过,往往都采用自动控制的交通信号灯来进行指挥。其中红灯(R)亮表示该条道路禁止通行;黄灯(Y)亮表示停

  • browserify使用「建议收藏」

    browserify使用「建议收藏」一、简介browserift是javascript编译工具,可以通过预编译方式,将后端的node模块加入javascript中,进而可在前端浏览器上执行。二、安装1、安装nodejs和npmnodejs是node的运行环境,npm是node的包管理工具。它们的安装在此略过(可参数本博客其它文章)。2、browserify安装命令:npminstall-gbrowserify三、使…

    2022年10月29日
  • Android蓝牙开发—经典蓝牙和BLE(低功耗)蓝牙的区别

    Android蓝牙开发—经典蓝牙和BLE(低功耗)蓝牙的区别   最近在做蓝牙开发,刚接触时傻傻的分不清经典蓝牙和低功耗蓝牙的区别,一直用开发低功耗蓝牙的方法去连接经典蓝牙设备,最后当然是一直连接不上了。在此记录下经典蓝牙和低功耗蓝牙的区别和联系。Android中的蓝牙      说到Android中的蓝牙,大家听到的可能有蓝牙1.0、蓝牙2.0、蓝牙3.0、蓝牙4.0之类的以数字结尾的蓝牙版本号,而实际上,在最新的标准中,已经不再使用数…

  • ubuntu进tty1_linux最小系统板

    ubuntu进tty1_linux最小系统板这个系统很迷你。完全符合变态操作控的习惯,如果你很喜欢洁净的系统,那么它就是你的玩具~可以试试自己的能力,是否能够在这系统里DIY一个属于你自己的LINUX。。。转载于:https://www.cnblogs.com/xiaoCon/archive/2013/03/31/2991221.html…

  • java分页计算公式_java将list分页

    java分页计算公式_java将list分页1根据传入的参数计算1.1请求参数(currPage:当前页、pageSize:每页展示条数),根据这两个参数计算起始起始条数、截止条数 起始条数 firstIndex=(currPage-1)*pageSize 截止条数 lastIndex=currPage*pageSize1.2计算总页码(需获取总条数)pages=total%pageSize==0?total/pageSize:total/pageSize+1…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号