vue 高德地图实时路况

最新推荐文章于 2024-04-23 14:51:10 发布

羊村我最sαo

最新推荐文章于 2024-04-23 14:51:10 发布

阅读量725

点赞数 1

文章标签： javascript vue

本文链接： https://blog.csdn.net/Kenom_/article/details/131150367

版权

先放效果图

1、准备工作

路况信息只需要使用web端即可实现

2、代码部分

（1）在/public/index.html中引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=准备工作中添加的key"></script>

（2）在需要用到地图的页面中

<template>
  <div class="traffic-congestion-data-container">
    <div id="amap-container" class="amap-container" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      longAndLat: [108.94703, 34.25943]
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      var map = new AMap.Map('amap-container', {
        // 地图中心位置
        center: this.longAndLat,
        resizeEnable: true,
        // 主题色
        mapStyle: 'amap://styles/darkblue',
        // 地图层级
        zoom: 12
      })
      // 实时路况图层
      var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10,
        zooms: [7, 20]
      })
      trafficLayer.setMap(map)
    }
  }
}
</script>

官方给出了11中主题样式，没有满足需求的也可自定义主题

标准：normal

幻影黑：dark

月光银：light

远山黛：whitesmoke

草色青：fresh

雅士灰：grey

涂鸦：graffiti

马卡龙：macaron

靛青蓝：blue

极夜蓝：darkblue

酱籽：wine

（3）隐藏高德地图左下角logo，在/public/index.html中写入样式

<style type="text/css">
    .amap-logo{
        display: none;
        opacity:0 !important;
    }
    .amap-copyright {
        opacity:0;
    }
</style>

最后附上官方示例地址：实时路况图层-高德官方图层-示例中心-JS API 2.0 示例 | 高德地图API