百度地图点击图层显示信息窗口

2024-03-20 16:40
文章标签 百度 窗口 地图 点击 图层 显示信息

本文主要是介绍百度地图点击图层显示信息窗口，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

百度地图开发常用网站

1、百度地图开放平台

http://lbsyun.baidu.com/

2、百度地图 Javascript API

  • JavaScript API v3.0 http://lbsyun.baidu.com/index.php?title=jspopular3.0

  • JavaScript API v2.0 http://lbsyun.baidu.com/index.php?title=jspopular

  • JavaScript API Lite http://lbsyun.baidu.com/index.php?title=jspopularLiteV1

3、JavaScript API v2.0类参考

http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html

4、百度地图示例DEMO（JavaScript API v2.0）

http://lbsyun.baidu.com/jsdemo.htm#a1_2

5、百度地图 ak 申请：（JavaScript API v2.0）

http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey

6、开源库（JavaScript API v2.0）：鼠标绘制工具条、热力图、聚合marker、测距工具、自定义覆盖物、自定义信息窗口、路书等功能

http://lbsyun.baidu.com/index.php?title=jspopular/openlibrary

7、百度地图坐标拾取系统

http://api.map.baidu.com/lbsapi/getpoint/index.html

说明

项目中使用 JavaScript API v2.0 版本，当然也可以使用最新版 V3.0。

JavaScript API Lite是移动端浏览器上构建地图应用

 

百度地图点击图层显示信息窗口

1、百度地图 ak 申请：（JavaScript API v2.0）

http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey

2、实现效果图如下：

首先说明一下，这个功能主要是完成在地图上点击图层（覆盖物）显示详细内容。

比如，在地图上显示企业信息（企业名称、地址、负责人、电话等等）。

所以利用百度地图api可以在地图上面弹出信息窗口，当然也可以自己实现弹出信息窗口。

动态图：

