当前位置: 首页 > news >正文

前端:地图篇(一)

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表示地图上的圆
  1. Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上。
  2. API提供了默认图标样式,您也可以通过Icon类来指定自定义图标。Marker的构造函数的参数为Point和MarkerOptions(可选)。
  3. 注意:当您使用自定义图标时,标注的地理坐标点将位于标注所用图标的中心位置,您可通过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、小结

  1. 获取指定位置的经纬坐标:点击这里可以跳转到百度获取经纬坐标网页。
  2. 查看百度地图API参考类:点击这里可以跳转到百度地图API参考文档
  3. 查看百度地图开发指南:点击这里可以跳转到百度地图开发指南

相关文章:

前端:地图篇(一)

1、前言 在很多的出行程序中&#xff0c;都会使用到地图这一个功能&#xff0c;在实际的开发中我们也不会去开发一个自己的地图模型。如果自己开发一个地图模型&#xff0c;那么需要投入的成本、人力都是非常巨大的。所以我们很多网站和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)的属性更改设置和监听器

甩锅声明&#xff1a;本人英语一般&#xff0c;翻译只是为了做个笔记&#xff0c;所以有翻译错误的地方&#xff0c;错就错了&#xff0c;如果你想给我纠正&#xff0c;就给我留言&#xff0c;我会改过来&#xff0c;如果懒得理我&#xff0c;就直接划过即可。 事实类型的属性…...

[数据分析与可视化] Python绘制数据地图4-MovingPandas入门指北

MovingPandas是一个基于Python和GeoPandas的开源地理时空数据处理库&#xff0c;用于处理移动物体的轨迹数据。它提供了一组强大的工具&#xff0c;可以轻松地加载、分析和可视化移动物体的轨迹。通过使用MovingPandas&#xff0c;用户可以轻松地处理和分析移动对象数据&#x…...

基于SpringBoot+Vue的MOBA类游戏攻略分享平台设计与实现(源码+LW+部署文档等)

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…...

Linux sed 命令详解

Linux sed&#xff08;Stream Editor&#xff09;是一种强大的文本处理工具&#xff0c;它在命令行中执行对文本进行搜索、替换和编辑等操作。sed的设计理念是按行处理文本&#xff0c;可以将输入文本逐行读取并应用指定的操作&#xff0c;然后输出结果。 sed命令有多种选项和…...

算法通关村——如何使用中序和后序来恢复一棵二叉树

通过序列构造二叉树 给出以下三个二叉树遍历的序列&#xff1a; (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 不易于维护&#xff0c;而ts易于维护。 可提高项目的可维护性。 类似less、sass 完善的语法写 样…...

Docker实战-如何去访问Docker仓库?

导语   仓库在之前的分享中我们介绍过,它主要的作用就是用来存放镜像文件,又可以分为是公共的仓库和私有仓库。有点类似于Maven的中央仓库和公司内部私服。 下面我们就来介绍一下在Docker中如何去访问各种仓库。 Docker Hub 公共镜像仓库 Docker Hub 是Docker官方提供的最…...

【力扣】722. 删除注释

以下为力扣官方题解&#xff0c;及本人代码 722. 删除注释 题目题意示例 1示例 2提示 官方题解模拟思路与算法复杂度 本人代码Java提交结果&#xff1a;通过 题目 题意 给一个 C C C 程序&#xff0c;删除程序中的注释。这个程序 s o u r c e source source 是一个数组&a…...

篇二:工厂方法模式:灵活创建对象

篇二&#xff1a;“工厂方法模式&#xff1a;灵活创建对象” 开始本篇文章之前先推荐一个好用的学习工具&#xff0c;AIRIght&#xff0c;借助于AI助手工具&#xff0c;学习事半功倍。欢迎访问&#xff1a;http://airight.fun/。 另外有2本不错的关于设计模式的资料&#xff…...

Python(六十二)字典元素的增、删、改操作

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…...

从零学算法138

**138.**给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成&#xff0c;其中每个新节点的值都设为其对应的原节点的值。新节…...

CTF PWN练习之返回地址覆盖

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

OpenCV中图像变换

一、介绍 transform()&#xff1a;Transposes a matrix. perspectiveTransform()&#xff1a;Performs the perspective matrix transformation of vectors. warpAffine()&#xff1a;Applies an affine transformation to an image. warpPerspective()&#xff1a;Applies a p…...

wordpress发表文章时报错: rest_cannot_create,抱歉,您不能为此用户创建文章(已解决)

使用wordpress 的rest api发布文章&#xff0c;首先使用wp-json/jwt-auth/v1/token接口获取token&#xff0c;然后再使用/wp-json/wp/v2/posts 接口发表文章&#xff0c;但是使用axios请求时&#xff0c;却报错&#xff1a; 但是&#xff0c;我在postman上却是可以的&#xff0…...

数学建模学习(7):Matlab绘图

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

CSS中所有选择器详解

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

STM32 低功耗学习

STM32 电源系统结构介绍 电源系统&#xff1a;VDDA供电区域、VDD供电区域、1.8V供电区域、后备供电区域。 器件的工作电压&#xff08;VDD&#xff09;2.0~3.6V 为了提高转换精度&#xff0c;给模拟外设独立供电。电压调节器为1.8V供电区域供电&#xff0c;且1.8V供电区域是电…...

HCIP--云计算题库 V5.0版本

在国家政策的支持下&#xff0c;我国云计算应用市场发展明显加快&#xff0c;越来越多的企业开始介入云产业&#xff0c;出现了大量的应用解决方案&#xff0c;云应用的成功案例逐渐丰富&#xff0c;用户了解和认可程度不断提高&#xff0c;云计算产业发展迎来了“黄金机遇期”…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;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.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

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

【Linux】自动化构建-Make/Makefile

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

【Linux手册】探秘系统世界:从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...