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

从零开始学习调用百度地图网页API：三、鼠标点击绘图功能

news 2025/12/26 3:40:34

目录

  • 代码
  • 功能
  • 问题注意
    • addEventListener
    • plot_line

代码

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html, #allmap {width: 100%;height: 100%;overflow: hidden;margin: 0;font-family: "微软雅黑";}ul li {list-style: none;}.btn-wrap {z-index: 999;position: fixed;bottom: 40px;margin-left: 200px;padding: 1rem 1rem;border-radius: .25rem;background-color: #fff;box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);}.btn {width: 75px;height: 30px;float: left;background-color: #fff;color: rgba(27, 142, 236, 1);font-size: 14px;border: 1px solid rgba(27, 142, 236, 1);border-radius: 5px;margin: 0 5px;text-align: center;line-height: 30px;}.btn:hover {background-color: rgba(27, 142, 236, 0.8);color: #fff;}</style><script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的ak"></script><title>显示坐标</title>
</head>
<body><div id="allmap"></div><ul class="btn-wrap" style="z-index: 999;"><li class="btn" id="plot_button" onclick="draw()">绘图</li><li class="btn" id="clear_button" onclick="clearpoint()">清除</li><li class="btn" id="show_pos_button" onclick="display()">显示坐标</li><li class="btn" id="not_show" onclick="notshow()">不显示</li></ul>
</body>
</html>
<script type="text/javascript">var drawflag = 0;var latline = new Array();var lonline = new Array();var line = new Array();var colorline = "blue";var show_flag = null;// 百度地图API功能var map = new BMap.Map("allmap");  // 创建Map实例map.centerAndZoom("北京", 15);      // 初始化地图,用城市名设置地图中心点var opts = {width: 20,     // 信息窗口宽度height: 5,     // 信息窗口高度}//var a = new Array(BMAP_SATELLITE_MAP,BMAP_NORMAL_MAP);var cursor = map.getDefaultCursor();map.enableScrollWheelZoom();//开启鼠标滚轮缩放var mapControl = new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP, BMAP_SATELLITE_MAP] });map.addControl(mapControl);var scaleCtrl = new BMap.ScaleControl();  // 添加比例尺控件map.addControl(scaleCtrl);var cityCtrl = new BMap.CityListControl();  // 添加城市列表控件map.addControl(cityCtrl);//map.getUiSettings().setCompassEnabled(true);map.addEventListener("click", function (e) {addpoint(e.point.lng, e.point.lat);});function setMouse() {if (drawflag == 1)map.setDefaultCursor('crosshair');elsemap.setDefaultCursor(cursor);}function draw() {if (drawflag == 0)drawflag = 1;elsedrawflag = 0;setMouse();}//显示坐标信息窗口槽函数function showinfo(e) {var infoWindow = new BMap.InfoWindow(e.point.lat.toFixed(3) + ", " + e.point.lng.toFixed(3), opts);  // 创建信息窗口对象map.openInfoWindow(infoWindow, e.point);}//添加事件function display() {if (show_flag == null) {map.addEventListener('click', showinfo, false);show_flag = 1;}}//移除事件function notshow() {map.removeEventListener('click', showinfo);map.closeInfoWindow();show_flag = null;}function addpoint(lon, lat) {var k = 0;if (drawflag == 1) {line = new Array();latline.push(lat);lonline.push(lon);for (var i = 0; i < latline.length - 1; i++) {plot_line(lonline[i], latline[i], lonline[i + 1], latline[i + 1])k = i + 1;}var marker = new BMap.Marker(new BMap.Point(lon, lat));var point = new BMap.Point(lon, lat);map.addOverlay(marker);marker.addEventListener('click', function () {var opts = {title: `<font color='blue'>位置信息</font>`,};var info = '名称：坐标点' + k + "</br>坐标：" + point.lat.toFixed(5) + ", " + point.lng.toFixed(5);var infoWindow = new BMap.InfoWindow(info, opts);  // 创建信息窗口对象map.openInfoWindow(infoWindow, point);});}}function plot_line(lon1, lat1, lon2, lat2) {//起始点的经纬度//终止点的经纬度var polyline1 = new BMap.Polyline([new BMap.Point(lon1, lat1),new BMap.Point(lon2, lat2)], {strokeColor: "red",//设置颜色strokeWeight: 5, //宽度strokeOpacity: 1});//透明度map.addOverlay(polyline1);polyline1.addEventListener('click', function () {var opts = {title: `<font color='red'>距离</font>`,};var len_point = new BMap.Point((polyline1.mv.kf.lng + polyline1.mv.nf.lng) / 2.0, (polyline1.mv.kf.lat + polyline1.mv.nf.lat) / 2.0);var infoWindow = new BMap.InfoWindow("长度", opts);map.openInfoWindow(infoWindow, len_point);});polyline1.disableMassClear();line.push(polyline1);}function clearpoint() {var lines = map.getOverlays();//var allOverlay = map.getOverlays();for (var i = 0; i < lines.length; i++) {lines[i].enableMassClear();}map.clearOverlays();latline = new Array();lonline = new Array();line = new Array();}</script>

