准备工作：
1、在高德开放平台，注册开发者账号；
2、登陆之后，进入“应用管理”，点击“我的应用”，选择右上角“创建新应用”；
3、为应用添加 Key，在“服务平台”一项选择“Web 端 ( JSAPI ) ”
4、记住这个Key，等会要用，以后可能也会用，一定要记住。
页面实现：
1、创建一个div，作为地图的容器；
2、设置div的宽和高；
3、引入高德地图的js，并且在对应的位置填写刚才在准备工作中申请的key值；
4、异步初始化高德地图插件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高德地图示例</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100%;
}
</style>
<script src="https://webapi.amap.com/maps?v=2.0&key="这里是你的Key""></script>
</head>
<body>
<div id="map"></div>
<!-- <div style="font-size: 20px;width:70px;height:30px;background-color: black;border-radius: 5;color: white;"></div> -->
<script>
// 初始化地图
function initMap() {
// 创建地图实例
var map = new AMap.Map('map', {
center: [116.397428, 39.90923], // 初始化地图中心点
zoom:20 // 初始化地图缩放级别
});
// 添加标记
var marker = new AMap.Marker({
position: [116.397428, 39.90923], // 标记位置
title: '天安门', // 标记标题
label: {
content: '天安门',
offset: new AMap.Pixel(20, 20)
}
});
marker.setMap(map);
// 添加信息窗口
var infoWindow = new AMap.InfoWindow({
content: '<div style="font-size: 20px;width:70px;height:30px;background-color: black;border-radius: 5;color: white;">天安门</div>',
offset: new AMap.Pixel(0, -30)
});
// 显示信息窗口
marker.on('click', function() {
infoWindow.open(map, marker.getPosition());
});
}
// 等待地图API加载完成后再初始化地图
window.onload = function() {
initMap();
};
</script>
</body>
</html>
最终的效果图：
