vue2+高德地图web端开发使用

创建vue2项目

我们创建一个vue2项目,创建vue2项目就不用再多说了吧,使用“vue create 项目名 ”创建即可

注册高德地图

高德地图官网地址:https://lbs.amap.com/

如果是第一次使用,点击注册然后进入我们的控制台

注册完之后进入控制台,找到我的应用

点击创建新的应用

点击添加

选择web端开发,最好写上域名白名单,勾选下面的单选框,最后进行提交

按照步骤全部弄好之后就完成了注册

最后你会获得你注册的key和安全密钥,是我们后面使用的关键

官网地址:https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1

使用

打开项目,安装loader

npm i @amap/amap-jsapi-loader --save 

在component目录下新建Map组件

在< script >中引入AMapLoader

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
    securityJsCode: '你的安全密钥'
}
export default {
  
}
</script>

完整代码

<template>
    <div id="container">

    </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
    securityJsCode: '你的安全密钥'
}
export default {
    data() {
        return {
            map: null
        }
    },
    methods: {
        initMap() {
            AMapLoader.load({
                key: "你的key",             // 申请好的Web端开发者Key,首次调用 load 时必填
                version: "2.0",      // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
                plugins: [''],       // 需要使用的的插件列表,如比例尺'AMap.Scale'等
            }).then((AMap) => {
                this.map = new AMap.Map("container", {  //设置地图容器id
                    viewMode: "3D",    //是否为3D地图模式
                    zoom: 5,           //初始化地图级别
                    center: [105.602725, 37.076636], //初始化地图中心点位置
                });
            }).catch(e => {
                console.log(e);
            })
        },
    },
    mounted() {
        //DOM初始化完成进行地图初始化
        this.initMap()
    }
}
</script>
<style scoped>
#container {
    padding: 0px;
    margin: 0px;
    width: 100vw;
    height: 100vh;
}
</style>

效果图

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

<Linux>计算机体系结构和操作系统

计算机体系结构(冯 • 诺依曼体系)和操作系统&#xff08;Operator System&#xff09; 文章目录计算机体系结构(冯 • 诺依曼体系)和操作系统&#xff08;Operator System&#xff09;一、冯 • 诺依曼体系结构1.存储器&#xff08;内存&#xff09;2.运算器和控制器&#xff…

系统重装漏洞

zzcms系统重装漏洞 一、配置zzcms环境 1. 使用小皮搭建zzcms框架 2. 安装zzcms 按照下面的操作进行,傻瓜式操作即可 3. 打开网站 二、漏洞利用 在访问install目录的默认文件后,会出现zzcms安装向导 http://www.zzcms.com/install/index.php 但是会显示 “安装向导…

HTTPS,SSL(对称加密和非对称加密详解)

上一篇博客&#xff08;HTTP详解_徐憨憨&#xff01;的博客-CSDN博客&#xff09;详细讲解了关于HTTP的知识&#xff0c;了解到HTTP协议下的数据传输是一种明文传输&#xff0c;既然是明文传输&#xff0c;可能导致在传输过程中出现一些被篡改的情况&#xff0c;此时就需要对所…

MATLAB | 给热图整点花哨操作(三角,树状图,分组图)

前段时间写的特殊热图绘制函数迎来大更新&#xff0c;基础使用教程可以看看这一篇&#xff1a; https://slandarer.blog.csdn.net/article/details/129292679 原本的绘图代码几乎完全不变&#xff0c;主要是增添了很多新的功能&#xff01;&#xff01;&#xff01; 工具函数完…

【链表OJ题(六)】链表分割

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;数据结构 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录链表OJ题(六)1. 链表…

燕山大学-面向对象程序设计实验-实验三 类和对象—构造函数与析构函数-实验报告

CSDN的各位友友们你们好,今天千泽为大家带来的是燕山大学-面向对象程序设计实验-实验三 类和对象—构造函数与析构函数,接下来让我们一起进入c的神奇小世界吧,相信看完你也能写出自己的 实验报告!如果对您有帮助的话希望能够得到您的支持和帮助,我会持续更新的!&#x1f680;3.…

硬刚ChatGPT!文心一言能否为百度止颓?

引言&#xff1a;近年来&#xff0c;人工智能领域的发展突飞猛进&#xff0c;尤其是在自然语言处理&#xff08;NLP&#xff09;方面。OpenAI的ChatGPT无疑是这个领域的佼佼者[1]。那么&#xff0c;面对这样一款高度智能的AI模型&#xff0c;国内市场上是否有相应的产品能与之抗…

你是真的“C”——指针进阶知识分享【上篇】

你是真的“C”——指针进阶知识分享【上篇】&#x1f60e;前言&#x1f64c;指针初阶必备小知识~&#x1f60a;一. 字符指针&#x1f60a;二. 指针数组&#x1f60a;三、数组指针&#x1f60a;数组指针的定义&#x1f618;四、 &数组名VS数组名&#x1f60a;总结撒花&#…

