vue2+高德地图web端开发（使用和引入）

  • 前言
    • 基础
  • 准备工作
    • 高德地图的个人开发者注册
      • 高德api网址
      • 1.点击进行注册
      • 2.注册完之后进入控制台
      • 3.创建新应用
      • 4.添加
    • 高德 2.0 新增
  • 创建vue2的项目
  • npm 引入高德
    • 官方文档
    • 1.安装
    • 2.进入项目
    • 3. NPM 方式安装使用 Loader
    • 4.在component目录下新建MapContainer.vue
    • 5.编写基础页面结构
    • 6. 在< script >中引入AMapLoader
      • 6.1 import
      • 6.2 引入安全密钥
      • 完整代码
    • 7.构建地图
      • 7.1data数据声明
      • 7.2methods中构建初始化地图方法
      • 7.3mouted生命周期中调用方法对页面进行渲染
    • 完整代码
  • vue使用
  • 结果展示

前言

本人非专业前端开发，其实是搞后端的，但是正好接了一个项目需要我负责全栈，所以写了这个系列的文章，如果以后项目可以开源我会放出来的
本次我们要实现的是vue2+高德地图的网页开发

基础

本文需要大家系统学过vue以及初步了解高德地图的情况下理解起来会十分省力

准备工作

高德地图的个人开发者注册

高德api网址

https://lbs.amap.com

1.点击进行注册

2.注册完之后进入控制台

3.创建新应用

4.添加


选择Web端后

高德 2.0 新增

按照步骤全部弄好之后就完成了注册
最后你会获得你注册的key和安全密钥，是我们后面使用的关键

创建vue2的项目

创建项目上我想应该不用怎么交了吧

  1. vue create XXXXx
  2. cd XXXXx
  3. npm run serve

npm 引入高德

官方文档

https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1

1.安装

打开windows powershell 管理员权限

2.进入项目

3. NPM 方式安装使用 Loader

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

4.在component目录下新建MapContainer.vue

5.编写基础页面结构

div的id是你要自定的，叫什么无所谓但是后面地图初始化的时候需要用到，你只要注意一下就可以

<template><div id="container"></div>
</template><script>
export default {}
</script><style lang="less" scoped>
#container {padding: 0px;margin: 0px;width: 100%;height: 100%;
}
</style>

6. 在< script >中引入AMapLoader

6.1 import

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {}
</script>

6.2 引入安全密钥

window._AMapSecurityConfig = {securityJsCode: '你的安全密钥'
}

完整代码

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

7.构建地图

7.1data数据声明

data(){return {map:null}
}

7.2methods中构建初始化地图方法

