Vue项目(vuecli3.0搭建)集成高德地图实现路线轨迹绘制

本文介绍了如何在Vue项目中利用vuecli3.0和高德地图API实现路线轨迹的绘制。首先展示最终效果,然后提供高德地图API文档链接。关键步骤包括在`index.html`引入地图JS文件,以及在Vue组件内创建`initMap`方法,通过`mounted`钩子调用。在绘制折线和添加marker时,注意设置position和path为空,以防止初始化时显示标记。最后,通过AJAX请求数据并动态绘制轨迹。
摘要由CSDN通过智能技术生成

先看最后实现的效果图

871647-20190515012834240-1837871099.png

高德地图api文档

https://lbs.amap.com/api/javascript-api/summary

使用

1、在index.html里面引入高德地图js文件

2、引入之后我们就直接可以在vue组件里面使用了

创建initMap方法,在mounted钩子函数中调用

mounted(){
    this.initMap()
  },

initMap(){
      let that = this
      this.map = new AMap.Map('track-map', {
          zoom:11,//级别
          center: [116.397428, 39.90923],//中心点坐标
          resizeEnable: true,
          zoom: 12,
      });
      // 插件
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
        that.map.addControl(new AMap.ToolBar())
        tha
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值