百度地图画多边形区域

最新推荐文章于 2024-05-22 21:54:15 发布

iteye_14207

最新推荐文章于 2024-05-22 21:54:15 发布

阅读量3.1k

点赞数

分类专栏：海悦文章标签：百度地图多边形画图地图画多边形地图画区域

本文链接：https://blog.csdn.net/iteye_14207/article/details/82571155

版权

海悦专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在百度地图上画多边形区域，

<html>
	<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<title>百度地图画多边形</title>
</head>
<body>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.3"></script>

<script type="text/javascript">
var map;
function initialize() {
  // 百度地图API功能
  map = new BMap.Map("map_canvas");
  map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
  map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
  map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
  map.enableScrollWheelZoom();                            //启用滚轮放大缩小
  map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
	map.setMapType(BMAP_SATELLITE_MAP);
  	var point = new BMap.Point(108.896, 34.330);    // 创建点坐标
		map.centerAndZoom(point,13); 	                  // 初始化地图,设置中心点坐标和地图级别。
		var polygon = new BMap.Polygon([
	  new BMap.Point(108.853025, 34.298633),
	  new BMap.Point(108.85475, 34.318075),
	  new BMap.Point(108.856475, 34.319744),
	  new BMap.Point(108.857049, 34.331431),
	  new BMap.Point(108.85245, 34.343354),
	  new BMap.Point(108.852881, 34.351223),
	  new BMap.Point(108.888095, 34.355872),
	  new BMap.Point(108.925896, 34.366123),
	  new BMap.Point(108.925896, 34.302808),
	  new BMap.Point(108.901749, 34.300422),
	  new BMap.Point(108.898012, 34.291714),
	  new BMap.Point(108.877603, 34.291833),
	  new BMap.Point(108.861793, 34.296605)
			], {strokeColor:"#f50704",fillColor:"", strokeWeight:3, strokeOpacity:0,fillOpacity:0,});
		map.addOverlay(polygon);
  //showToolAutoDef();
}
</script>
</head>
<body onLoad="initialize()">
  <div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>

注：

var point = new BMap.Point(108.896, 34.330); ------>定位地图

new BMap.Point(108.853025, 34.298633)--->点的坐标

map.centerAndZoom(point,13);----->数字是地图的尺寸

strokeColor:"#f50704",------->线条颜色

fillColor:"", ------>多边形区域的颜色