首页vue2使用高德地图案例长沙市

vue2使用高德地图案例长沙市

时间: 2023-07-18 20:08:00 浏览: 215

以下是一个基于Vue2的高德地图案例，展示长沙市的地图： 1. 在index.html中引入高德地图API ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue2 + 高德地图案例</title> </head> <body> <div id="app"></div> <script src="//webapi.amap.com/maps?v=1.4.15&key=你的高德地图API Key"></script> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script> <script src="app.js"></script> </body> </html> ``` 2. 创建Vue实例并初始化地图 ```javascript var app = new Vue({ el: '#app', data: { map: null // 地图实例 }, mounted() { // 初始化地图 this.map = new AMap.Map('app', { zoom: 12, // 缩放级别 center: [112.9388, 28.2282] // 中心点坐标，这里是长沙市的经纬度 }); } }); ``` 3. 在地图上添加标记 ```javascript var marker = new AMap.Marker({ position: [112.9388, 28.2282], // 标记坐标，这里是长沙市的经纬度 title: '长沙市' // 标题 }); marker.setMap(this.map); // 在地图上添加标记 ``` 完整代码如下： ```javascript var app = new Vue({ el: '#app', data: { map: null // 地图实例 }, mounted() { // 初始化地图 this.map = new AMap.Map('app', { zoom: 12, // 缩放级别 center: [112.9388, 28.2282] // 中心点坐标，这里是长沙市的经纬度 }); // 添加标记 var marker = new AMap.Marker({ position: [112.9388, 28.2282], // 标记坐标，这里是长沙市的经纬度 title: '长沙市' // 标题 }); marker.setMap(this.map); // 在地图上添加标记 } }); ``` 注意：在使用高德地图API时，需要先申请高德地图API Key。

阅读全文