百度地图鼠标经过图层时高亮显示图标及标签内容

最新推荐文章于 2023-10-18 21:21:05 发布

zgphacker2010

最新推荐文章于 2023-10-18 21:21:05 发布

阅读量2.3k

点赞数 1

分类专栏： Map地图文章标签：图层高亮显示

本文链接：https://blog.csdn.net/zgphacker2010/article/details/103789877

版权

Map地图专栏收录该内容

13 篇文章 1 订阅

订阅专栏

百度地图开发常用网站

1、百度地图开放平台

http://lbsyun.baidu.com/

2、百度地图 Javascript API

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、实现效果图如下：

首先说明一下，这个功能主要是完成在地图上图层（覆盖物）显示数据过多时，默认是不显示图层的标签内容的（标签内容长度不固定），所以添加在图层初始化的时候添加鼠标事件，当鼠标经过时高亮显示该图层及标签内容，当鼠标离开图层时，恢复该图层的原始图标。

这里使用两种不同颜色（红色和绿色）的图标在地图上绘制图层，鼠标经过时高亮显示另一种颜色的图标（蓝色）。

动态图：

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>
	</head>
	<body>
		<div id="allmap" style="position: absolute; width: 100%; top: 0px; bottom: 0px"></div>
		<script type="text/javascript">
		//添加鼠标单击事件、鼠标触发事件	
		function addMarkerClickHandler( marker , showType) {
	    	marker.addEventListener("rightclick", function (e) {
		        //openInfo(content, e);
		        alert("鼠标右键操作");
		    });
		    //鼠标经过图层时的操作
		    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 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();
        
        
        //使用不同的颜色显示标签
        //红色图标显示图层1
        var 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();
        //添加鼠标点击事件、鼠标触发事件
        addMarkerClickHandler(marker1, "1");
        
        
        //绿色图标显示图层2
        var 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();
         //添加鼠标点击事件、鼠标触发事件
        addMarkerClickHandler( marker2, "2");
        
        //往地图中添加图层
        map.addOverlay(marker1);
  		map.addOverlay(marker2);
        
    

    </script>
	</body>
	
</html>

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

链接：https://pan.baidu.com/s/1bV_InQQBwSz71pPqCwHzFA
提取码：2l97
复制这段内容后打开百度网盘手机App，操作更方便哦

zgphacker2010

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
百度地图鼠标经过图层时高亮显示图标及标签内容

百度地图开发常用网站1、百度地图开放平台http://lbsyun.baidu.com/2、百度地图Javascript API JavaScript API v3.0http://lbsyun.baidu.com/index.php?title=jspopular3.0 JavaScript API v2.0http://lbsyun.baidu.com/ind...
复制链接

扫一扫