示例
前提条件
- 已安装vue-cli
- 已注册高德地图开发者账号
- 已申请并获取到高德地图的API Key
步骤
1.安装高德地图JavaScript API
在你的项目中安装高德地图JavaScript API。在命令行中输入：
npm install @amap/amap-jsapi-loader --save
2.创建地图组件
在src/components目录下创建Map.vue文件，并在其中添加以下代码：
<template> <div id="map"></div> </template> <script> import { AMapJSAPIWrapper } from "@amap/amap-jsapi-loader"; export default { name: "Map", props: { apiKey: { type: String, default: "" }, center: { type: Array, default: () => [116.397428, 39.90923] }, zoom: { type: Number, default: 13 } }, data() { return { map: null }; }, async mounted() { const amapLoader = new AMapJSAPIWrapper({ key: this.apiKey, version: "2.0", plugins: ["AMap.Scale", "AMap.OverView", "AMap.ToolBar", "AMap.MapType"] }); const AMap = await amapLoader.load(); this.map = new AMap.Map("map", { zoom: this.zoom, center: this.center }); } }; </script> <style> #map { width: 100%; height: 100%; } </style>
此组件接受三个参数：
- apiKey（必需）：高德地图的API Key
- center（可选）：地图中心点的经纬度坐标。默认值为[116.397428, 39.90923]（北京市中心）
- zoom（可选）：地图的缩放级别。默认值为13
3.在App.vue中使用地图组件
在App.vue文件中引入Map组件，并将apiKey传递给它：
<template> <div id="app"> <Map :apiKey="apiKey" /> </div> </template> <script> import Map from "./components/Map.vue"; export default { name: "App", components: { Map }, data() { return { apiKey: "your api key" }; } }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
替换"your api key"成你自己申请的API Key。
4.运行项目
在命令行中输入以下命令以运行项目：
npm run serve
现在你应该能够在浏览器中看到一个显示高德地图的页面。
结束语
在这个示例中，我们演示了如何使用vue-cli和高德地图JavaScript API创建一个简单的地图应用。你可以在此基础上添加更多的功能和交互。
