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

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

时间: 2023-08-18 08:06:31 浏览: 136

您可以使用 Vue.js 和高德地图 JavaScript API 来显示两个地点。首先，需要在 HTML 文件中引入高德地图的 JavaScript API，然后在 Vue 组件中编写代码来实现地图显示。以下是一个简单的示例：在 HTML 文件中引入高德地图的 JavaScript API： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue.js 高德地图示例</title>  <script src="https://webapi.amap.com/maps?v=1.4.15&key=your_amap_api_key"></script> </head> <body> <div id="app"> <div id="map"></div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="app.js"></script> </body> </html> ``` 在 app.js 文件中编写 Vue 组件的代码： ```javascript new Vue({ el: '#app', mounted() { // 在组件挂载后初始化地图 this.initMap(); }, methods: { initMap() { // 创建地图实例 const map = new AMap.Map('map', { zoom: 10, // 设置地图缩放级别 center: [lng, lat] // 设置地图中心点坐标 }); // 添加标记点 const marker1 = new AMap.Marker({ position: [lng1, lat1], // 设置标记点坐标 map: map }); const marker2 = new AMap.Marker({ position: [lng2, lat2], // 设置标记点坐标 map: map }); } } }); ``` 在上面的代码中，您需要将 `your_amap_api_key` 替换为您自己的高德地图 API 密钥。`lng` 和 `lat` 分别表示地点的经度和纬度，您可以根据实际需求替换它们。请注意，上述代码只是一个简单的示例，您可能还需要进行其他设置和样式调整来满足您的需求。详细的文档和示例可以在高德地图 JavaScript API 官方网站上找到。

阅读全文