百度地图添加点、多边形、圆

最新推荐文章于 2024-05-15 10:11:15 发布

frank_hehe

最新推荐文章于 2024-05-15 10:11:15 发布

阅读量1.7k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/frank_hehe/article/details/97798512

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

最近抽空看了一下百度地图的覆盖物API，特此记录一下，后续会继续学习地图其他的操作，也会记录…

<!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" />
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
	<title>百度地图添加点、多边形、圆</title>
</head>
<body>
	<div id="map"></div>
</body>
</html>

一、添加点

<script type="text/javascript">
	// 实例化地图
	var map = new BMap.Map("map");
	var point = new BMap.Point(116.404, 39.915); //创建一个point对象
	map.centerAndZoom(point, 15); //设置地图中心点以及最大缩放级别
	// 创建标注
	function addMarker(point){
	  var marker = new BMap.Marker(point); //实例化一个点对象
	  map.addOverlay(marker);//往地图里面添加点
	}
	// 创建两个点的坐标
	var points = [{
		lat: '39.910104297059966',
		lng: '116.38948794262909'
	},{
		lat: '39.92552183809066',
		lng: '116.40883707921277'
	}]
	for (var i = 0; i < points.length; i ++) {
		var pi = new BMap.Point(points[i].lng,points[i].lat) ;//实例化一个point对象
		addMarker(pi);
	}
</script>

二、添多边形

<script type="text/javascript">
	// 实例化地图
	var map = new BMap.Map("map");
	var point = new BMap.Point(116.404, 39.915); //创建一个point对象
	map.centerAndZoom(point, 15); //设置地图中心点以及最大缩放级别
	var polygon = new BMap.Polygon([
		new BMap.Point(116.387112,39.920977),
		new BMap.Point(116.385243,39.913063),
		new BMap.Point(116.394226,39.917988),
		new BMap.Point(116.401772,39.921364),
		new BMap.Point(116.41248,39.927893)
	], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});  //创建多边形
		map.addOverlay(polygon);   //往地图添加多边形
</script>

三、添加圆

<script type="text/javascript">
	// 实例化地图
	var map = new BMap.Map("map");
	var point = new BMap.Point(116.404, 39.915); //创建一个point对象
	map.centerAndZoom(point, 15); //设置地图中心点以及最大缩放级别
	var center = new BMap.Point(116.30548, 40.058246); //创建圆的中心点
    var radius = 419.4856248157139; //圆的半径
    var style = {
        strokeColor:"red",    //边线颜色。
        fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
  }
      var circle = new BMap.Circle(center,radius,style) //创建一个圆
      map.addOverlay(circle); //往地图里添加圆
      map.setCenter(center); //重新设置地图的中心
</script>

frank_hehe

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
百度地图添加点、多边形、圆

最近抽空看了一下百度地图的覆盖物API，特此记录一下，后续会继续学习地图其他的操作，也会记录…<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" c...
复制链接

扫一扫