oms之___车辆调度 vue高德地图：vue-amap

最新推荐文章于 2024-09-04 18:51:06 发布

置顶

一波又起

最新推荐文章于 2024-09-04 18:51:06 发布

阅读量2.7k

点赞数 2

分类专栏： vue高德地图 Vue.js 文章标签： vue-amap vue调用高德地图高德地图

本文链接：https://blog.csdn.net/qq_37126704/article/details/86528500

版权

本文介绍了如何在Vue项目中使用vue-amap库来集成高德地图，实现车辆调度功能。详细讲解了vue-amap的安装、配置及关键API的使用，帮助开发者快速掌握在前端应用中利用高德地图进行地图展示和车辆定位。

摘要由CSDN通过智能技术生成

cnpm install vue-amap -S // 安装项目依赖

项目 main.js里面：
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
// 配置
VueAMap.initAMapApiLoader({
  key: 'c800ea593e4d8138cfe450b2c672d002', // 在高德开放平台上申请的 web  Pc端 key
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.TruckDriving', 'AMap.Geolocation'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
})

<style>
  .amap-demo {
    height: 400px;
  }
</style>
<template>
  <el-row>
    <el-col :span="24">
      <div>
        <el-amap vid="amapDemo" :center="center" :plugin="plugin" ref="map" class="amap-demo" style="height: 400px;">
          <el-amap-marker v-for="(item,index) in computedCarList" :position="item.marker" :key="in