百度地图_自动标记/点击图标显示对应信息

最新推荐文章于 2021-05-25 15:11:06 发布

在线笔记本

最新推荐文章于 2021-05-25 15:11:06 发布

阅读量3.1k

点赞数 1

分类专栏：百度地图文章标签： js

本文链接：https://blog.csdn.net/wangshao5122/article/details/106144540

版权

百度地图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、百度地图前端页面–根据json数据自动标记，点击标记显示对应信息。
百度地图JavaScript API ：http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a0b0
在这里插入图片描述
2、代码+注解，使用前修改ak。

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet4</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script>
    <style TYPE="text/css">
		#container{
			width: 100%;
			height: 500px;
			float: left; 
			border: 1px solid rgb(200, 200, 200); 
			margin-left: 12px; 
			overflow: hidden; 
			position: relative; 
			z-index: 0; 
			color: rgb(0, 0, 0); 
			text-align: left;
			}

    </style>
</head>
<body>
	<div id="container"></div>
</body>
<script>
	//地图初始化
	var map = new BMap.Map("container");	//创建地图对象
	var point = new BMap.Point(119.507179943,35.4202251931);//创建地图中心点坐标对象（日照市）
    map.centerAndZoom(point, 12);		//设置初始化地图中心位置坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	map.enableKeyboard(); //键盘放大

	//添加地图类型控件（地图/混合）
	map.addControl(new BMap.MapTypeControl({
	mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
        ]
	}));  

	//城市定位
	map.enableInertialDragging();
	map.enableContinuousZoom();
	var size = new BMap.Size(10, 20);
	map.addControl(new BMap.CityListControl({
   		anchor: BMAP_ANCHOR_TOP_LEFT,
   		offset: size,
	}));


	//标注信息json
	var str = {
		"xy":[{
			"x":"119.524068",
			"y":"35.442753",
			"title":"河·左岸",
			"text":"温度/浓度"
		},{
			"x":"119.494604",
			"y":"35.440871",
			"title":"香河祥和嘉园",
			"text":"温度/湿度/压力/浓度"
		}]
	};

	//循环取出对应数据  
	for(let i = 0;i<str.xy.length;i++){
		var points = new BMap.Point(str.xy[i].x,str.xy[i].y);	//创建经纬度坐标对象
		var marker = new BMap.Marker(points);			//创建标记对象
		map.addOverlay(marker); 	//标记地图
		//添加标记点击事件	
		marker.addEventListener("click",function(e){
			addMarker(str.xy[i]);
		});
	}
		         
	// 编写自定义函数,绑定信息窗口	
	function addMarker(data){
		//重新创建经纬度坐标对象，防止覆盖
		var points = new BMap.Point(data.x,data.y);
		var size = new	BMap.Size(0,-13);
		var opts = {
				width: 250,  // 信息窗口宽度 
				height: 100,  // 信息窗口高度 
				title: data.title, // 信息窗口标题 
				offset: size	//增加偏移量
			}
		//创建信息窗口对象
		var infoWindow = new BMap.InfoWindow(data.text, opts); 
		//对标注对象和信息窗口进行绑定	
		map.openInfoWindow(infoWindow, points);
}	
    </script>

</html>

在线笔记本

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
百度地图_自动标记/点击图标显示对应信息

1、百度地图前端页面–根据json数据自动标记，点击标记显示对应信息。2、代码+注解，使用前修改ak。<!DOCTYPE html><html><head> <title>Leaflet4</title> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
复制链接

扫一扫