3、网页源码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>百度地图点击图层显示信息窗口</title><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你在百度地图开放平台申请的ak"></script><!--  你在百度地图开放平台申请的ak --></head><body><div id="allmap" style="position: absolute; width: 100%; top: 0px; bottom: 0px"></div><script type="text/javascript">//添加鼠标单击事件、鼠标触发事件	function addMarkerClickHandler( content, marker , showType) {//图层点击事件，像是详细信息marker.addEventListener("click", function (e) {openInfo(content, e);});//鼠标经过图层时的操作marker.addEventListener("mouseover", function (e) {marker.setTop(true);//设置显示在最上面，防止多图层显示在相同位置时 无法知道时哪个图层marker.setIcon(icon_highlight);//设置图层高亮显示if (marker.getLabel()) {marker.getLabel().show();}});//鼠标离开图层后的操作marker.addEventListener("mouseout", function (e) {marker.setTop(false);//显示不同的颜色显示标签//showType//复原图层的原始图标if (showType == "1") {marker.setIcon(icon_red);} else if (showType == "2") {marker.setIcon(icon_green);}//隐藏图层标签内容if (marker.getLabel()){marker.getLabel().hide();}});}	//显示信息窗口参数及显示函数/** 信息窗口参数 */var opts = {width : 220, // 信息窗口宽度//height : 200, // 信息窗口高度//title : "详细信息" , // 信息窗口标题enableMessage : false// 设置允许信息窗发送短息};function openInfo(content, e) {var p = e.target;var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象map.openInfoWindow(infoWindow, point); // 开启信息窗口}//红色var icon_red = new BMap.Icon("img/icon_red.png", new BMap.Size(24, 35), { anchor: new BMap.Size(0, 0) });//蓝色（高亮）var icon_highlight = new BMap.Icon("img/icon_highlight.png", new BMap.Size(24, 35), { anchor: new BMap.Size(0, 0) });//绿色var icon_green = new BMap.Icon("img/icon_green.png", new BMap.Size(24, 35), { anchor: new BMap.Size(0, 0) });	var map = new BMap.Map("allmap", { minZoom: 9, maxZoom: 19 });var point = new BMap.Point(116.128554, 24.294562);var top_left_navigation = new BMap.NavigationControl();map.addControl(top_left_navigation);// 添加平移缩放控件map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT })); // 添加比例尺控件map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件map.enableScrollWheelZoom();//启用滚轮放大缩小map.centerAndZoom(point, 9);var bmp_type = new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT });map.addControl(bmp_type);var styleOptions = {strokeColor: "red", //边线颜色。fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。strokeWeight: 3, //边线的宽度，以像素为单位。strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。strokeStyle: 'solid' //边线的样式，solid或dashed。}map.disableDoubleClickZoom();//使用不同的颜色显示标签//红色图标显示图层1var marker1 = new BMap.Marker(point, { icon: icon_red, offset: new BMap.Size(0, 0) });var label1 = new BMap.Label("这是红色图标显示的标签内容", { offset: new BMap.Size(30, 0) });label1.setStyle({color: "red",fontSize: "12px",height: "20px",lineHeight: "20px",fontFamily: "微软雅黑"});label1.hide();marker1.setLabel(label1);//设置图层可以被拖动marker1.enableDragging();//添加信息窗口内容, 支持html元素var marker1Info = "";marker1Info += "企业名称：XXX公司1" +"<br/>";marker1Info += "企业地址：广东省梅州市XXX县XX镇XXXXXX" +"<br/>";marker1Info += "负责人：XXX" +"<br/>";marker1Info += "电话：186XXXXXXXX" +"<br/>";marker1Info += "其他信息1：XXXXXXXXXXXXXXXXX"+"<br/>";marker1Info += "其他信息2：XXXXXXXXXXXXXXXXX"+"<br/>";marker1Info += ".......";//添加鼠标点击事件、鼠标触发事件addMarkerClickHandler( marker1Info, marker1, "1");//绿色图标显示图层2var point2 = new BMap.Point(116.328554, 24.594562);//图层2的坐标var marker2 = new BMap.Marker(point2, { icon: icon_green, offset: new BMap.Size(0, 0) });var label2 = new BMap.Label("这是绿色图标显示的标签内容", { offset: new BMap.Size(30, 0) });label2.setStyle({color: "red",fontSize: "12px",height: "20px",lineHeight: "20px",fontFamily: "微软雅黑"});label2.hide();marker2.setLabel(label2);//设置图层可以被拖动marker2.enableDragging();//添加信息窗口内容, 支持html元素var marker2Info = "";marker2Info += "企业名称：XXX公司2" +"<br/>";marker2Info += "企业地址：广东省梅州市XXX县XX镇XXXXXX" + "<br/>";marker2Info += "负责人：XXX" +"<br/>";marker2Info += "电话：139XXXXXXXX" +"<br/>";marker2Info += "其他信息1：XXXXXXXXXXXXXXXXX"+"<br/>";marker2Info += "其他信息2：XXXXXXXXXXXXXXXXX"+"<br/>";marker2Info += ".......";//添加鼠标点击事件、鼠标触发事件addMarkerClickHandler( marker2Info , marker2, "2");//往地图中添加图层map.addOverlay(marker1);map.addOverlay(marker2);</script></body></html>

源码已经打包到百度云盘，下载地址：

链接：https://pan.baidu.com/s/1X-i8IftNaZYStHhLnaL64Q 
提取码：2kj7

 

 

 

 

 

 

 

 

 

 

 

这篇关于百度地图点击图层显示信息窗口的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/830089。

相关文章

bat脚本启动git bash窗口,并执行命令方式

bat脚本启动git bash窗口,并执行命令方式

《bat脚本启动gitbash窗口,并执行命令方式》本文介绍了如何在Windows服务器上使用cmd启动jar包时出现乱码的问题,并提供了解决方法——使用GitBash窗口启动并设置编码,通过编写s... 目录一、简介二、使用说明2.1 start.BAT脚本2.2 参数说明2.3 效果总结一、简介某些情
阅读更多...
基于Redis有序集合实现滑动窗口限流的步骤

基于Redis有序集合实现滑动窗口限流的步骤

《基于Redis有序集合实现滑动窗口限流的步骤》滑动窗口算法是一种基于时间窗口的限流算法,通过动态地滑动窗口,可以动态调整限流的速率,Redis有序集合可以用来实现滑动窗口限流,本文介绍基于Redis... 滑动窗口算法是一种基于时间窗口的限流算法，它将时间划分为若干个固定大小的窗口，每个窗口内记录了该时间
阅读更多...
百度/小米/滴滴/京东，中台架构比较

