首页vue.js 高德地图显示两个地点

vue.js 高德地图显示两个地点

时间: 2023-08-18 09:06:29 浏览: 223

你可以使用 Vue.js 和高德地图 JavaScript API 来显示两个地点。以下是一个简单的例子：首先，在你的 Vue.js 项目中安装高德地图 JavaScript API。你可以通过在 HTML 文件的 `<head>` 标签中添加以下代码来实现： ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script> ``` 确保将 `YOUR_API_KEY` 替换为你自己的高德地图 API 密钥。然后，在你的 Vue 组件中，你可以创建一个地图容器和两个标记来表示两个地点。在 `mounted` 钩子中，初始化地图并添加标记。以下是一个示例代码： ```vue <template> <div id="map" style="width: 100%; height: 400px;"></div> </template> <script> export default { mounted() { // 初始化地图 const map = new AMap.Map('map', { zoom: 10, // 缩放级别 center: [116.397428, 39.90923] // 地图中心点坐标 }); // 创建标记 const marker1 = new AMap.Marker({ position: [116.397428, 39.90923], // 第一个地点的坐标 map: map }); const marker2 = new AMap.Marker({ position: [116.397, 39.908], // 第二个地点的坐标 map: map }); } }; </script> ``` 在上面的示例中，你可以看到地图容器的 ID 是 "map"，而两个标记分别使用 `AMap.Marker` 创建，并将其添加到地图中。请注意，你需要将地点的经纬度坐标替换为你自己的实际坐标。这只是一个简单的示例，你可以根据你的需求进行更多的定制和调整。希望这可以帮到你！

阅读全文