简单交互式地图应用 - 在地图上显示位置按钮

这段代码是一个简单的地图应用，通过在地图上显示不同的位置按钮，并且点击按钮时弹出位置名称。

代码中使用了 HTML、CSS 和 JavaScript 来实现功能。首先，在 HTML 中定义了一个带有 class 为'map' 的 div 元素作为地图容器，并在其中定义了多个 class 为'location' 的按钮元素，每个按钮代表一个位置。按钮的 id 属性与位置数组中的 id 属性对应。

在 CSS 中定义了地图容器和位置按钮的样式。地图容器的宽度和高度为 600px 和 400px，并设置了背景图片为'map.jpg'（需要替换为实际的地图背景图片），同时设置背景大小为 cover，以适应容器大小。位置按钮的宽度和高度为 30px，背景颜色为蓝色（需要替换为实际的按钮颜色），并设置了鼠标悬停时的背景颜色为红色（需要替换为实际的按钮悬停颜色）。

在 JavaScript 中定义了一个位置数组，包含了每个位置的 id 和名称。然后定义了一个函数 getRandomPosition()，用于生成随机位置。函数中获取了地图容器的宽度和高度，以及按钮的大小，并计算出最大的 x 和 y 坐标值。然后使用 Math.random() 函数生成随机的 x 和 y 坐标，并返回一个包含 x 和 y 坐标的对象。

接下来定义了一个名为 displayLocationName() 的函数，用于在点击位置按钮时显示位置名称。函数中获取了点击按钮的 id，并使用 find() 方法在位置数组中找到对应的位置对象。然后弹出该位置对象的名称。

最后，在页面加载完成时，获取所有的位置按钮元素，并使用 forEach() 方法为每个按钮设置随机位置，并显示出来。同时为每个按钮添加了点击事件监听器，当点击按钮时调用 displayLocationName() 函数。

要运行这段代码，将其保存为一个 HTML 文件，然后在浏览器中打开该文件即可看到地图应用的效果。