高德地图的基本使用

# 创建地图

引入地图api

<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'42afa2376728cb9aa46375fb41229b42',
        }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=819edf10babf7a0e2b03f14294415b72"></script>

1
2
3
4
5
6

创建容器

<div id="map"></div>

给地图容器设置宽高

#map {
    width: 100%;
    height: 100%;
}

1
2
3
4

# 图层

var traffic = new AMap.TileLayer.Traffic({
	  'autoRefresh': true,     //是否自动刷新，默认为false
	  'interval': 180,         //刷新间隔，默认180s
	    });
	
map.add(traffic); //通过add方法添加图层

1
2
3
4
5
6

# 控件

AMap.plugin([
		'AMap.ToolBar', // 工具条
		'AMap.Scale', // 比例尺
		'AMap.HawkEye', // 缩略图
		'AMap.MapType',  // 切换控件
		'AMap.Geolocation' // 经纬度
	],function(){
		 // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
		    map.addControl(new AMap.ToolBar());
		
		    // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
		    map.addControl(new AMap.Scale());
		
		    // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
		    map.addControl(new AMap.HawkEye({isOpen:true}));
		   
		    // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
		    map.addControl(new AMap.MapType());
		   
		    // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
		    map.addControl(new AMap.Geolocation());
	})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 事件

//  监听地图的点击事件
	map.on('click', (e) => {
		console.log(666,e)
	})

1
2
3
4

# 覆盖物

map.on('click', (e) => {
		// 创建点对象
		var marker = new AMap.Marker({
			position: e.lnglat
		}) 
		// 添加到地图
		map.add(marker)
		console.log(666,e)
	})

1
2
3
4
5
6
7
8
9

上次更新: 2023/03/05, 15:03:00

← 组合式pinia的使用 css篇 →