在页面上切换显示多个动态的高德地图

在页面上切换显示多个动态的高德地图，可以通过以下步骤实现：

1. 引入高德地图的JavaScript API：在HTML页面的标签中，通过以下代码引入高德地图的JavaScript API。 ```html

``` 请将代码中的“您的API Key”替换为您申请到的高德地图的API Key。

2. 创建地图容器：在HTML页面中，创建一个用于显示地图的

容器。例如： ```html``` 可以创建多个容器，用于显示多个地图。

3. 初始化地图对象：在JavaScript代码中，使用AMap.Map()方法初始化地图对象。例如： ```javascript var map1 = new AMap.Map('map1', {    zoom: 13, // 设置地图的缩放级别    center: [116.397428, 39.90923] // 设置地图的中心点坐标 });

var map2 = new AMap.Map('map2', {    zoom: 13,    center: [116.397428, 39.90923] }); ``` 可以根据需要设置地图的缩放级别和中心点坐标。

4. 添加地图控件和覆盖物：通过调用地图对象的相应方法，可以添加地图控件和覆盖物。例如： ```javascript // 添加标记 var marker1 = new AMap.Marker({    position: [116.397428, 39.90923],    map: map1 });

// 添加信息窗体 var infoWindow1 = new AMap.InfoWindow({    content: '这是地图1的信息窗体' }); marker1.on('click', function() {    infoWindow1.open(map1, marker1.getPosition()); });

// 添加缩放控件 map1.addControl(new AMap.Scale());

// 添加工具条控件 map1.addControl(new AMap.ToolBar()); ``` 可以根据需要添加不同类型的地图控件和覆盖物。

5. 切换显示地图：可以在页面中添加一个按钮，通过点击按钮实现切换显示不同的地图。例如： ```html切换显示地图``` 在JavaScript代码中，定义一个changeMap()函数，通过切换地图容器的显示和隐藏，实现切换显示地图的效果。例如： ```javascript function changeMap() {    var map1 = document.getElementById('map1');    var map2 = document.getElementById('map2');        if (map1.style.display === 'none') {        map1.style.display = 'block';        map2.style.display = 'none';    } else {        map1.style.display = 'none';        map2.style.display = 'block';    } } ``` 可以根据需要自定义切换地图的逻辑。

通过以上步骤，就可以在页面上切换显示多个动态的高德地图。可以根据需要自定义每个地图的样式、控件和覆盖物，实现丰富的地图展示功能。