百度离线地图示例之十一：混合图(街道图、卫星图)实现_qt 离线百度地图支不支持混合图-程序员宅基地
技术标签： 百度离线地图 vue js javascript
前言介绍：
主要是基于v3.0的API版本进行的离线，纯内网可操作，基本上实现了现有90%以上的功能点，能兼容jpg和png格式的瓦片图层，实现了原生和基于Vue两个版本（包含常用的55个示例），实现的功能点概要如下：
地图示例：
地图展示
同时加载两个地图
设置地图最大及最
小级别移动地图
缩放地图
拖拽地图
设置地图显示范围
获取地图显示范围
测距
地图控件：
工具条、比例尺控件 地图类型
缩略图控件
添加版权控件
添加自定义控件
覆盖物示例：
添加/删除覆盖物
折线上添加方向箭头
添加动画标注点
设置点的新图标
设置点是否可拖拽 设置线、面可编辑
设置覆盖物的显示与隐藏
文本标注
带文字标签的覆盖物
获取覆盖物的信息
添加多个标注点
从多个点删除指定点
加载闪烁点
加载海量点 添加弧线
画椭圆
添加自定义覆盖物
点聚合
添加/删除地面叠加层
热力图功能示例
矢量图
添加自定义控件
信息窗口示例：
纯文本的信息窗口
添加复杂内容的信息窗口
给多个点添加信息窗口
获取信息窗口的信息
右键菜单示例：
给地图添加右键菜单
给覆盖物添加右键菜单
鼠标操作示例
设置地图默认的鼠标样式
鼠标滚轮缩放地图
鼠标拖拽地图
鼠标测距
单击获取点击的经纬度
鼠标绘制工具
添加层示例：
添加清华校园微观图
自定义网格
事件示例
图块加载完毕
地图单击事件
给覆盖物注册事件
传递事件参数
为多个点注册单击事件
注销事件
除了离线了官方API外，还对一些操作工具类进行了离线（总计11个工具），比如：
Heatmap
作用：热力图
SearchInfoWindow
作用：百度地图样式”的信息窗口工具。该工具为用户提供带搜索框的信息窗口，该窗口内容可自由定制多种风格。同时，用户可以将信息窗口标题以短信方式发送到手机上。
MarkerClusterer
作用：多标注聚合器。此工具解决加载大量点要素到地图上造成缓慢，且产生覆盖现象的问题。
RectangleZoom
作用：区域缩放工具。此工具将根据用户拖拽绘制的矩形区域大小对地图进行放大或缩小操作。
TextIconOverlay
作用：自定义覆盖物工具。用户可以使用该工具在地图上添加文字和图标样式的覆盖物。
LuShu
作用：路书，轨迹运动工具。此工具用以实现marker沿路线运动，并有暂停等功能。
GeoUtils
作用：几何运算工具。此工具提供判断点与矩形、 圆形、多边形线、多边形面的关系,并提供计算折线长度和多边形的面积的公式。
DistanceTool
作用：测距。
DrawingManager
作用：矢量图绘制。
代码示例实现：
html引用示例代码如下：
1、百度地图离线API下载地址
2、百度地图离线工具类集合下载地址
可以看出全部是离线引用，当然哪些工具类可以在组件内用的时候再引用也可以
<!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>
组件内示例代码如下：
<!-- 为多个点注册单击事件 -->
<template>
<div style="height:100%;width:100%">
<div id="allmap54"></div>
</div>
</template>
methods: {
initMap() {
// 百度地图API功能
// 百度地图API功能
var map = new BMap.Map("allmap54"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.setMapType(BMAP_HYBRID_MAP); //设置默认显示卫星混合图
}
}
地图实现效果展示：
系列文章后续一直有进行更新，有不完善的地方，可加微信一起交流：
智能推荐
安装Keras，tensorflow，并将虚拟环境添加到jupyter notebook_scipy库怎么导入jupyter-程序员宅基地
文章浏览阅读4.5k次，点赞8次，收藏69次。安装Keras，tensorflow，并将虚拟环境添加到jupyter notebook_scipy库怎么导入jupyter
ARM开发软件ADS教程_arm.developer.suite使用教程-程序员宅基地
文章浏览阅读4.7k次。ARM开发软件ADS教程 ADS(ARM Developer Suite)是ARM公司推出ARM集成开发环境,操作简单方便,获得广大开发人员的青睐。下面使用ADS v1.2做一个实例教程，帮助大家学会使用ADS编写程序和仿真调试。(使用汇编语言) 首先：下载ADS v1.2版本（英文版）并安装好ADS。安装好ADS之后可以看到开始菜单---所有程序---ARM Developer Suit_arm.developer.suite使用教程
Python的datetime_python 手写datetime-程序员宅基地
文章浏览阅读4.6k次。Python提供了多个内置模块用于操作日期时间，像calendar，time，datetime。time模块我在之前的文章已经有所介绍，它提供的接口与C标准库time.h基本一致。相比于time模块，datetime模块的接口则更直观、更容易调用。今天就来讲讲datetime模块。 datetime模块定义了两个常量：datetime.MINYEAR和datetime.MAXYEAR，分_python 手写datetime
利用Excel数据爬虫_excel爬虫-程序员宅基地
文章浏览阅读2.4k次，点赞2次，收藏8次。URL部分和URL预览填写为目标（需要爬取数据的网址）的URL地址。第三部找到User-Agent的value复制。就可以在Excel表格里看到想要的数据了。1、在Excel里数据里打开自网站。命令超时选择1分钟即可。HTTP请求标头参数。_excel爬虫
Azure OpenAI:使用Completion/ChatCompletion实现更多可能合集（持续更新）_chatcompletion azure-程序员宅基地
文章浏览阅读198次。不过类似的提示词在GPT4模型下直接使用并不能产生类似的结果，GPT4使用的是ChatCompletion，可以在System Message里或者JSON格式的User Message里带更多的上下文信息过去，在这个案例里GPT4过于智能的将两个表进行了交叉查询，看到网上有其他开发人员使用了JSON解析的方法来拼出SQL文，有机会可以尝试。###创建SQL查询问题：Dear, 210430预计什么时间有货可发?###创建SQL查询问题：Dear, 210430预计什么时间有货可发?_chatcompletion azure
oracle 磁盘空间满后导致无法连接/登陆/使用/启动_oracle的链接数占满sqlplus无法登陆进去怎么处理的-程序员宅基地
文章浏览阅读8.3k次，点赞2次，收藏19次。某天登陆服务器后连接oracle数据库时，突然提示磁盘控件不足，导致sqlplus 登陆失败，提示如下图： 通过命令 df -lh /opt/oracle查看oracle安装目录所在磁盘空间，发现确实已使用100%，如下图： oracle安装目录所在磁盘整个大小才20G，为了一劳永逸，果断准备将oracle系统表空间的数据文件迁移到其他磁盘。此时处理思路应该是先关闭oracle服务，然..._oracle的链接数占满sqlplus无法登陆进去怎么处理的
随便推点
《Qt for Symbian》翻译系列之七：第二章 开始（1）_qt manual proxy configuration-程序员宅基地
文章浏览阅读3.8k次。第二章开 始本章主要介绍应用于Symbian平台的QT开发工具。对于Symbian平台的新手，本章首先通过逐步介绍所需的开发工具及其安装指南进行切入。然后介绍如何在仿真器和移动电话上利用Qt for Symbian创建并运行“Hello World”应用。如果已经有了Symbian开发环境，而且熟悉工具及应用的构建过程，作为对某些SDK版本的补充，在进入2.1.7章节关注Qt for Symbian SDK的安装和介绍之前，建议快速浏览本章的第一部分。注意，本章中某些较长的下载链接利用URL缩_qt manual proxy configuration
前端 - Map对象详解_前端map-程序员宅基地
文章浏览阅读6.8k次。Map对象属性、Map对象和普通对象的区别、Map对象和WeakMap对象的区别_前端map
推荐系统中的常用算法——序列深度匹配SDM_sdm算法-程序员宅基地
文章浏览阅读2.8k次，点赞3次，收藏11次。1. 概述2. 算法原理参考文献Lv F , Jin T , Yu C , et al. SDM: Sequential Deep Matching Model for Online Large-scale Recommender System[J]. 2019.[深度模型] 阿里大规模深度召回序列模型SDMSDM：用户长短期兴趣召回模型..._sdm算法
计算机毕业设计 SSM与Vue的勤工助学管理系统(源码+论文)_ssm+vue勤工助学-程序员宅基地
文章浏览阅读199次。Hi，各位同学好呀，这里是M学姐！今天向大家分享一个今年(2022)最新完成的毕业设计项目作品，【基于SSM的勤工助学管理系统】学姐根据实现的难度和等级对项目进行评分(最低0分，满分5分)难度系数：3分工作量：5分创新点：3分界面美化：5分界面美化的补充说明：使用vue的基本都能达到5分本项目完成于2022年6月份，包含内容 : 源码 + 论文 + 答辩PPT在开放的互联网平台面前，勤工助学管理系统的信息管理面临着巨大的挑战。传统的管理模式局限于简单数据的管理，无法适应不断变化的市场格局。_ssm+vue勤工助学
分布式锁原理与实现--Redis分布式锁和ZooKeeper分布式锁-程序员宅基地
文章浏览阅读334次，点赞5次，收藏5次。分布式锁的设计和实现是一个复杂但至关重要的课题，不同的实现方式各具优势，根据系统的实际需求和现有技术栈选择合适的分布式锁方案至关重要。在分布式系统中，由于数据分散存储在不同的节点上，当多个节点同时对同一资源进行操作时，如果没有有效的协调机制，就可能出现并发控制问题，导致数据的不一致和冲突。使用setnx命令尝试设置一个唯一的key-value对，key通常与待保护的资源相关联，value可以是线程ID或随机生成的UUID，如果设置成功，则认为获取到了锁。
联想服务器TD630安装系统,ThinkServer_TD340_RAID及系统安装.docx-程序员宅基地
文章浏览阅读597次。ThinkServer_TD340_RAID及系统安装Lenovo ThinkServer TD340 RAID及系统安装前言：Lenovo ThinkServer TD340随机配备导航盘，其RAID及系统安装有两种方式可选：导航盘方式和传统方式。导航盘方式较为简洁，且在系统安装完成后无需再进行驱动安装，其驱动已集成在导航盘上，如以此方式安装按导航盘引导进行即可，在此不做详细介绍；传统方式..._联想服务器td340u盘安装win2008