悠悠楠杉
网站页面
高德地图WEB版基础控件展示：构建强大交互式地图体验
06/12
1. 地图容器（Map Container）
高德地图的起始点是一个容器（<div>元素），通过JavaScript API初始化。首先需要在HTML中定义一个容器：
```html
```
然后通过JavaScript初始化地图：
javascript
var map = new AMap.Map('container', {
zoom: 10, // 初始缩放级别
center: [116.397428, 39.90923] // 初始中心点坐标
});
这段代码创建了一个500px高的地图容器，并设置其初始中心点和缩放级别。
2. 标注点（Markers）
标注点用于在地图上显示特定的位置。通过AMap.Marker创建：
javascript
var marker = new AMap.Marker({
position: [116.397428, 39.90923], // 位置坐标
title: '我的位置', // 标注点标题，用于提示信息窗口等交互效果
map: map // 指定该标注点要绑定的地图实例对象，如果不指定，则默认不绑定到任何实例上，成为一个独立的小图标。但通常都会绑定到某个地图实例上，以方便进行其他操作。
});
3. 缩放与拖动（Zoom and Drag）
高德地图支持缩放和拖动功能，允许用户对地图进行放大、缩小和拖动操作。这些操作在默认情况下是启用的：
- 缩放：通过鼠标滚轮或“+”和“-”按钮实现。
- 拖动：通过鼠标拖动地图来改变其位置。
4. 路径规划（Path Planning）
高德地图提供了强大的路径规划功能，支持从A点到B点的驾车、步行等多种路径规划：
```javascript
var driving = new AMap.Driving([116.397428, 39.90923], [116.405285, 39.926548]); // 创建驾车路径规划实例
driving.search(function(status, result) { // 回调函数获取结果
if (status === 'complete') { // 如果返回状态为完成则执行以下代码块处理结果集。result为规划结果集对象。 document.getElementById('result').innerHTML = JSON.stringify(result); // 以JSON字符串形式显示结果集。} else { // 如果返回状态为不完整或失败则处理错误或显示错误信息。alert('path planning failed');} });//end of search function });//end of driving instance });//end of AMap Driving });//end of AMap init });//end of HTML container initialization //document setup for result container }]); });//HTML container setup end });//AMap init end });//AMap Driving end});//end of setup code block//end of HTML document setup for path planning end //end of whole setup code block end //end of whole document end