百度/小米/滴滴/京东，中台架构比较

小米中台建设实践 01 小米的三大中台建设：业务+数据+技术 业务中台--从业务说起 在中台建设中，需要规范化的服务接口、一致整合化的数据、容器化的技术组件以及弹性的基础设施。并结合业务情况，判定是否真的需要中台。 小米参考了业界优秀的案例包括移动中台、数据中台、业务中台、技术中台等，再结合其业务发展历程及业务现状，整理了中台架构的核心方法论，一是企业如何共享服务，二是如何为业务提供便利。
阅读更多...
无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题：墙体两侧特征混淆误匹配，导致建图和定位偏差，表现为过门跳变、外月台走歪等 ·解决思路：预期的根治方案IGICP需要较长时间完成上线，先使用切分地图的工程化方案，即墙体两侧切分为不同地图，在某一侧只使用该侧地图进行定位 方案思路 切分原理：切分地图基于关键帧位置，而非点云。 理论基础：光照是直线的，一帧点云必定只能照射到墙的一侧，无法同时照到两侧实践考虑：关
阅读更多...
【测试】输入正确用户名和密码，点击登录没有响应的可能性原因

【测试】输入正确用户名和密码，点击登录没有响应的可能性原因

目录 一、前端问题 1. 界面交互问题 2. 输入数据校验问题 二、网络问题 1. 网络连接中断 2. 代理设置问题 三、后端问题 1. 服务器故障 2. 数据库问题 3. 权限问题： 四、其他问题 1. 缓存问题 2. 第三方服务问题 3. 配置问题 一、前端问题 1. 界面交互问题 登录按钮的点击事件未正确绑定，导致点击后无法触发登录操作。 页面可能存在
阅读更多...
使用JS/Jquery获得父窗口的几个方法(笔记)

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法：$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用：$(selector, window.parent.parent.document);如题： $(selector, window.top.document);//获得顶级窗口里面的元素 $(
阅读更多...
C# 防止按钮botton重复“点击”的方法

C# 防止按钮botton重复“点击”的方法

在使用C#的按钮控件的时候，经常我们想如果出现了多次点击的时候只让其在执行的时候只响应一次。这个时候很多人可能会想到使用Enable=false, 但是实际情况是还是会被多次触发，因为C#采用的是消息队列机制，这个时候我们只需要在Enable = true 之前加一句 Application.DoEvents();就能达到防止重复点击的问题。 private void btnGenerateSh
阅读更多...
专题二_滑动窗口_算法专题详细总结

专题二_滑动窗口_算法专题详细总结

目录 滑动窗口，引入： 滑动窗口，本质：就是同向双指针； 1.⻓度最⼩的⼦数组（medium） 1.解析：给我们一个数组nums，要我们找出最小子数组的和==target，首先想到的就是暴力解法 1）暴力： 2）优化，滑动窗口: 1.进窗口 2.出窗口 3.更新值 2.⽆重复字符的最⻓⼦串（medium） 1）仍然是暴力解法： 2）优化： 进窗口：hash[s[rig
阅读更多...
全英文地图/天地图和谷歌瓦片地图杂交/设备分布和轨迹回放/无需翻墙离线使用

全英文地图/天地图和谷歌瓦片地图杂交/设备分布和轨迹回放/无需翻墙离线使用

一、前言说明 随着风云局势的剧烈变化，对我们搞软件开发的人员来说，影响也是越发明显，比如之前对美对欧的软件居多，现在慢慢的变成了对大鹅和中东以及非洲的居多，这两年明显问有没有俄语或者阿拉伯语的输入法的增多，这要是放在2019年以前，一年也遇不到一个人问这种需求场景的。 地图应用这块也是，之前的应用主要在国内，现在慢慢的多了一些外国的应用场景，这就遇到一个大问题，我们平时主要开发用的都是国内的地
阅读更多...
Android 引导图层、引导页

Android 引导图层、引导页

Android 引导图层（参考gith项目） Android 引导图层参考gith项目 简介不多说 先上图 部分代码说明 简介： 最最轻量级的新手引导图层库，支持单页，多个引导，支持设置不同的图形，支持动画等，例如：Activity 、fragment、各种对应View 皆可； 不多说 先上图： OK ;可以根据自己的需求重新定义 显示的效果；都
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2