百度地图添加label文字提示，根据缩放级别，显示label和改变文字大小

最新推荐文章于 2024-05-18 15:32:42 发布

ElevenVitaminC

最新推荐文章于 2024-05-18 15:32:42 发布

阅读量5k

点赞数 1

分类专栏：前端笔记

本文链接：https://blog.csdn.net/u013868665/article/details/105238472

版权

笔记同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

直接上代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>详情</title>
    </head>

	<body>
		<div>

        <div id="allmap" style="width: 100%;height: 100%;"></div>

        </div>
		<script src="xxx/jquery/js/jquery.js"></script>
        <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的KEY"></script>
        
        <script type="text/javascript">
          LoadBaiduMapScript();
         function LoadBaiduMapScript() {
				//console.log("初始化百度地图脚本...");
				const AK = "你的key";
				const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak=" + AK + "&s=1&callback=onBMapCallback";
				return new Promise((resolve, reject) => {
					// 如果已加载直接返回
					if(typeof BMap !== "undefined") {
						resolve(BMap);
						return true;
					}
					// 百度地图异步加载回调处理
					window.onBMapCallback = function() {
						console.log("百度地图脚本初始化成功...");
						resolve(BMap);
					};
					// 插入script脚本
					let scriptNode = document.createElement("script");
					scriptNode.setAttribute("type", "text/javascript");
					scriptNode.setAttribute("src", BMap_URL);
					document.body.appendChild(scriptNode);
				});
			}
			// 百度地图API功能
			var map = new BMap.Map("allmap"); // 创建Map实例
			map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
			//添加地图类型控件
			map.addControl(new BMap.MapTypeControl({
				mapTypes: [
					BMAP_NORMAL_MAP,
					BMAP_HYBRID_MAP
				]
			}));
			map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
			
			
			map.enableScrollWheelZoom(true);//鼠标滚轮缩放true开启
			var point=new BMap.Point(116.404,39.915);//label显示的位置
			var myLabel = new BMap.Label("<span class='my-maptip'>测试123456<br /> 测试<span>",//为lable填写内容
			{
				offset:new BMap.Size(-60,-60),//label的偏移量，为了让label的中心显示在点上
				position:point}
			);//label的位置
				myLabel.setTitle("我是文本标注label");
				myLabel.setStyle({//给label设置样式，任意的CSS都是可以的
					"color":"red",//颜色
					"fontSize":"14px",
					"border":"0",
					"height":"auto",
					"width":"auto",
					"textAlign":"center",
					"lineHeight":"30px",
					"background":"lightgray",
					"cursor":"pointer"
					}); 
			map.addOverlay(myLabel); 
			
			map.addEventListener("zoomend", function () {
                //这里根据缩放显示和隐藏文本
                var currentZoom = this.getZoom();
                	$('span.my-maptip').parent()[currentZoom<=11?'hide':'show']();
                	$('span.my-maptip').parent().css("font-size",30-currentZoom);
                
            });

			
			
		</script>
	</body>

</html>

ElevenVitaminC

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
百度地图添加label文字提示，根据缩放级别，显示label和改变文字大小

直接上代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>详情</title> </head> <body> <div> <div id="allmap" st...
复制链接

扫一扫