vue 原生高德地图 单个定位点,定位 移动

2023-11-06

下载 高德地图
npm i @amap/amap-jsapi-loader --save
导入
import AMapLoader from '@amap/amap-jsapi-loader'
			// 实例化地图控件
            initMap(lng,lat,name,code,time) {
                AMapLoader.load({
                    key: this.mapkey, // 申请好的Web端开发者Key,首次调用 load 时必填
                    version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
                    plugins: ['AMap.Scale','AMap.GraspRoad','AMap.convertFrom','AMap.Icon','AMap.Size','AMap.ControlBar'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
                    AMapUI: {
                        // 是否加载 AMapUI,缺省不加载
                        version: "1.1", // AMapUI 缺省 1.1
                        plugins: [] // 需要加载的 AMapUI ui插件
                    },
                    Loca:{                // 是否加载 Loca, 缺省不加载
                        version: '2.0'  // Loca 版本,缺省 1.3.2
                    },
                }).then(AMap => {
                   
                    this.map = new AMap.Map('containers', {
                        //设置地图容器id
                        zoom: 17,
                        rotation: -0.7908261543741522,
                        pitch: 55.94919957310569,
                        viewMode: '3D', //开启3D视图,默认为关闭
                        buildingAnimation: true, //楼块出现是否带动画
                        center: [lng, lat], //初始化地图中心点位置
                       
                    })
                    this.map.addControl(new AMap.ControlBar({
                        showZoomBar:true,//调整zoom
                        showControlButton:true,//是否有倾斜旋转角度的功能,默认是true
                        position:{
                            right:"50px",
                            top:"30px"
                        },//调整控件位置

                    }));
                    this.setMarker([lng, lat],name,code,time);
                });
            },
            // 定位点
            setMarker(lnglat,name,code,time,arr,Speed=500) {
                    console.log(`3`,lnglat)
                    if(arr){
                  
                        this.DriverMarker[0].moveTo(arr, Speed); //定位点移动高德api moveTo
                        let _this =this
                        _this.marker.on('moving',function(e){
                            // 设置地图中心点
                            _this.map.setCenter(e.target.getPosition())
                            // 设置旋转角
                            _this.map.setRotation(-e.target.getOrientation())
                        })
                    }else{
                        let labelOffset = new window.AMap.Pixel(0, -4);
                        let labelContent = 
                            "<div class='labelContent'>" +'编码:'+ code + "<br/>" +'时间:'+time+"</div>"
                        this.marker = new AMap.Marker({

                            position: lnglat,
                            icon: new AMap.Icon({
                                image: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
                                size: new AMap.Size(17, 35),  //图标大小
                                imageSize: new AMap.Size(17, 35)
                            }),
                            label: {
                                direction: 'top',
                                content: labelContent,
                            }
                        });
                        this.map.add(this.marker);
                        this.DriverMarker[0] = this.marker;
                    }
            },

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue 原生高德地图 单个定位点,定位 移动 的相关文章

随机推荐

  • 去水印源码,不是接口,可以支持接口,短视频去水印,源码,算法

    去水印源码 不是接口 python 直接给算法核心 短视频去水印 主流平台去水印 需要请私我或评论区留联系方式 主流短视频平台去水印 支持去水印平台 抖音 快手 图片 视频 火山 皮皮虾 微视 西瓜视频 全民搞笑 全民小视频 皮皮搞笑 轻视
  • [vue3] CreateApp实现

    div hollo vue div
  • python用updatecursor删除行

    arcpy env workspace C ArcpyBook Ch8 WildfireData WildlandFires mdb try with arcpy da UpdateCursor FireIncidents CONFID R
  • Linux(CentOS 7)虚拟机无法ping通网关和外网

    1 查看VMware的虚拟网络编辑器的设置 查看网关地址 2 设置虚拟机IP地址以及网关 DNS 以太网 TYPE Ethernet PROXY METHOD none BROWSER ONLY no static设置静态IP BOOTPR
  • IT项目管理第七次作业

    IT项目管理第七次作业 17343140 杨泽涛 第一题 WBS条目 数量或小时数 单位小时成本 美元 子层总和 美元 WBS第二层总和 美元 占总和的 1 项目管理 44 000 22 项目经理 320 100 32 000 项目其他成员
  • Avalonia-VS环境安装

    链接 https pan baidu com s 1T1TYf7 Q5T6hbpOyGCW2Vg 提取码 m8eu 安装SDK 没有这个 vs2019安装后Avalonia插件 无法选择netcore 生成项目 插件地址 上面为vs2019
  • MapReduce中使用Avro出现TaskAttemptContext异常

    打包上传Jar包到Hadoop环境下运行时 出现异常 Found interface org apache hadoop mapreduce TaskAttemptContext but class was expected 在网上找了很多
  • Luatos-Air001(合宙开发板)初步使用——点亮板载LED

    实物图片 实物图片 暗处 实物图片 亮处 可以看到盒子还是很酷炫的 插电后板子自带的红绿蓝流水灯便会启动 比较漂亮 相机一团糊就不放视频了XD 开发环境搭建与程序编写 开发环境的搭建主要参考官网 就在板子背面w 非常贴心 https lua
  • springcloud集成hystrix 实现服务的隔离,熔断,降级

    一 pom引入依赖
  • 关于如何将一个springcloud项目部署至服务器

    目录 1 部署形式 2 Alibaba Cloud Toolkit的使用 3 一个springcloud项目的部署 4 运行jar包 5 后台运行 1 部署形式 一般我们在后端开发中 常常将整个springboot项目打包成war包 或是打
  • 【数据库】窗口函数实战(三)

    窗口函数实战 三 本篇文章是笔者在牛客网上摘选的几道比较有挑战性的SQL窗口函数编程题 1 近三个月未完成试卷数为0的用户完成情况 中等 原题链接 首先来分析一下题目的查询要求 用户近三个有试卷作答记录的月份 可以用窗口函数解决 并且这三个
  • 20+ css高频实用片段,提高幸福感的小技能你可以拥有噢

    前言 修改input placeholder样式 多行文本溢出 隐藏滚动条 修改光标颜色 水平垂直居中 多么熟悉的功能呀 前端童鞋几乎每天都会和他们打交道 一起来总结我们的css幸福小片段吧 下次不用百度 不用谷歌 这里就是你的港湾 Git
  • 原地删除数组中的重复元素--双指针

    题目 原地 不增加任何额外的空间 删除数组中的重复元素 返回新数组长度 思路 参考链接 图片对算法的描述直观明了 利用双指针的概念 一个慢指针 一个快指针 i代表慢指针 初始值为0 j代表快指针 初始值为1 快指针先走 如果nums fas
  • MySQL-图形化界面工具 (上)

    作者 小刘在C站 个人主页 小刘主页 每天分享云计算网络运维课堂笔记 努力不一定有收获 但一定会有收获加油 一起努力 共赴美好人生 树高千尺 落叶归根人生不易 人间真情 目录 MySQL 主要存在以下两点问题 1 安装 1 找到资料中准备好
  • Qt中使用QSettings读取配置文件注意事项

    QSetting使用中的注意事项 QSetting为Windows Linux和MacOS系统提供了统一的配置文件 注册表读取方式 引用QtHelp的一句话 The QSettings class provides persistent p
  • 安徽高考少输入的6个字节猜想

    情报收集 第39题 主观题 网上评卷 6个字节 第39题是主观题 所以排除了机读卡 因为是网上评卷系统应是数据录入员或评卷人在一个web页面填写得分那么服务端就该是xxx request form xxx 接收的 然后保存到数据库中 所以
  • Python 从零开始制作自己的声音 - wave模块读写wav文件详解

    计算机经常被用于处理音频这种真实世界中的数据 声音经过采样 量化和编码后 存储在音频文件 如wav文件中 文章首先介绍wave模块的基础用法 再通过生成一定频率声波的算法实现 来深入讲解wave库的使用 目录 wave模块 wave ope
  • 软件测试——检查代码

    进行到现在 已经是第六章了 本章主要讲解检查代码 静态白盒子测试 被证实是早期发现软件缺陷最有效的方法 虽然这是一项需要大量准备工作才能有成效的任务 但是许多研究表明花费的时间与得到的好处相比是值得的 下面先来看一下本章的内容概述 静态白盒
  • vc++6.0 配置opengl

    vc 6 0 配置opengl 坑 解决安装OpenGL时程序运行提示glut32 dll丢失的问题 在安装OpenGL的时候 很多同学都出现了一个问题 在按照教程配置好OpenGL后运行测试程序 编译通过 但运行时出现 计算机丢失glut
  • vue 原生高德地图 单个定位点,定位 移动

    下载 高德地图 npm i amap amap jsapi loader save 导入 import AMapLoader from amap amap jsapi loader 实例化地图控件 initMap lng lat name