vue2+typescript使用高德地图2.0版本

高德地图 webjs api 2.0官网教程

AMap.Driving使用说明

在这里插入图片描述

<div class="mmp"><div id="map" ref="mapcontainer"></div></div><script lang="ts">
//安全密钥
window._AMapSecurityConfig={securityJsCode: "高德地图key密钥",
}
import { Component, Emit, Vue } from "vue-property-decorator";
import AMapLoader from "@amap/amap-jsapi-loader";
@Component
export default class HomeView extends Vue {AMap: any = undefined;map: any = undefined;start: any = [];end: any = [];zoom: number = 10;getInMap() {AMapLoader.load({key: "高德地图key值",version: "2.0",plugins: ["AMap.Scale"],}).then((AMap: any) => {this.map = new AMap.Map("map", {resizeEnable: true,zoom: this.zoom,center: this.start, //地图中心点});this.AMap = AMap;this.initMap(AMap);}).catch((e) => {console.error(e);});}initMap(AMap: any) {this.map.on("zoomchange", () => {var zoom = this.map.getZoom();this.zoom = zoom;});this.map.on("zoomend", () => {});var that = this;// 添加起点和终点const startMarker = new AMap.Marker({position: that.start,});const endMarker = new AMap.Marker({position: that.end,});that.map.add(startMarker);that.map.add(endMarker);// 绘制路线AMap.plugin(["AMap.Driving"], function () {var driving = new AMap.Driving({map: that.map,policy: AMap.DrivingPolicy.LEAST_TIME,// panel: "panel",});driving.search(new AMap.LngLat(that.start[0], that.start[1]),new AMap.LngLat(that.end[0], that.end[1]),function (status: any, result: any) {if (status === "complete") {console.log("绘制驾车路线完成");} else {console.log("获取驾车数据失败:" + result);}});});}mounted() {let a: any = this.$route.query.a;//"120.111111,45.111111"let b: any = this.$route.query.b;//"120.111111,45.111111"this.start = a.split(",");this.end = b.split(",");this.getInMap();}
}
</script>
<style lang="scss" scoped>
#map {width: 100%;height: calc(100vh - 46px);background-color: rgb(238, 235, 236);
}
.mmp {display: flex;justify-content: space-between;
}
#panel {width: 20%;height: 100%;
}
</style>
自定义声明window(shims-vue.d.ts)
declare module "*.vue" {import Vue from "vue";export default Vue;
}
interface Window {_AMapSecurityConfig: {securityJsCode: string;}
}
declare let window: Window

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/212286.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

添加新公司代码的配置步骤-Part1

原文地址&#xff1a;配置公司代码 概述 我们生活在一个充满活力的时代&#xff0c;公司经常买卖子公司。对于已经使用 SAP 的公司来说&#xff0c;增加收购就成为一个项目。我开发了一个电子表格&#xff0c;其中包含向您的结构添加新公司代码所需的所有配置更改。当然&…

Linux安全配置

进入ssh配置文件 vim /etc/ssh/sshd_config将port 22中的端口号改为5001 重启ssh服务 systemctl restart sshd拓展 sh与bash iptable与firewall ssh与sshd vps与ssh 参考&#xff1a; 【安全-SSH】SSH安全设置 - CSDN AppLinux VPS服务器SSH端口一键修改脚本​Linux脚本…

「Swift」取消UITableView起始位置在状态栏下方开始

前言&#xff1a;在写页面UI时发现&#xff0c;当隐藏了NavigationBar时&#xff0c;即使UITableView是从(0,0)进行布局&#xff0c;也会一直在手机状态栏下方进行展示布局&#xff0c;而我的想法是希望UITableView可以从状态栏处就进行展示布局 当前页面展示&#xff1a; 问题…

java设计模式学习之【装饰器模式】

文章目录 引言装饰器模式简介定义与用途实现方式 使用场景优势与劣势装饰器模式在Spring中的应用画图示例代码地址 引言 在日常生活中&#xff0c;我们常常对基本事物添加额外的装饰以增强其功能或美观。例如&#xff0c;给手机加一个保护壳来提升其防护能力&#xff0c;或者在…

JAVA网络编程——BIO、NIO、AIO深度解析

I/O 一直是很多Java同学难以理解的一个知识点&#xff0c;这篇帖子将会从底层原理上带你理解I/O&#xff0c;让你看清I/O相关问题的本质。 1、I/O的概念 I/O 的全称是Input/Output。虽常谈及I/O&#xff0c;但想必你也一时不能给出一个完整的定义。搜索了谷哥欠&#xff0c;发…

【UE5】使用场系统炸毁一堵墙

效果 步骤 1. 新建一个空白项目 2. 新建一个Basic关卡&#xff0c;然后添加一个第三人称游戏和初学者内容包到内容浏览器 3. 在场景中添加一堵墙 4. 选项模式选择“破裂” 点击新建 新建一个文件夹用于存储几何体集 点击“统一” 最小和最大Voronoi点数都设置为100 点击“破…

c++11计时器chrono库

去实现一下开始说的高精度计时器&#xff1a; #ifndef _TimerClock_hpp_ #define _TimerClock_hpp_#include <iostream> #include <chrono>using namespace std; using namespace std::chrono;class TimerClock { public:TimerClock(){update();}~TimerClock(){}v…

C语言指针详解上

1 野指针 int main01(){//野指针就是没有初始化的指针,指针的指向是随机的,不可以 操作野指针//int a 0;//指针p保存的地址一定是定义过的(向系统申请过的)int *p;//野指针*p 200;printf("%d\n",*p);system("pause");return 0;}2 空指针 空指针的作用…

力扣78. 子集(java 回溯解法)

Problem: 78. 子集 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 我们易知&#xff0c;本题目涉及到对元素的穷举&#xff0c;即我们可以使用回溯来实现。对于本题目我们应该较为注重回溯中的决策阶段&#xff1a; 由于涉及到对数组中元素的穷举&#xff0c;即在每…

Java网络编程 *TCP与UDP协议*

网络编程 什么是计算机网络? 把分布在不同地理区域的具有独立功能的计算机,通过通信设备与线路连接起来&#xff0c;由功能完善的软件实现资源共享和信息传递的系统 简单来说就是把不同地区的计算机通过设备连接起来,实现不同地区之前的数据传输 网络编程是干什么的? 网络…

Docker快速理解及简介

docker快速理解及简介 1.Docker为什么出现&#xff1f; 迁移一个项目时&#xff0c;运行文档、配置环境、运行环境、运行依赖包、操作系统发行版、内核等都需要重新安装配置&#xff0c;比较麻烦。 2.Docker是什么&#xff1f; Docker是基于Go语言实现的云开源项目。解决了运行…

JVM 字节码

JVM概述 问题引出 你是否也遇到过这些问题&#xff1f; 运行着的线上系统突然卡死&#xff0c;系统无法访问&#xff0c;甚至直接OOM&#xff01;想解决线上JVM GC问题&#xff0c;但却无从下手。新项目上线&#xff0c;对各种JVM参数设置一脸茫然&#xff0c;直接默认吧&…

Python:核心知识点整理大全2-笔记

目录 2.1 运行 hello_world.py 时发生的情况 第 2 章 变量和简单数据类型 2.2 变量 2.2.1 变量的命名和使用 2.2.2 使用变量时避免命名错误 2.3 字符串 2.3.1 使用方法修改字符串的大小写 在本章中&#xff0c;你将学习可在Python程序中使用的各种数据&#xff0c;还将学…

html/css中用float实现的盒子案例

运行效果&#xff1a; 代码部分&#xff1a; <!doctype html> <html> <head> <meta charset"utf-8"> <title>无标题文档</title> <style type"text/css">.father{width:300px; height:400px; background:gray;…

2个月拿下信息系统项目管理师攻略(攻略超级全)

信息系统项目管理师&#xff08;高项&#xff09;一次性过啦&#xff01;结合这次备考经验&#xff0c;给大家总结一下复习方法。 先上图&#xff0c;开心一下&#xff01; 一、我为什么选择了高项 为什么我会选信息系统项目管理师&#xff0c;也就是我们常说的高项。 原因1…

C#基础与进阶扩展合集-进阶篇(持续更新)

目录 本文分两篇&#xff0c;基础篇点击&#xff1a;C#基础与进阶扩展合集-基础篇 一、进阶 1、Predicate 2、设置C#语言版本 3、ListCollectionView过滤集合 4、值类型与引用类型 5、程序设置当前项目工作目录 6、获取App.config配置文件中的值 7、Linq常用语句 8、…

spring日志输出到elasticsearch

1.maven <!--日志elasticsearch--><dependency><groupId>com.agido</groupId><artifactId>logback-elasticsearch-appender</artifactId><version>3.0.8</version></dependency><dependency><groupId>net.l…

图解系列--HTTPS,认证

确保 Web 安全的HTTPS 1.HTTP 的缺点 1.1.通信使用明文可能会被窃听 加密处理防止被窃听 加密的对象可以有这么几个。 (1).通信的加密 HTTP 协议中没有加密机制&#xff0c;但可以通过和 SSL&#xff08;Secure Socket Layer&#xff0c;安全套接层&#xff09;或TLS&#xff…

中国版的 GPTs:InsCode AI 生成应用

前言 在上一篇文章 《InsCode&#xff1a;这可能是下一代应用开发平台&#xff1f;》中&#xff0c;我们介绍了一个新的应用开发平台 InsCode&#xff0c;它是基于云原生开发环境 云 IDE AI 辅助编程的一站式在线开发平台。 最近&#xff0c;InsCode 又推出了另一种全新的开…

【wvp】测试记录

ffmpeg 这是个莫名其妙的报错&#xff0c;通过排查&#xff0c;应该是zlm哪个进程引起的 会议室的性能 网络IO也就20M