高德地图文档： lbs.amap.com/api/jsapi-v…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Document</title>
</head>
<style>
#container {
width: 100vw;
height: 100vh;
}
</style>
<body>
<!-- 准备盒子 -->
<div id="container"></div>
<!-- 替换钥匙 -->
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: '3f4d077db238b1077a842f7c6675eaa5'
}
</script>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=50f7c702c77ab7423ca30991f36e9aee"
></script>
<!--配置-->
<script>
var map = new AMap.Map('container', {
zoom: 15, //级别
center: [120.211261, 30.244689], //经纬度中心点坐标
viewMode: '3D' //使用3D视图
})
//当前位置标记
var marker = new AMap.Marker({
position: [120.211261, 30.244689] //经纬度中心点坐标
})
map.add(marker) //添加到地图
// 路况图
var trafficLayer = new AMap.TileLayer.Traffic({
zIndex: 10
})
map.add(trafficLayer) //添加图层到地图
//构建信息窗体中显示的内容(当前位置的提示信息)
var info = []
info.push(
'<div><div><img style="float:left;" src=" https://webapi.amap.com/images/autonavi.png "/></div> '
)
info.push('<div style="padding:0px 0px 0px 4px;"><b>高德软件</b>')
info.push('电话 : 010-84107000 邮编 : 100102')
info.push('地址 :北京市朝阳区望京阜荣街10号首开广场4层</div></div>')
infoWindow = new AMap.InfoWindow({
content: info.join('<br/>') //使用默认信息窗体框样式，显示信息内容
})
infoWindow.open(map, map.getCenter())
// 圆形范围图
// 构造矢量圆形
var circle = new AMap.Circle({
center: new AMap.LngLat('120.211261', '30.244689'), // 圆心位置
radius: 300, //半径
strokeColor: '#F33', //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线粗细度
fillColor: '#ee2200', //填充颜色
fillOpacity: 0.35 //填充透明度
})
// 单独将点标记添加到地图上
// add方法可以传入一个覆盖物数组，将点标记和矢量圆同时添加到地图上
map.add(circle)
</script>
</body>
</html>
