1.首先在index.html中引入高德地图

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=&plugin=AMap.Driving"></script>

备注:key是在高德地图平台申请的密钥必填的,plugin是插件所用到的方法(这里使用的是行程经纬度)

2.在需要使用地图的界面:

<div id="container"></div>

script中 设置全局变量 var MAP,driving;

在mounted中:

MAP = new AMap.Map('container', {

                mapStyle: 'amap://styles/normal',
                zoom: 4, //级别
                center: [116.397428, 39.90923], //中心点坐标
                viewMode: '3D', // 地图模式
                pitch: 43.5, //设置俯仰角
            });
  这样就可以显示地图了,然后我们把marker添加到地图上
 
   使用axios获取后台接口:
     axios.post('后台接口地址').then(res=>{
           let {code,data} = res.data;
           if(code == 200){
              data.map(item=>{

                    let marker = new AMap.Marker({

                                    map: MAP,
                                    icon: require('../images/markerIcon.png') ,//marker图标
                                    position: [item.longitude, item.latitude],//接口返回经纬度
                                    title:item.carNumber,
                    });
              })
          }
     })
 
   

如果是需要动态切换图标的位置则会用到websocket;

那么把上边的方法直接写到onMessage里边就可以了,但是在渲染marker之前,必须先调用MAP.clearMap()方法,

再进行渲染,否则marker图标改变位置时,原先的marker图标依然还在而导致marker图标越来越多。

3.再说这个plugin获取行程路径的方法

在method中定义一个方法:

showMap() {

      MAP = new AMap.Map("container", {
          resizeEnable: true,
          center: [116.397428, 39.90923],//地图中心点
          zoom: 13 //地图显示的缩放级别
      });
      //构造路线导航类
      driving = new AMap.Driving({
        map: MAP,
        panel: "panel"
      });
      this.tuJingPath = [];
      axios.post('后台接口地址').then(res=>{
        let {code,data} = res.data;
        if(code==200){
          this.startPath = [data[0].longitude,data[0].latitude];//起点坐标
          this.endPath = [data[data.length-1].longitude,data[data.length-1].latitude];//终点坐标
          data.map(item=>{
            this.tuJingPath.push(new AMap.LngLat(item.longitude,item.latitude))
            this.tuJingPath.shift();
            this.tuJingPath.pop();
          })
          // 根据起终点经纬度规划驾车导航路线
          driving.search(this.startPath,this.endPath,{waypoints:this.tuJingPath},(status, result)=>{
              if (status === 'complete') {
                  // log.success('绘制驾车路线完成')
              } else {
                  // log.error('获取驾车数据失败:' + result)
              }
          })
        }
      })
    },
    
在需要这个功能的页面直接调用就OK:

还有许多方法,高德文档上都有,感兴趣的小伙伴可以详细看一下,随时沟通!

vue+高德地图配置及添加marker的更多相关文章

  1. javascript高德地图实现点击marker消失marker

    javascript高德地图实现点击marker消失marker <pre> var markers = []; var positions = [[120.17718, 30.21772 ...

  2. Vue 高德地图 路径规划 画点

    CDN 方式 <!--引入高德地图JSAPI --> <script src="//webapi.amap.com/maps?v=1.4.13&key=您申请的ke ...

  3. vue 高德地图之玩转周边

    前言:在之前的博客中,有成功引入高德地图,这是以前的地址  vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看  我的github 一 .先看要实现的结果,参考了链 ...

  4. VUE 高德地图选取地址组件开发

    高德地图文档地址 http://lbs.amap.com/api/lightmap/guide/picker/ 结合步骤: 1.通过iframe内嵌引入高德地图组件 key就选你自己申请的key &l ...

  5. vue 高德地图

    index.html <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119. ...

  6. android 百度地图 通过剪裁图片添加 Marker

    初始化百度地图: private void initViews() { mMapView = (MapView) findViewById(R.id.bmapView); mBaiduMap = mM ...

  7. iOS高德地图自定义annotation添加不同图片

    1.model类里面添加index #import <MAMapKit/MAMapKit.h> #import <AMapSearchKit/AMapCommonObj.h> ...

  8. js/vue 高德地图绘制驾车路线图

    地图容器: // css要给此容器设置宽高 <div class="map_container"></div> 画图 data{ return { Clng ...

  9. vue 高德地图使用 vue-amap

    此插件文档及使用还不错 https://elemefe.github.io/vue-amap/ <template> <div class="amap-page-conta ...

  10. 前端vue使用高德地图

    首先,注册Key 1.注册开发者账号,成为高德开放平台开发者 2.登陆之后,在进入「应用管理」 页面「创建新应用」 3.为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 ...

随机推荐

  1. webpack5用url-loader(file-loader)处理图片和img-loader压缩图片

    webpack-cli 4.0的版本和 webpack-dev-server 3.11.0的版本不兼容,只能用webpack@5.0 + webpack-cli@3.3.12 + webpack-de ...

  2. android控制台应用binder通讯

    在android root环境下,有一个后台服务server进程需要提供接口给控制台应用client调用,本来想用socket方式来做的,后台发现android有更高效的方式来实现.那就是binder ...

  3. Android Studio相关配置说明

    介绍:Android Sdutio 是谷歌推出的一个 Android 集成开发工具. 现已将 SDK(software development kit)集成到 Android Studio 中.可以直 ...

  4. 向mysql插入数据是出现Incorrect string value错误

    在向Mysql中添加中文数据时,报错(incorrect string value ) 字符转换不正确 插入语句:mysql>  insert into user1 (name,password ...

  5. JSONObject和JSONArray的区别

    JSONObject是用{}表示: JSONArray是用[]表示,相当于[{ }, { }],是由JSONObject的集合. 定义一个String类型 JSONObject jsonOject = ...

  6. python中的数据模型

    参考:https://docs.python.org/zh-cn/3/reference/datamodel.html 1. 对象.值与类型 对象 是 Python 中对数据的抽象. Python 程 ...

  7. Android Studio: how to remove/update the “Created by” comment added to all new classes?

    By default Android Studio automatically adds a header comment to all new classes, e.g. /** * Created ...

  8. NC16644【字符串的展开】

    正确代码: #include <iostream>#include <algorithm>using namespace std;bool IsSame(char a, cha ...

  9. Windows 10更新报错 0x8000ffff

    Windows 10更新报错 0x8000ffff - Microsoft Community 那么您可用 "Windows 10 覆盖安装" 来修复,可参考以下步伐,连接里有视频 ...

  10. 为什么常用Formdata对象来上传图片

    一.上传的数据体格式Content-Type 1.application/x-www-form-urlencoded 2.application/json 3.multipart/form-data ...