methods:{initMap(){AMapLoader.load({key:"",             // 申请好的Web端开发者Key，首次调用 load 时必填version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap)=>{this.map = new AMap.Map("container",{  //设置地图容器idviewMode:"3D",    //是否为3D地图模式zoom:5,           //初始化地图级别center:[105.602725,37.076636], //初始化地图中心点位置});}).catch(e=>{console.log(e);})},
},

7.3mouted生命周期中调用方法对页面进行渲染

  mounted() {//DOM初始化完成进行地图初始化this.initMap()}
}

完整代码

<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: '', // 申请好的Web端开发者Key，首次调用 load 时必填version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then(AMap => {this.map = new AMap.Map('container', {//设置地图容器idviewMode: '3D', //是否为3D地图模式zoom: 10, //初始化地图级别center: [121.473667, 31.230525] //初始化地图中心点位置})}).catch(e => {console.log(e)})}},mounted() {//DOM初始化完成进行地图初始化this.initMap()}
}
</script><style lang="less">
#container {padding: 0px;margin: 0px;width: 100%;height: 100%;
}
</style>

vue使用

在我们需要的组件中导入使用MapContainer.vue即可

<template><div><map-container></map-container></div>
</template>
<script>
import MapContainer from "@/components/MapContainer/MapContainer";
export default {components: {MapContainer}
}
</script>

结果展示

前端系列——vue2+高德地图web端开发（使用和引入）相关推荐

  1. 前端系列——vue2+高德地图web端开发（poi搜索两种方式）

    前端系列--vue2+高德地图web端开发(poi搜索) 前言 基础 什么是poi搜索 1. 输入提示结合poi搜索 官方代码 步骤 1.进行plugins插件注册 2.data中编写placeSea ...

  2. 前端系列——vue2+高德地图web端开发（行政区边界绘制）

    vue2+高德地图web端开发(行政区边界绘制) 前言 原理 基础 实现步骤 1.eslint设置AMap为全局变量放置报错 2.Search.vue传输给MapContainer.vue数据然后进行 ...

  3. 高德地图Web端JavaScript API开发(二)---在地图上绘制(点标注)

    使用高德地图在很多时候需要在地图上标记位置,并且很多时候需要用到自定义的图标去完成这种位置的标记. 当然,这些功能高德地图都为我们准备了,比如常用的地图覆盖物Marker和信息窗体等.这里就先说一下点 ...

  4. 高德地图Web端JavaScript API开发(一)---个性化展示(自定义地图)

    遇到一个功能,需要使用地图功能,但是地图上不要显示太多的物体,不然会遮盖地图上的标记,因此需要自定义地图,去掉一些不需要的覆盖物. 话不多说,直接走步骤! First. 需要登录高德开发者控制台,在地 ...

  5. 高德地图web端接入

    1.准备阶段 进入高德开发平台(高德开放平台 | 高德地图API),登录你的账号,如果没有账号需要先注册,进行开发者的认证,这里由于我已经认证过了,所以直接注册流程就不展示了. 打开控制台,选择应用管 ...

  6. 合格前端系列第七弹-移动端开发踩过的一些坑

    前言: 两个月前开始全身心投入到公司的一个移动端项目,框架选型是vue,这篇文章也是在花费两个月的时间,项目一期完成之后得空进行的一片总结性文章,其中包括通用的移动端开发的坑以及vue在移动端开发特有 ...

  7. 高德地图WEB端软件应用

    以前就想自己做一个旅游导航项目,在网上一搜发现了高德地图开放平台,发现高德可以非常简单地应用到自己的项目中,当即我申请了一个 key来学习,仔细研究了一下,觉得还是挺难的,网上找了一些案例什么的,经过 ...

  8. 高德地图WEB端，在所画的圆（Circle）内显示在圆（Marker）内的点

    1.圆和点都是自己定义的,如图: 2.在高德地图的示例中心测试通过,代码如下: <!doctype html> <html> <head><meta char ...

  9. 高德地图web端js

    下面是一些高德地图使用例子,自定义展示,右击拖动,搜索,画圆,定位等功能,没有整理仅供参考 var infoWindow = new AMap.InfoWindow({isCustom:true,// ...

最新文章

  1. 树莓派3b+目标检测： tflite 运行 mobilenet ssd
  2. QIIME 2教程. 10数据导出Exporting data(2020.11)
  3. HDU 1069 Monkey and Banana 最长上升子序列进阶（动态规划）
  4. Android 如何调用系统默认浏览器访问
  5. python使用UUID生成唯一标识
  6. 树莓派教程 - 2.2 树莓派CSI摄像头，raspivid、raspistill常用参数
  7. 一起撸个朋友圈吧 （Step6） 评论对齐（点击评论对齐）【下】
  8. animate改变背景颜色_3D MAX2016视口背景设置里各参数的含义详解 - 3dmax基础操作入门教程-3dmax材质教程,3d材质贴图教程参数,vray材质参数,3dmax贴图教程...
  9. mysql_affected_rows()、mysql_fetch_row、mysql_fetch_assoc
  10. access mysql并发_多用户同时使用ACCESS
  11. Mac配置vscode ssh远程连接主机（远程办公必备）
  12. Hbase中的二级索引
  13. 怎么用dos系统进入服务器,进入纯DOS系统的步骤分享
  14. 基于QT的英文文献的编辑与检索系统的实现
  15. 电脑无法进入睡眠的解决方法
  16. ibm aix_IBM AIX SAN Volume Controller更新和迁移
  17. 超详细文件包含漏洞原理及修复
  18. 1.Linux中超频及cpufreq相关汇总
  19. 中国英语市场营销分析与竞争形势调研报告2022版
  20. 基于ESP32的WiFi-RSSI定位

热门文章

  1. 题目：身份证录入系统 一、语言和环境 a）实现语言Java， 使用Android开发环境实现《身份证录入系统》APP。具体要求如下： 打开应用后，显示效果如图-1所示：
  2. uniapp扫一扫功能实现
  3. 如何将U盘改成“U-KEY”使用
  4. Ztree树的复选框和获取选择的节点实例和代码
  5. 聚光灯下的jqTouch与jQuery Mobile
  6. 【随机区组设计和析因设计的区别】
  7. 旺宏norFlash Security Register OTP空间读写
  8. 2021新年算法小专题—2.股票买卖利润（Java）
  9. 【李宏毅深度强化学习笔记】6、Actor-Critic、A2C、A3C、Pathwise Derivative Policy Gradient
  10. QCS2290 secureboot 流程