调用百度地图API：绘制多个地区的轮廓图

knighthood2001

于 2024-05-22 21:54:15 发布

阅读量1k

点赞数 34

分类专栏：百度地图文章标签：百度开发语言

本文链接：https://blog.csdn.net/knighthood2001/article/details/139119189

版权

百度地图专栏收录该内容

6 篇文章 0 订阅

订阅专栏

📚博客主页：knighthood2001
✨公众号：认知up吧（目前正在带领大家一起提升认知，感兴趣可以来围观一下）
🎃知识星球：【认知up吧|成长|副业】介绍
❤️感谢大家点赞👍🏻收藏⭐评论✍🏻，您的三连就是我持续更新的动力❤️
🙏笔者水平有限，欢迎各位大佬指点，相互学习进步！

以下代码中，通过更改其中的地名，打开就会高亮具体的地区，并框选轮廓。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=vkKJugWFCxRYbmVunfTWLfAk2DkoVw7U"></script>
	<title>地球模式</title>
</head>
<body>
	<div id="allmap"></div>
</body>
<script type="text/javascript">
    // 创建地图对象
	var map = new BMapGL.Map("allmap");
	map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5);
	map.enableScrollWheelZoom(true);
	map.setMapType(BMAP_EARTH_MAP);

	// 绘制某个地区的轮廓图
	var bdary = new BMapGL.Boundary();
	//你要的地图
	bdary.get("苏州", function(rs){
		// 获取行政区域边界
		var count = rs.boundaries.length;
		if (count === 0) {
			alert('未能获取到该地区的边界数据');
			return;
		}
		for (var i = 0; i < count; i++) {
			// 创建多边形覆盖物
			// var ply = new BMapGL.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000", fillColor: "transparent"});
			var ply = new BMapGL.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000", fillColor: "yellow"});
			map.addOverlay(ply);  // 添加覆盖物到地图
		}
	}
	);

</script>
</html>

在这里插入图片描述

如果你需要多个地区，你也可以改源代码。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=vkKJugWFCxRYbmVunfTWLfAk2DkoVw7U"></script>
	<title>地球模式</title>
</head>
<body>
	<div id="allmap"></div>
</body>
<script type="text/javascript">
    // 创建地图对象
	var map = new BMapGL.Map("allmap");
	map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5);
	map.enableScrollWheelZoom(true);
	map.setMapType(BMAP_EARTH_MAP);

	// 绘制多个地区的轮廓图
	var regions = [
		{ name: "无锡", color: "#ff0000" },
		{ name: "常州", color: "#00ff00" },
		{ name: "湖州", color: "#0000ff" },
		{ name: "苏州", color: "#00f0f0" },
		{ name: "上海", color: "#ffffff" }
	]; // 要绘制的地区及对应颜色

	var bdary = new BMapGL.Boundary();
	for (var i = 0; i < regions.length; i++) {
		(function(region) {
			bdary.get(region.name, function(rs){
				// 获取行政区域边界
				var count = rs.boundaries.length;
				if (count === 0) {
					alert('未能获取到该地区的边界数据');
					return;
				}
				var allBoundaries = [];
				for (var j = 0; j < count; j++) {
					allBoundaries = allBoundaries.concat(rs.boundaries[j]);
				}
				// 创建多边形覆盖物 fillOpacity设置填充物的不透明度
				var ply = new BMapGL.Polygon(allBoundaries, {strokeWeight: 2, strokeColor: region.color, fillColor: region.color, fillOpacity: 0.8});
				map.addOverlay(ply);  // 添加覆盖物到地图
			});
		})(regions[i]);
	}

</script>
</html>