直接开始
1.先申请高德地图开发者
这里就不提了,自己去申请 console.amap.com/dev/index
2.直接复制,替换安全密钥和key
<div id='container' style="width: 500px; height: 300px"></div>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode:'「您申请的安全密钥」',
}
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<script type="text/javascript" >
// 地图初始化应该在地图容器div已经添加到DOM树之后
var map = new AMap.Map('container', {
zoom:12
})
</script>
3.使用vscode的插件live server打开
4.添加一些地图参数
var map = new AMap.Map("container", {
center: [107.4, 33.42], // 初始中心经纬度
zoom: 12, // 缩放 3-20
viewMode: "3D", //设置地图模式
pitch: 45, // 俯视角度
});
5.简单示例demo
<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>
<style>
.traffic {
position: fixed;
top: 10px;
left: 10px;
}
.amap-copyright,
.amap-logo {
opacity: 0;
}
</style>
</head>
<body>
<div id="container" style="height: 100%"></div>
<script src="../source.js"></script>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=e351686993ba29f7d57cd6b408329171"
></script>
<script type="text/javascript">
// 地图初始化应该在地图容器div已经添加到DOM树之后
var map = new AMap.Map("container", {
center: [108.853982, 34.194584],
zoom: 18, // 缩放 3-20
viewMode: "3D", //设置地图模式
// pitch: 90, // 俯视角度
});
// 创建一个 Marker 实例：
var marker = new AMap.Marker({
position: new AMap.LngLat(108.853982, 34.194584), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: "家",
});
// 将创建的点标记添加到已有的地图实例：
map.add(marker);
// 移除已创建的 marker
// map.remove(marker);
map.on("click", (e) => {
const { lat, lng } = e.lnglat;
var marker = new AMap.Marker({
position: new AMap.LngLat(lng, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: "家",
});
// 将创建的点标记添加到已有的地图实例：
map.add(marker);
});
</script>
</body>
</html>
