vue-cli中使用高德地图及其插件

一、先去高德地图Api申请账号，创建账号—>创建应用—>添加key（很重要，没有key下面步骤无意义）高德地图网址：高德地图API

二、在vue-cli中下载高德地图插件

npm i @amap/amap-jsapi-loader --savecnpm i @amap/amap-jsapi-loader --save//淘宝镜像下载

三、在即将使用地图的组件内引入

import AMapLoader from "@amap/amap-jsapi-loader";

四、在methods中定义方法

initMap() {AMapLoader.load({"key": "你的key码", // 申请好的Web端开发者Key，首次调用 load 时必填"version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15"plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等"AMapUI": {             // 是否加载 AMapUI，缺省不加载"version": '1.1',   // AMapUI 缺省 1.1"plugins":[],       // 需要加载的 AMapUI ui插件}}).then(AMap => {this.map = new AMap.Map("container", {//设置地图显示的缩放级别zoom: 15,// 是否允许鼠标拖拽dragEnable: true,// 鼠标滚轮放大缩小scrollWheel: true,// 双击放大缩小doubleClickZoom: true,// 键盘控制发达缩小移动旋转keyboardEnable: false,// 手势控制touchZoom: false,center: [117.151202,36.664857],//设置地图中心点坐标});}).catch(e => {console.log(e);});}
————————————————
版权声明：本文为CSDN博主「走向大前端」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/abs_botton/article/details/122129770

五、在mounted中调用第四步中定义的方法

this.initMap()

六、创建地图容器（地图的显示位置），并给容器加上高度，否则不会显示。

注意：容器id要与实例化对象中的第一个参数保持一致，即代码中的container保持一致

<div id="container" style="height: 500px"></div>

七、此时已经成功创建高德地图插件并将其渲染在页面中。

（以下为高德地图中ui插件的使用，以信息窗体和点标记为例）

八、点标记：

（可以去官网开发支持—>web端地图 JS API 看更详细的介绍）

//创建小点标记
let marker = new AMap.Marker({position: [] // 基点坐标
});
// 地图添加标记
this.map.add(marker);

将上面代码插入到 .then 中，map实例后，即可添加点标记。

九、信息窗体：

//信息窗体
let infoWindow = new AMap.InfoWindow({anchor: 'top-right',//信息窗体的三角所在位置content: '窗体信息',//写入窗体中显示的信息
});infoWindow.open(this.map,[‘坐标’]); //填写想要窗体信息指示的坐标

代码插入位置与点标记代码插入位置相同。

vue-cli中使用高德地图及其插件相关推荐

vue项目中调用高德地图vue-amap 插件的AMap.PlaceSearch简用
vue项目调用高德地图vue-amap 插件的AMap.PlaceSearch简用结合 elementui 的 el-input 直接下拉选取地点不展示地图 1.下载 npm install v ...
在vue项目中使用高德地图
需求很重要,有需求你才有努力解决问题的方向,加油! 在我们使用vue构建项目的时候,难免在业务需求上会遇到使用高德地图的时候,这时候问题就来了. 我们该怎么在vue项目中插入高德地图?通过度娘我知道了 ...
在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...
vue框架中使用高德地图自定义icon问题
** vue框架中使用高德地图自定义icon问题 ** vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题 ...
vue 项目中使用高德地图
官方文档: 高德地图API官网高德地图2.0参考手册高德地图JS API 2.0 示例在项目中使用 vue-amap 高德地图JSAPI在Vue框架下使用高德地图在线 JS API 示例一. ...
vue项目中使用高德地图
1.步骤一:注册并登录高德地图开放平台,申请密钥高德地图开放平台操作步骤如下 2.步骤二:安装高德地图加载器 npm i @amap/amap-jsapi-loader -S 3.在src下创建M ...
vue项目中使用高德地图获取用户当前位置信息
项目背景是用vue开发的小程序,需要获取当前用户的地理位置,折腾了好久终于弄好了,今天分享给大家,话不多说,let's go! 第一步:在index.html页面引入高德地图 <script t ...
在vue项目中引入高德地图并使用
1.高德地图使用准备开发之前的准备需要注册账号, 创建应用, 创建 api key 调用地图的时候, 请求上带的 key 像高德地图服务器校验权限, 另外可以用来标识同一个程序的不同入口, 如网页 ...
vue项目中使用高德地图行政区域聚合功能（script引入方式）
步骤一 :引入高德js资源 <script type="text/javascript" src="//webapi.amap.com/maps?v=1.4.15& ...

vue-cli中使用高德地图及其插件

vue-cli中使用高德地图及其插件相关推荐

最新文章

热门文章