准备工作:
1、在高德开放平台,注册开发者账号;
2、登陆之后,进入“应用管理”,点击“我的应用”,选择右上角“创建新应用”;
3、为应用添加 Key,在“服务平台”一项选择“Web 端 ( JSAPI ) ”。
页面实现:
1、创建一个div,作为地图的容器;
2、设置div的宽和高;
3、引入高德地图的js,并且在对应的位置填写刚才在准备工作中申请的key值;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图Demo</title>
<link rel="stylesheet" type="text/css" href="./map.css"/>
</head>
<body>
<div id="wrapper"></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=申请的key值"></script>
<script src="./map.js"></script>
</body>
</html>
#wrapper{
width:1000px;
height:800px;
}
4、异步初始化高德地图插件。
window.onload = function(){
var map = new AMap.Map('wrapper',{
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 10 //指定缩放级别
});
}
大功告成啦,下面是效果图: