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

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。

相关文章

PostgreSQL中rank()窗口函数实用指南与示例

PostgreSQL中rank()窗口函数实用指南与示例

《PostgreSQL中rank()窗口函数实用指南与示例》在数据分析和数据库管理中,经常需要对数据进行排名操作,PostgreSQL提供了强大的窗口函数rank(),可以方便地对结果集中的行进行排名... 目录一、rank()函数简介二、基础示例：部门内员工薪资排名示例数据排名查询三、高级应用示例1. 每
阅读更多...
springboot项目中整合高德地图的实践

springboot项目中整合高德地图的实践

《springboot项目中整合高德地图的实践》：本文主要介绍springboot项目中整合高德地图的实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一：高德开放平台的使用二：创建数据库（我是用的是mysql）三：Springboot所需的依赖（根据你的需求再
阅读更多...
Windows的CMD窗口如何查看并杀死nginx进程

Windows的CMD窗口如何查看并杀死nginx进程

《Windows的CMD窗口如何查看并杀死nginx进程》：本文主要介绍Windows的CMD窗口如何查看并杀死nginx进程问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录Windows的CMD窗口查看并杀死nginx进程开启nginx查看nginx进程停止nginx服务
阅读更多...
使用WPF实现窗口抖动动画效果

使用WPF实现窗口抖动动画效果

《使用WPF实现窗口抖动动画效果》在用户界面设计中,适当的动画反馈可以提升用户体验,尤其是在错误提示、操作失败等场景下,窗口抖动作为一种常见且直观的视觉反馈方式,常用于提醒用户注意当前状态,本文将详细... 目录前言实现思路概述核心代码实现1、 获取目标窗口2、初始化基础位置值3、创建抖动动画4、动画完成后
阅读更多...
Python中pywin32 常用窗口操作的实现

Python中pywin32 常用窗口操作的实现

《Python中pywin32常用窗口操作的实现》本文主要介绍了Python中pywin32常用窗口操作的实现,pywin32主要的作用是供Python开发者快速调用WindowsAPI的一个... 目录获取窗口句柄获取最前端窗口句柄获取指定坐标处的窗口根据窗口的完整标题匹配获取句柄根据窗口的类别匹配获取句
阅读更多...
使用Python和Pyecharts创建交互式地图

使用Python和Pyecharts创建交互式地图

《使用Python和Pyecharts创建交互式地图》在数据可视化领域,创建交互式地图是一种强大的方式,可以使受众能够以引人入胜且信息丰富的方式探索地理数据,下面我们看看如何使用Python和Pyec... 目录简介Pyecharts 简介创建上海地图代码说明运行结果总结简介在数据可视化领域，创建交互式地
阅读更多...
MySQL高级查询之JOIN、子查询、窗口函数实际案例

MySQL高级查询之JOIN、子查询、窗口函数实际案例

《MySQL高级查询之JOIN、子查询、窗口函数实际案例》：本文主要介绍MySQL高级查询之JOIN、子查询、窗口函数实际案例的相关资料,JOIN用于多表关联查询,子查询用于数据筛选和过滤,窗口函... 目录前言1. JOIN（连接查询）1.1 内连接（INNER JOIN）1.2 左连接（LEFT JOI
阅读更多...
使用Folium在Python中进行地图可视化的操作指南

使用Folium在Python中进行地图可视化的操作指南

《使用Folium在Python中进行地图可视化的操作指南》在数据分析和可视化领域,地图可视化是一项非常重要的技能,它能够帮助我们更直观地理解和展示地理空间数据,Folium是一个基于Python的地... 目录引言一、Folium简介与安装1. Folium简介2. 安装Folium二、基础使用1. 创建
阅读更多...
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... 滑动窗口算法是一种基于时间窗口的限流算法，它将时间划分为若干个固定大小的窗口，每个窗口内记录了该时间
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2