百度地图使用

最新推荐文章于 2024-04-08 00:43:33 发布

initial627

最新推荐文章于 2024-04-08 00:43:33 发布

阅读量139

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_56004294/article/details/127625570

版权

一、解释

1.LBS：LocationBusinessServer 基于定义位置的商业服务

2.百度地图|高德地图

二、百度地图的使用步骤

登录注册，获取秘钥 AK

引入百度地图js

  <script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=你自己的AK"></script>

创建地图的容器
```
  <div id="container"></div>
```

初始化地图

   var map = new BMap.Map(“container”)
初始化地图

创建一个地图中心点

   var point new BMap.Point(经度，纬度)

设置中心点和滚轮缩放

    map.centerAndZoom(point, 15);
// 鼠标滚轮缩放
map.enableScrollWheelZoom(true);

三、地图控制器

// 不要去记忆，要去官网粘贴复制
var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);

四、绘制内容

标点

var  p = new BMapGL.Point(e.latlng.lng,e.latlng.lat);
// 创建标记
var  m = new BMapGL.Marker(p);

画线

  var polyline = new BMapGL.Polyline(line,{strokeStyle:"dashed",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});

面

  var polygone = new BMapGL.Polygon(line,{fillColor:"red",strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})

绘制和添加圆形

    // 绘制圆圈            
var circle = new BMapGL.Circle(point,2000,{strokeColor:"green"});
// 添加圆圈
map.addOverlay(circle);

标注

    var label = new BMapGL.Label("中国前端学习基地", {       // 创建文本标注
    position: point,                          // 设置标注的地理位置
    offset: new BMapGL.Size(0, 0)           // 设置标注的偏移量
})  
// 添加标签
map.addOverlay(label);                        // 将标注添加到地图中
// 设置标签的样式
label.setStyle({
    fontSize:"32px",
    color:"red"
})

移除覆盖物

    map.removeOverlay(覆盖物);

五、案列

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container{
				width: 800px;
				height: 600px;
			}
		</style>
		<!-- 01 导入js -->
		<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=g2DVs4pVwq1DDviUCkXgMDK9ujPx9d5B&output=jsonp"></script>
	</head>
	<body>
		<input type=""  value="" onchange="search(this)" />
		<!-- 准备容器 -->
		<div id="container"></div>
		<script>
			// 初始化地图
			var map = new BMapGL.Map("container")
			// 准备一个中心点（经度，纬度）
			var point = new BMapGL.Point(113.665,34.784);
			// 设置中心点和缩放级别
			map.centerAndZoom(point, 15); 
			// 鼠标滚轮缩放
			map.enableScrollWheelZoom(true);
			
			// 添加一个点
			var marker =new BMapGL.Marker(point);
			// 添加覆盖物
			map.addOverlay(marker); 
			// 创建一个本地搜索
			var local = new BMapGL.LocalSearch(map, {
					renderOptions:{map: map}
				});
			function search(e){
				// 表单值发生变化时候进行搜索
				local.search(e.value);
			}
			 
			
			 
		</script>
	</body>
</html>