首页vue3高德地图货运轨迹

vue3高德地图货运轨迹

时间: 2025-01-15 08:17:43 AIGC 浏览: 67

### 集成高德地图API实现货运轨迹跟踪 #### 安装依赖库为了在Vue3项目中集成高德地图并显示货运轨迹，需先安装`@amap/amap-jsapi-loader`作为加载器来引入高德地图JS API。 ```bash npm install @amap/amap-jsapi-loader --save ``` #### 创建地图实例通过创建一个名为`useMap.js`的文件，在其中定义用于初始化地图以及绘制路径的方法。此方法接收起点坐标数组参数，并基于这些点构建路线[^1]。 ```javascript // src/composables/useMap.js import { defineStore } from 'pinia'; import AMapLoader from '@amap/amap-jsapi-loader'; export const useMap = defineStore('map', { state: () => ({ mapInstance: null, }), actions: { async initMap(containerId, pathData) { await AMapLoader.load({ key: "Your_AMap_Key", // 替换成自己的key version: "2.0", plugins: [] }).then((AMap)=>{ this.mapInstance = new AMap.Map(containerId,{ zoom: 10 }); let polyline = new AMap.Polyline({ path: pathData, strokeColor: "#FF33FF", strokeWeight: 6, strokeOpacity: 0.9 }); polyline.setMap(this.mapInstance); }) } }, }); ``` #### 组件内调用最后一步是在组件内部使用上述定义好的store对象及其action完成具体业务逻辑处理。这里假设有一个叫做`LogisticsTracking.vue` 的单文件组件负责呈现最终的地图视图. ```vue <template> <div id="container"></div> </template> <script setup> import { onMounted } from 'vue' import { useMap } from '../composables/useMap' const logisticsPath = [ [116.478948,39.99756], [116.481122,39.99756], ... ] onMounted(() => { const mapStore = useMap(); mapStore.initMap('container',logisticsPath); }) </script> <style scoped> #container{ width: 100%; height: calc(100vh - 20px); /* 调整容器大小 */ } </style> ```

阅读全文