前端:地图篇(一)
1、前言
在很多的出行程序中,都会使用到地图这一个功能,在实际的开发中我们也不会去开发一个自己的地图模型。如果自己开发一个地图模型,那么需要投入的成本、人力都是非常巨大的。所以我们很多网站和APP中使用的都是第三方的接口和JS,在案例中我们使用百度地图作为第三方。
2、工具准备
1、我们既然要使用第三方的功能,所以我们需要在百度中有一个账号。
点击这里,可以跳转到百度注册页面
2、其次呢,我们需要在百度地图开放平台申请开通开发者功能。
点击这里,可以跳转到百度地图开放平台
3、进入控制台
后,进入应用管理
-> 我的应用
-> 创建应用
,申请一个AK, 这个AK很重要,是访问百度相关API的密钥(用户标识)。
4、申请AK。
5、填写好相应的信息提交,分类要选择好,服务端对应的是后台程序,浏览器端对应的是前端程序,其他的分类也可以从字面意思了解得出来。
申请好AK后,我们就可以开始使用百度地图API了。
3、百度地图基本操作
使用百度地图的时候,我们要明白一点,百度已经为我们生成了地图模板,我们只需要添加相应的组件和相应的事件功能就可以了。
3.1、展示地图
因为百度已经为我们设计好了地图模板,所以我们可以使用HTML,也可以使用Vue等框架。这里我们使用基础的HTML。
3.1.1、创建HTML文件
创建一个简单的HTML文件,写一个ID为container的DIV。
<!DOCTYPE html>
<html>
<head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Baidu Map </title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style>
</head>
<body><div id="container"></div>
</body>
</html>
3.1.2、引入百度地图JS
在引入百度地图的JS时,我们就需要使用到我们申请的AK。
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
3.1.3、编写JS脚本
在我们引入百度地图的JS后,我们就需要自定义JS,将地图模板放入定义的container容器中。
<script>let map = new BMapGL.Map("container"); // 创建地图实例 let point = new BMapGL.Point(116.404, 39.915); // 创建焦点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放、鼠标拖动
</script>
此时,我们运行HTML文件就可以看见效果了。
3.2、更改地图类型
类型常量 | 描述 |
---|---|
BMAP_NORMAL_MAP | 标准地图(默认) |
BMAP_EARTH_MAP | 地球模式 |
BMAP_SATELLITE_MAP | 普通卫星地图 |
更改类型:
map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式
效果
3.3、添加覆盖物
除了百度提供的地图模型以外的覆盖在模型上部的内容,都是覆盖物。
3.3.1、绘制点、线、面
可以使用map.addOverlay方法向地图添加覆盖物,使用map.removeOverlay方法移除覆盖物。
基本覆盖物对象:
类名 | 描述 |
---|---|
Marker | 表示地图上的点,可自定义标注的图标 |
Polyline | 表示地图上的折线 |
Polygon | 表示地图上的多边形 |
Circle | 表示地图上的圆 |
- Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上。
- API提供了默认图标样式,您也可以通过Icon类来指定自定义图标。Marker的构造函数的参数为Point和MarkerOptions(可选)。
- 注意:当您使用自定义图标时,标注的地理坐标点将位于标注所用图标的中心位置,您可通过Icon的offset属性修改标定位置。
3.3.1.1、创建折线
Polyline表示地图上的折线覆盖物,它包含一组点,并将这些点连接起来形成折线。
function polyline(map){var polyline = new BMapGL.Polyline([new BMapGL.Point(112.910838,28.276226), // 第一个点new BMapGL.Point(113.024096,28.260446), // 第二个点new BMapGL.Point(113.028121,28.155017) // 第三个点], {strokeColor:"blue", strokeWeight:10, strokeOpacity:0.5});/**strokeColor: 线条颜色strokeWeight: 线条宽度strokeOpacity:线条透明度**/map.addOverlay(polyline); // 添加遮罩物
}
效果:
3.3.1.2、创建多边形
Polygon表示地图上的多边形覆盖物,它包含一组点。多边形将这组点按顺序首尾相连,最终围成一个封闭图形。
function polygon(map){var polygon = new BMapGL.Polygon([new BMapGL.Point(112.910838,28.276226),new BMapGL.Point(113.024096,28.260446),new BMapGL.Point(113.028121,28.155017),new BMapGL.Point(112.971779,28.148392),new BMapGL.Point(112.909688,28.159093),new BMapGL.Point(112.910838,28.276226),], {strokeColor:"blue", strokeWeight:5, strokeOpacity:0.5});map.addOverlay(polygon);
}
效果:
3.3.2、创建标注
3.3.2.1、创建一个简单的标注
我们所使用的遮罩物都是基于一个点的,所以我们需要遮罩物所展示的基本点。
let point = new BMapGL.Point(112.937528,28.244156); // 创建焦点坐标
let marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
完成JS:
<script>let map = new BMapGL.Map("container"); // 创建地图实例let point = new BMapGL.Point(112.937528,28.244156); // 创建焦点坐标map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放let marker = new BMapGL.Marker(point); // 创建标注map.addOverlay(marker); // 将标注添加到地图中
</script>
效果:
3.3.2.2、自定义标注图片
我们可以使用指定的图片来作为标注。
function pointIcon(map){let myIcon = new BMapGL.Icon("1.jpg", new BMapGL.Size(100, 100), {// 指定定位位置。// 当标注显示在地图上时,其所指向的地理位置距离图标左上// 角各偏移10像素和25像素。您可以看到在本例中该位置即是// 图标中央下端的尖角位置。anchor: new BMapGL.Size(10, 25),// 设置图片偏移。// 当您需要从一幅较大的图片中截取某部分作为标注图标时,您// 需要指定大图的偏移位置,此做法与css sprites技术类似。imageOffset: new BMapGL.Size(0, 0 - 25) // 设置图片偏移});// 创建标注对象并添加到地图let marker = new BMapGL.Marker(point, {icon: myIcon});map.addOverlay(marker);
}
效果:
3.4、事件
百度地图API中的大部分对象都含有addEventListener方法,您可以通过该方法来监听对象事件。
3.4.1、遮罩物事件
marker.addEventListener("click", function(){ alert("您点击了标注");
});
当点击marker这个遮罩物之后就会触发click事件。
3.4.2、地图事件
map.addEventListener('click', function(e) {alert('click!')
});
// 当点击了地图的某个地方后就会触发click事件。
通过回调函数的参数,可以获取当前点击点的经纬度信息。
map.addEventListener('click', handleClick);function handleClick(e){alert('点击的经纬度:' + e.latlng.lng + ', ' + e.latlng.lat);var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);alert('点的墨卡托坐标:' + mercator[0] + ', ' + mercator[1]);
}map.removeEventListener('click', handleClick); // 移除事件
3.4.3、右击事件
Javascript API GL提供了MenuItem构造函数来定义菜单项实例,其接收三个参数,分别是菜单项显示的文本(string)、点击后的回调函数(Function)以及一个可选的MenultOptions(对象字面量)参数。
function rightClick(map){let txtMenuItem = [{text:'放大', // 定义菜单项的显示文本callback: function () { // 定义菜单项点击触发的回调函数map.zoomIn();}},{text:'缩小',callback: function () {map.zoomOut();}}];for(var i = 0; i < txtMenuItem.length; i++){menu.addItem(new BMapGL.MenuItem( // 定义菜单项实例txtMenuItem[i].text, // 传入菜单项的显示文本txtMenuItem[i].callback, // 传入菜单项的回调函数{width: 300, // 指定菜单项的宽度id: 'menu' + i // 指定菜单项dom的id}));}map.addContextMenu(menu); // 给地图添加右键菜单
}
4、小结
- 获取指定位置的经纬坐标:点击这里可以跳转到百度获取经纬坐标网页。
- 查看百度地图API参考类:点击这里可以跳转到百度地图API参考文档
- 查看百度地图开发指南:点击这里可以跳转到百度地图开发指南
相关文章:

前端:地图篇(一)
1、前言 在很多的出行程序中,都会使用到地图这一个功能,在实际的开发中我们也不会去开发一个自己的地图模型。如果自己开发一个地图模型,那么需要投入的成本、人力都是非常巨大的。所以我们很多网站和APP中使用的都是第三方的接口和JS&#…...

刷题笔记 day6
力扣 57 和为s的两个整数 class Solution { public:vector<int> twoSum(vector<int>& nums, int target) {vector<int> v;int i 0 , j nums.size()-1;while(i < j){if(nums[i] nums[j] > target){--j;}else if(nums[i] nums[j] < target){i…...

Drools用户手册翻译——第四章 Drools规则引擎(十一)复杂事件处理(CEP)的属性更改设置和监听器
甩锅声明:本人英语一般,翻译只是为了做个笔记,所以有翻译错误的地方,错就错了,如果你想给我纠正,就给我留言,我会改过来,如果懒得理我,就直接划过即可。 事实类型的属性…...

[数据分析与可视化] Python绘制数据地图4-MovingPandas入门指北
MovingPandas是一个基于Python和GeoPandas的开源地理时空数据处理库,用于处理移动物体的轨迹数据。它提供了一组强大的工具,可以轻松地加载、分析和可视化移动物体的轨迹。通过使用MovingPandas,用户可以轻松地处理和分析移动对象数据&#x…...

基于SpringBoot+Vue的MOBA类游戏攻略分享平台设计与实现(源码+LW+部署文档等)
博主介绍: 大家好,我是一名在Java圈混迹十余年的程序员,精通Java编程语言,同时也熟练掌握微信小程序、Python和Android等技术,能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…...
Linux sed 命令详解
Linux sed(Stream Editor)是一种强大的文本处理工具,它在命令行中执行对文本进行搜索、替换和编辑等操作。sed的设计理念是按行处理文本,可以将输入文本逐行读取并应用指定的操作,然后输出结果。 sed命令有多种选项和…...

算法通关村——如何使用中序和后序来恢复一棵二叉树
通过序列构造二叉树 给出以下三个二叉树遍历的序列: (1) 前序: 1 2 3 4 5 6 8 7 9 10 11 12 13 15 14 (2) 中序: 3 4 8 6 7 5 2 1 10 9 11 15 13 14 12 (3) 后序: 8 7 6 5 4 3 2 10 15 14 13 12 11 9 1 前中序复原二叉树 所需序列 (1) 前序: 1 2 3 4 5 6 8 7 9 10 …...
TypeScript的基本类型
typescript的定义 以JavaScript为基础构建的语言是js的超集可以在任何支持js的平台执行ts 拓展了js并增加了类型Ts不能被js解析器直接执行。 TS> 编译为js 执行的还是js. js 不易于维护,而ts易于维护。 可提高项目的可维护性。 类似less、sass 完善的语法写 样…...

Docker实战-如何去访问Docker仓库?
导语 仓库在之前的分享中我们介绍过,它主要的作用就是用来存放镜像文件,又可以分为是公共的仓库和私有仓库。有点类似于Maven的中央仓库和公司内部私服。 下面我们就来介绍一下在Docker中如何去访问各种仓库。 Docker Hub 公共镜像仓库 Docker Hub 是Docker官方提供的最…...
【力扣】722. 删除注释
以下为力扣官方题解,及本人代码 722. 删除注释 题目题意示例 1示例 2提示 官方题解模拟思路与算法复杂度 本人代码Java提交结果:通过 题目 题意 给一个 C C C 程序,删除程序中的注释。这个程序 s o u r c e source source 是一个数组&a…...
篇二:工厂方法模式:灵活创建对象
篇二:“工厂方法模式:灵活创建对象” 开始本篇文章之前先推荐一个好用的学习工具,AIRIght,借助于AI助手工具,学习事半功倍。欢迎访问:http://airight.fun/。 另外有2本不错的关于设计模式的资料ÿ…...

Python(六十二)字典元素的增、删、改操作
❤️ 专栏简介:本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中,我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 :本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…...
从零学算法138
**138.**给你一个长度为 n 的链表,每个节点包含一个额外增加的随机指针 random ,该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成,其中每个新节点的值都设为其对应的原节点的值。新节…...

CTF PWN练习之返回地址覆盖
今天进行的实验是CTF PWN练习之返回地址覆盖,来体验一下新的溢出方式。 学习地址覆盖之前还有些小知识需要掌握,不然做题的时候你肯定一脸懵逼,首先是函数调用约定,然后还要知道基本的缓冲区溢出攻击模型。 函数调用约定 函数调用约定描述…...

OpenCV中图像变换
一、介绍 transform():Transposes a matrix. perspectiveTransform():Performs the perspective matrix transformation of vectors. warpAffine():Applies an affine transformation to an image. warpPerspective():Applies a p…...

wordpress发表文章时报错: rest_cannot_create,抱歉,您不能为此用户创建文章(已解决)
使用wordpress 的rest api发布文章,首先使用wp-json/jwt-auth/v1/token接口获取token,然后再使用/wp-json/wp/v2/posts 接口发表文章,但是使用axios请求时,却报错: 但是,我在postman上却是可以的࿰…...

数学建模学习(7):Matlab绘图
一、二维图像绘制 1.绘制曲线图 最基础的二维图形绘制方法:plot -plot命令自动打开一个图形窗口Figure; 用直线连接相邻两数据点来绘制图形 -根据图形坐标大小自动缩扩坐标轴,将数据标尺及单位标注自动加到两个坐标轴上,可自定…...

CSS中所有选择器详解
文章目录 一、基础选择器1.标签选择器2.类选择器3.id选择器4.通配符选择器 二、复合选择器1.交集选择器2.并集选择器 三、属性选择器1.[属性]2.[属性属性值]3.[属性^属性值]4.[属性$属性值]5.[属性*属性值] 四、关系选择器1.父亲>儿子2.祖先 后代3.兄弟4.兄~弟 五、伪类选择…...

STM32 低功耗学习
STM32 电源系统结构介绍 电源系统:VDDA供电区域、VDD供电区域、1.8V供电区域、后备供电区域。 器件的工作电压(VDD)2.0~3.6V 为了提高转换精度,给模拟外设独立供电。电压调节器为1.8V供电区域供电,且1.8V供电区域是电…...

HCIP--云计算题库 V5.0版本
在国家政策的支持下,我国云计算应用市场发展明显加快,越来越多的企业开始介入云产业,出现了大量的应用解决方案,云应用的成功案例逐渐丰富,用户了解和认可程度不断提高,云计算产业发展迎来了“黄金机遇期”…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...
逻辑回归:给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
ffmpeg(四):滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具,可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下: ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜: ffmpeg…...
Python爬虫(二):爬虫完整流程
爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...

ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

深度学习习题2
1.如果增加神经网络的宽度,精确度会增加到一个特定阈值后,便开始降低。造成这一现象的可能原因是什么? A、即使增加卷积核的数量,只有少部分的核会被用作预测 B、当卷积核数量增加时,神经网络的预测能力会降低 C、当卷…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...

【Linux】自动化构建-Make/Makefile
前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具:make/makfile 1.背景 在一个工程中源文件不计其数,其按类型、功能、模块分别放在若干个目录中,mak…...

【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅
目录 前言 操作系统与驱动程序 是什么,为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中,我们在使用电子设备时,我们所输入执行的每一条指令最终大多都会作用到硬件上,比如下载一款软件最终会下载到硬盘上&am…...