第一步搜索高德地图开发平台注册开发者账号,
第二步申请key码: 点击
应用管理
创建新应用,填写相应信息后,会生成key码以及安全
准备好开发key码后,就可以去代码里操作了
首先线上引入map.loader;
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:'您的秘钥',
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您的key码"></script>
创建一个盒子供地图来使用
<div id="container" style="width: 500px; height: 500px;"></div>
设置地图配置
<script>
var map = new AMap.Map('container', {
zoom:11,//级别
center: [116.397428, 39.90923],//中心点坐标
viewMode:'3D'//使用3D视图
});
</script>
这样一个基本的地图就显示出来了
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:'a6c379decf7caed734f91d652202f8fa',
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=6269d1c5deae61aaf372171ad1c9b752"></script>
</head>
<body>
<div id="container" style="width: 500px; height: 500px;"></div>
</body>
<script>
var map = new AMap.Map('container', {
zoom:11,//级别
center: [116.397428, 39.90923],//中心点坐标
viewMode:'3D'//使用3D视图
});
</script>
</html>
完成页面如下:
https://file.cfanz.cn/uploads/png/2022/03/11/14/5227b00UE5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6LWw5ZCR5aSn5YmN56uv,size_20,color_FFFFFF,t_70,g_se,x_16