注：需要将你的ak替换，ak从百度地图官网注册申请，选择浏览器类型api。

功能

绘制线段
在这里插入图片描述
显示对象的位置信息
在这里插入图片描述
在这里插入图片描述

显示任意点坐标
在这里插入图片描述

问题注意

addEventListener

    //添加事件function display() {//alert(e.point.lng + ", " + e.point.lat);map.addEventListener('click', showinfo);}//移除事件function notshow() {map.closeInfoWindow();map.removeEventListener('click', showinfo);}

最初的实现方法，在显示坐标按钮多次被点击后，会导致再点击不显示按钮，无法remove事件。依然会在地图上点击后出现坐标信息。
这是因为addEventListener可以重复添加事件，为了避免重复添加事件，使用全局变量show_flag，通过值来判断是否已经添加过，若已经添加过事件，赋值为1，再次点击显示坐标按钮，不会重复添加事件。

    //添加事件function display() {if (show_flag == null) {map.addEventListener('click', showinfo, false);show_flag = 1;}}//移除事件function notshow() {map.removeEventListener('click', showinfo);map.closeInfoWindow();show_flag = null;}

plot_line

如果将函数内容直接在循环内实现，不使用函数。则polyline1变量在循环结束后调用addEventListener的值，只调用循环结束最后的结果。
不是每个循环都不同的值。
因此，写为函数。每个线段addEventListener为不同的值，在中点显示信息。

            for (var i = 0; i < latline.length - 1; i++) {plot_line(lonline[i], latline[i], lonline[i + 1], latline[i + 1])k = i + 1;}

function plot_line(lon1, lat1, lon2, lat2) {//起始点的经纬度//终止点的经纬度var polyline1 = new BMap.Polyline([new BMap.Point(lon1, lat1),new BMap.Point(lon2, lat2)], {strokeColor: "red",//设置颜色strokeWeight: 5, //宽度strokeOpacity: 1});//透明度map.addOverlay(polyline1);polyline1.addEventListener('click', function () {var opts = {title: `<font color='red'>距离</font>`,};var len_point = new BMap.Point((polyline1.mv.kf.lng + polyline1.mv.nf.lng) / 2.0, (polyline1.mv.kf.lat + polyline1.mv.nf.lat) / 2.0);var infoWindow = new BMap.InfoWindow("长度", opts);map.openInfoWindow(infoWindow, len_point);});polyline1.disableMassClear();line.push(polyline1);}

相关文章：

从零开始学习调用百度地图网页API：三、鼠标点击绘图功能

目录 代码功能问题注意addEventListenerplot_line 代码 <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><meta name"viewport" content"initial-scale1.0,…...

编程日记 2023/10/16 14:52:52

强化学习案例复现（1）--- MountainCar基于Q-learning

1 搭建环境 1.1 gym自带 import gym# Create environment env gym.make("MountainCar-v0")eposides 10 for eq in range(eposides):obs env.reset()done Falserewards 0while not done:action env.action_space.sample()obs, reward, done, action, info env.…...

编程日记 2023/10/16 14:51:52

BUUCTF学习(6): 命令执行ip

1、介绍 2、hackbar安装 BUUCTF学习(四): 文件包含tips-CSDN博客 ?ip127.0.0.1;ag;cat$IFS$9fla$a.php 空格过滤 $IFS$9 检查源代码 结束...

编程日记 2023/10/16 14:50:51

javaweb：mybatis：mapper(sql映射+代理开发+配置文件之设置别名、多环境配置、顺序+注解开发）

1.0版本 sql映射文件实现 流程 首先程序进入启动类MyBatisDemo.java中&#xff0c;读取配置文件mybatis-config.xml 再由mybatis-config的mappers属性 <mappers><mapper resource"UserMapper.xml"></mapper></mappers>找到sql映射文件Use…...

编程日记 2023/10/16 14:49:50

JavaScript基础知识——练习巩固（2）

写一个程序&#xff0c;要求如下 需求1&#xff1a;让用户输入五个有效年龄&#xff08;0-100之间&#xff09;&#xff0c;放入数组中 必须输入五个有效年龄年龄&#xff0c;如果是无效年龄&#xff0c;则不能放入数组中 需求2&#xff1a;打印出所有成年人的年龄 (数组筛选)…...

编程日记 2023/10/16 14:48:49

FutureTask的测试使用和方法执行分析

FutureTask类图如下 java.util.concurrent.FutureTask#run run方法执行逻辑如下 public void run() {if (state ! NEW ||!RUNNER.compareAndSet(this, null, Thread.currentThread()))return;try {Callable<V> c callable;if (c ! null && state NEW) {V res…...

编程日记 2023/10/16 14:47:47

SpringMVC的请求处理

目录 请求映射路径的配置 请求数据的接收 接收Restful风格的数据 什么是Restful风格&#xff1f; 接收上传文件 获取headers头信息和cookie信息 JavaWeb常用对象获取 请求静态资源 注解驱动标签 请求映射路径的配置 请求映射路径的配置主要是通过RequestMapping注解实现…...

编程日记 2023/10/16 14:46:46

260. 只出现一次的数字 III

给你一个整数数组 nums&#xff0c;其中恰好有两个元素只出现一次&#xff0c;其余所有元素均出现两次。 找出只出现一次的那两个元素。你可以按 任意顺序 返回答案。 你必须设计并实现线性时间复杂度的算法且仅使用常量额外空间来解决此问题。 示例 1&#xff1a; 输入&…...

编程日记 2023/10/16 14:45:44

家政预约接单系统，家政保洁小程序开发；

家政预约接单系统&#xff0c;家政保洁维修小程序开发&#xff0c;阿姨管理&#xff0c;家政保险&#xff0c;合同管理&#xff0c;资金管理&#xff0c;营销推广等功能&#xff0c;包括&#xff1a;推广、营销、管理、培训、周边服务等等 家政系统详细功能介绍&#xff1a; 家…...

编程日记 2023/10/16 14:44:43

网络安全工程师需要学什么？零基础怎么从入门到精通，看这一篇就够了

网络安全工程师需要学什么&#xff1f;零基础怎么从入门到精通&#xff0c;看这一篇就够了 我发现关于网络安全的学习路线网上有非常多看似高大上却无任何参考意义的回答。大多数的路线都是给了一个大概的框架&#xff0c;告诉你那些东西要考&#xff0c;以及建议了一个学习顺…...

编程日记 2023/10/16 14:43:42

出差学知识No3：ubuntu查询文件大小|文件包大小|磁盘占用情况等

1、查询单个文件占用内存大小2、显示一个目录下所有文件和文件包的大小3、显示ubuntu所有磁盘的占用情况4、查看ubuntu单个包的占用情况 1、查询单个文件占用内存大小 使用指令&#xff1a;ls -lh 文件 2、显示一个目录下所有文件和文件包的大小 指令&#xff1a;du -sh* 3…...

编程日记 2023/10/16 14:42:41

详解cv2.copyMakeBorder函数【OpenCV图像边界填充Python版本】

文章目录 简介函数原型代码示例参考资料 简介 做深度学习图像数据集时&#xff0c;有时候需要调整一张图片的长和宽。如果直接使用cv2.resize函数会造成图像扭曲失真&#xff0c;因此我们可以采取填充图像短边的方法解决这个问题。cv2.copyMakeBorder函数提供了相关操作。本篇…...

编程日记 2023/10/16 14:41:40

前端技术-并发请求

并发请求 代码解释 定义了一个函数 concurRequest&#xff0c;用于并发请求多个 URL 并返回它们的响应结果。 function concurRequest(urls, maxNum) {return new Promise((resolve, reject) > {if (urls.length 0) {resolve([]);return;}const results [];let index …...

编程日记 2023/10/16 14:39:39

面试题-React(十三)：React中获取Refs的几种方式

一、Refs的基本概念 Refs是React提供的一种访问DOM元素或组件实例的方式。通过Refs&#xff0c;我们可以在React中获取到底层的DOM节点或组件实例&#xff0c;并进行一些操作。Refs的使用场景包括但不限于&#xff1a;访问DOM属性、调用组件方法、获取输入框的值等。 二、获取…...

编程日记 2023/10/16 14:38:37

Linux CentOS 7升级curl8.4.0使用编译安装方式

1、查看当前版本 # curl --version curl 7.29.0 (x86_64-redhat-linux-gnu) libcurl/7.29.0 NSS/3.19.1 Basic ECC zlib/1.2.7 libidn/1.28 libssh2/1.4.3 Protocols: dict file ftp ftps gopher http https imap imaps ldap ldaps pop3 pop3s rtsp scp sftp smtp smtps tel…...

编程日记 2023/10/16 14:37:36

探寻JWT的本质：它是什么？它有什么作用？

JWT&#xff08;JSON Web Token&#xff09;是一种基于 JSON 格式的轻量级令牌&#xff08;token&#xff09;协议&#xff0c;它被广泛应用于网络应用程序的身份验证和授权。相较于传统的 session-based 认证机制&#xff0c;JWT 具有更好的扩展性和互操作性&#xff0c;同时也…...

编程日记 2023/10/16 14:33:32

关于雅思听力答案限定字数的解释。

1. No more than three words and/or a number&#xff1a;31&#xff0c;可以填3/2/1个单词&#xff1b;1个数字&#xff1b;3/2/1个单词1个数字 2. No more than three words and/or numbers&#xff1a;3n&#xff0c;可以填3/2/1个单词&#xff1b;n个数字&#xff1b;3/2…...

编程日记 2023/10/16 14:32:31

化工python | CSTR连续搅拌反应器系统

绝热连续搅拌釜反应器 (CSTR) 是过程工业中常见的化学系统。 容器中发生单个一级放热且不可逆的反应 A → B，假定容器始终完全混合。 试剂 A 的入口流以恒定的体积速率进入罐。 产物流B以相同的体积速率连续排出，液体密度恒定。 因此，反应液体的体积是恒定的。 在反应器中发…...

编程日记 2023/10/16 14:31:30

交通物流模型 | 基于自监督学习的交通流预测模型

交通物流模型 | 基于自监督学习的交通流预测模型 在智能交通系统中，准确预测不同时间段的城市交通流量是至关重要的。现有的方法存在两个关键的局限性：1、大多数模型集中预测所有区域的交通流量，而没有考虑空间异质性，即不同区域的交通流量分布可能存在偏差；2、现有模型无…...

编程日记 2023/10/16 14:30:29

343. 整数拆分 96.不同的二叉搜索树

343. 整数拆分 设dp[i]表示拆分 数字i 出来的正整数相乘值最大的值 (i - j) * j,和dp[i - j] * j是获得dp[i]的两种乘法&#xff0c;在里面求最大值可以得到当前dp[i]的最大值&#xff0c;但是这一次的得出的最大值如果赋值给dp[i]&#xff0c;可能没有没赋值的dp[i]大&#…...

编程日记 2023/10/16 14:29:27

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/12/24 13:40:21

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/11/28 2:51:33

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2025/12/19 11:16:32

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/12/22 15:10:06

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2025/12/25 7:21:38

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2025/12/11 21:25:46

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/10/15 15:07:34

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

编程新知 2025/12/15 18:01:37

uniapp 小程序 学习（一）

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...

编程新知 2025/12/22 10:46:32

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...

编程新知 2025/9/19 5:31:38