【K8S系列】从零开始学习 k8s:入门指南(二)

目录 序言 前情提要&#xff1a; 4.K8S架构 4.1 声明式系统VS命令式系统 4.2 k8s-声明式系统 4.2.1 声明方式-yaml 4.3 Kubernetes的基本概念 1.集群 2.节点 3.容器 4.Pod 5.Service 6.Deployment 问题&#xff1a; 4.4 K8S核心组件 4.4.1 kube-apiserver 4.4…

【Linux学习】进程间通信——system V(共享内存 | 消息队列 | 信号量)

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《Linux学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 进程间通信——共享内存 | 消息队列 | 信号量&#x1f3c0;共享内存⚽系统调用shmgetkey值⚽系统…

提升Python代码性能的六个技巧

文章目录前言为什么要写本文&#xff1f;1、代码性能检测1.1、使用 timeit 库1.2、使用 memory_profiler 库1.3、使用 line_profiler 库2、使用内置函数和库3、使用内插字符串 f-string4、使用列表推导式5、使用 lru_cache 装饰器缓存数据6、针对循环结构的优化7、选择合适算法…

【WEB前端进阶之路】 HTML 全路线学习知识点梳理(下)

前言 本文是HTML零基础小白学习系列的第三篇文章&#xff0c;点此阅读 上一篇文章 文章目录前言十五.HTML布局1.使用div元素添加网页布局2.使用table元素添加网页布局十六.HTML表单和输入1.文本域2.密码字段3.单选按钮4.复选框5.提交按钮十七.HTML框架1.iframe语法2.iframe设置…

Windows电脑密码忘记解决方法

目录 背景 方法一 方法二 方法三 方法四 方法五 背景 个人电脑忘记了密码&#xff0c;无法登录用户界面。 方法一 1. 开机时常按 F11&#xff0c;如果是Win10一下系统&#xff0c;就常按 F8&#xff0c;知道出现一下图状 2. 选择疑难解答&#xff0c;再选择高级选项 3.…

Tomcat前端页面部署

一&#xff0c;Tomcat的安装1.Tomcat是什么Tomcat是一个HTTP服务器&#xff0c;HTTP协议是HTTP客户端和HTTP服务器之间交换数据的格式&#xff0c;我们可以通过ajax和Java Socket分别构造HTTP客户端&#xff0c;同时HTTP服务器也可以通过Java Socket来实现&#xff0c;而Tomcat…

React项目规范:目录结构、根目录别名、CSS重置、路由、redux、二次封装axios

React项目&#xff08;一&#xff09;一、创建项目二、目录结构三、craco配置别名并安装less1.craco安装2.配置别名3.安装less四、CSS样式重置五、配置路由六、配置Redux1.创建大仓库2.创建小仓库&#xff08;1&#xff09;方式1&#xff1a;RTK&#xff08;2&#xff09;方式2…

toString()、equals()是什么,为啥需要重写,多种方法来重写

https://m.runoob.com/java/java-object-class.html toString() 1.为什么会有toString 子类继承父类就可以使用父类所有非私有的属性的方法。 在Java中所有类都直接或者间接继承Object类&#xff0c;可以说只要是Object类里面定义的非私有的属性和方法&#xff0c;任何类都可…

Linux上如何使用Stable Diffusion WebUI

在我把所有的坑都踩了一遍之后&#xff0c;决定记录一下linux上的Stable Diffusion webui是怎么搞的。 前提条件 已安装CUDA 已安装git 已安装Anaconda 直接安装Anaconda不要指望Linux自带的Python。虽然Linux自带的Python&#xff0c;但是缺胳膊少腿&#xff0c;所以还是直接…

IntelliJ IDEA创建Servlet

目录 ——————————————————————————————— 一、创建Java项目 1、创建java项目 2、选择java 3、next 4、给项目命名 5、新创建完java项目的目录结构 二、变java为servlet项目 1、变servlet项目 2、选择Web Application 3、更新完成后的目录…

尚融宝04-mybatis-plus插件和条件构造器

目录 一、分页插件 1、添加配置类 2、添加分页插件 3、测试分页 二、XML自定义分页 1、UserMapper中定义接口方法 2、定义XML 3、测试 三、乐观锁 1、场景 2、乐观锁方案 3、乐观锁实现流程 4、优化流程 四、wapper介绍 1、Wrapper家族 2、创建测试类 五、Qu…

Linux驱动开发

一、驱动分类Linux中包含三大类驱动&#xff1a;字符设备驱动、块设备驱动和网络设备驱动。其中字符设备驱动是最大的一类驱动&#xff0c;因为字符设备最多&#xff0c;从led到I2C、SPI、音频等都属于字符设备驱动。块设备驱动和网络设备驱动都要比字符设备驱动复杂。因为其比…
最新文章