使用JavaScript实现百度地图功能与交互-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_64042638/article/details/128411394

实现百度地图功能

1.使用地理位置

1.1获取当前位置getCurrentPosition()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>地理位置</title>
	</head>
	<body>
		<p>点击按钮获取您当前位置：</p>
		<button onclick="getPosition()">点我</button>
		<p>您的位置是：</p>
		<p id="response"></p>
		<script>
			var response = document.getElementById('response');

			var options = {
				enableHighAccuracy: false, // 启用高精度
				timeout: 5000 // 定位超时时间，超时时间内一定返回结果
			}

			/**
			 * 获取地理位置
			 */
			function getPosition() {
				// 检测浏览器是否支持地理定位
				if (navigator.geolocation) {
					// 浏览器支持，获取地理位置
					navigator.geolocation.getCurrentPosition(success, error, options);
				} else {
					// 浏览器不支持，提示用户
					response.innerText = '您的浏览器不支持获取地理位置。';
				}
			}

			/**
			 * 获取成功
			 * @param {Object} result 返回的结果
			 */
			function success(result) {
				response.innerHTML = `纬度：${result.coords.latitude.toFixed(5)}<br />经度：${result.coords.longitude.toFixed(5)}`;
			}

			/**
			 * 获取失败
			 * @param {Object} error 异常信息
			 */
			function error(error) {
				switch (error.code) {
					case error.PERMISSION_DENIED:
						response.innerText = '没有获取地理位置信息的权限。';
						break
					case error.POSITION_UNAVAILABLE:
						response.innerText = '地理位置获取失败。';
						break;
					case error.TIMEOUT:
						response.innerText = '获取地理位置超时。';
						break;
					default:
						break;
				}
			}
		</script>
	</body>
</html>

属性：latitude:纬度

longitude:经度

accuracy：高精度

1.2异常处理：

2.百度API

2.1加载 JavaScript AP

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度地图</title>
		<style>
			#map { width: 800px; height: 600px; }
		</style>
	</head>
	<body>
		<div id="map"></div>
		<script>
			// 初始化地图
			function initialize() {  
			  var map = new BMap.Map('map');  
			  map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);  
			}  
			
			// 加载 JavaScript API
			function loadScript() {  
			  var script = document.createElement("script");  
			  script.src = "https://api.map.baidu.com/api?v=2.0&ak=mETWRRt2iKZmAomVO0WhohX32tPGTUtC&callback=initialize";
			  document.body.appendChild(script);
			}
			
			window.onload = loadScript;
		</script>
	</body>
</html>

2.2修改初始坐标位置

// 初始化地图
function initialize() {  
  var map = new BMap.Map('map');  
  map.centerAndZoom(new BMap.Point(113.839158, 34.729169), 12);
}

2.3添加地图控件

// 初始化地图
function initialize() {
  var map = new BMap.Map('map');
  map.centerAndZoom(new BMap.Point(113.839158, 34.729169), 12);
  
  map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
  map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
  map.addControl(new BMap.OverviewMapControl()); // 添加缩略图控件
}

2.4添加标注

// 初始化地图
function initialize() {
	var point = new BMap.Point(113.839158, 34.729169);
	var map = new BMap.Map('map');
	map.centerAndZoom(point, 12);
    
	map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
	map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
	map.addControl(new BMap.OverviewMapControl()); // 添加缩略图控件
    
	var marker = new BMap.Marker(point); // 创建标注
	map.addOverlay(marker); // 将标注添加到地图中
    
	var opts = {
		width: 240,
		height: 80,
		title: `厚溥IT`
	}
	var infoWindow = new BMap.InfoWindow('河南省郑州市经济技术开发区航海东路中兴新业港51号楼', opts); // 创建信息窗口对象
	marker.addEventListener('click', function() {
		map.openInfoWindow(infoWindow, point); // 打开信息窗口
	})
}

2.5导航

function initialize() {
	var point = new BMap.Point(113.839158, 34.729169); // 目标地理位置
	var map = new BMap.Map('map');
	map.centerAndZoom(point, 12);
	map.enableScrollWheelZoom(true); // 启用滚轮缩放
    
	map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
	map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
	map.addControl(new BMap.OverviewMapControl()); // 添加缩略图控件
    
	var marker = new BMap.Marker(point); // 创建标注
	map.addOverlay(marker); // 将标注添加到地图中
	var opts = {
		width: 240,
		height: 80,
		title: `厚溥IT`
	}
    
	var infoWindow = new BMap.InfoWindow('河南省郑州市经济技术开发区航海东路中兴新业港51号楼', opts); // 创建信息窗口对象
	marker.addEventListener('click', function() {
		map.openInfoWindow(infoWindow, point); // 打开信息窗口
	})
    
	var geolocation = new BMap.Geolocation();
	geolocation.enableSDKLocation(); // 开启SDK辅助定位
	geolocation.getCurrentPosition(function(result) {
		if (this.getStatus() == BMAP_STATUS_SUCCESS) {
			var current = result.point; // 当前地理位置
			var driving = new BMap.DrivingRoute(map, {
				renderOptions: {
					map: map,
					autoViewport: true
				}
			});
			driving.search(current, point); // 驾车路线规划
		}
	})
}

3.拖放

事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>拖拽事件</title>
		<style>
			.box {
				width: 262px;
				height: 46px;
				padding: 15px;
				border: 2px solid #aaaaaa;
			}
		</style>
	</head>
	<body>
		<div id="div1" class="box" ondrop="drop(event)" ondragover="allowDrop(event)">
			<img id="logo" src="img/logo.jpg" draggable="true" ondragstart="drag(event)" width="262" height="46">
		</div>
		<br />
		<div id="div2" class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<script>
			function allowDrop(ev) {
				ev.preventDefault();
			}

			function drag(ev) {
				ev.dataTransfer.setData("text/plain", ev.target.id);
			}

			function drop(ev) {
				ev.preventDefault();
				var id = ev.dataTransfer.getData("text/plain");
				ev.target.appendChild(document.getElementById(id));
			}
		</script>
	</body>
</html>

3.1拖动什么 - ondragstart 和 setData(）

3.2拖放到何处 - ondragover

3.3进行放置 - ondrop

4.web storage

localStorage 的使用:

localStorage:

localStorage 的使用

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

sessionStorage 的使用

sessionStorage :(会话）进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

不管是 localStorage，还是 sessionStorage，可使用的 API 方法和属性都相同：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>存储和移除字符串</title>
	</head>
	<body>
		<button onclick="save()">存储</button>
		<button onclick="read()">读取</button>
		<button onclick="remove()">移除</button>
		<p>存储的值：<span id="result"></span></p>
		<script>
			function save() {
				// 存储字符串
				localStorage.sitename = '百度一下';
			}

			function read() {
				// 读取字符串
				document.getElementById('result').innerText = localStorage.sitename;
			}

			function remove() {
				// 移除字符串
				localStorage.removeItem('sitename');
			}
		</script>
	</body>
</html>