在vue中使用高德地图添加窗体
1.去高德地图开发官网 高德开放平台 | 高德地图API
2 搜索“信息窗体和右键菜单” ,点击第一个
3 选择 默认信息窗体
4 在自己的代码中创建窗体
代码如下
data() {return {infoWindow: "",map: "",//地图实例化对象info: [],//信息窗体的内容}}, methods: {initMap() {this.map = AMapLoader.load({"key": "ce55ff31b2ec8da2ea6fdd74663562d6", // 申请好的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("container1", {//设置地图显示的缩放级别zoom: 14,// 是否允许鼠标拖拽dragEnable: true,// 鼠标滚轮放大缩小scrollWheel: true,// 双击放大缩小doubleClickZoom: true,// 键盘控制发达缩小移动旋转keyboardEnable: false,// 手势控制touchZoom: false,center: [114.60794417790987, 38.01886471359529],//设置地图中心点坐标//在指定位置打开信息窗体});//构建信息窗体中显示的内容this.info.push("<p class='input-item'>河北省石家庄市方大科技园</p></div></div>");this.infoWindow = new AMap.InfoWindow({content: this.info.join("") //使用默认信息窗体框样式,显示信息内容});this.infoWindow.open(this.map, this.map.getCenter());}).catch(e => {console.log(e);});},},
窗体的dom
<div content="info"></div>
最终的效果
如果不会在vue-cli引入高德地图 可以参考以下文章
vue-cli中使用高德地图_abs_botton的博客-CSDN博客_vue引入高德地图
在vue中使用高德地图添加窗体相关推荐
- vue中给高德地图添加地图名片
第一步搜索高德地图开发平台注册开发者账号 第二步在vue-cli项目中下载高德地图插件 命令如下 npm i @amap/amap-jsapi-loader --save 第三步在 高德地图开发平台首 ...
- 在Vue中使用高德地图
在Vue中使用高德地图 一.如何在Vue中引入基础高德地图 1.步骤一:注册并登录高德地图开放平台,申请密钥 2.步骤二:安装高德地图加载器 3.封装一个自定义地图组件,并初始化地图 二.根据关键词搜 ...
- Vue中使用高德地图,简单明了
一.使用步骤 1.在vue中引入高德地图的加载器 npm i @amap/amap-jsapi-loader --save 在自己的组件中去引用 <template>//这个div就是 ...
- Vue中使用高德地图(vue-amap)的采坑记录小白入门
这里写目录标题 写在开始 step.1 安装组件 step.2 引入组件 step.3注册高德高德开发者账号,申请KEY step.4 正式使用 写在开始 俗话说授人以鱼不如授人以渔,直接记录代码的话 ...
- 在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围
在vue中使用高德地图的下属省市区查询,实现省市区的联动以及规划范围 一.先上效果图 二.高德地图Vue引用 一.先上效果图 二.高德地图Vue引用 1. webpack引入高德 在webpack.b ...
- vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离 一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
- Vue中使用高德地图
Vue中使用高德地图定位及poi搜索,以及其他插件的使用方法 1.第一步安装 npm install vue-amap --save 2.引入vue-amap main.js import Vue f ...
- vue中引入高德地图Loca数据可视化
目录 引言: 关键词: 正文: 一.如何安装或者引入: 二.如何引入: 三.如何使用: 四.完整代码: 五.效果图 参考: 引言: 前面我的文章介绍了vue中引入高德地图实例的,详情可以去参考,由于需 ...
- Vue中集成高德地图API实现定位与自定义样式信息窗体
场景 若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
最新文章
- uoj#268. 【清华集训2016】数据交互(动态dp+堆)
- 归并排序(python实现)
- 汇编语言 DS段寄存器
- Hadoop入门(六)Mapreduce
- 用matlab解一维单势垒波函数,一维多势垒结构准束缚态的MATLAB分析计算
- swal ajax,Sweetalert详细介绍
- 转载 二叉树的创建、遍历、深度、叶子节点数
- CS230+deeplearning.ai专项课程笔记及作业目录
- Mac上传代码到Github
- DEDECMS之二 如何修改模板页
- IPQ4019 QSDK 下添加EC20链接网络,非内核添加GobiNet 驱动,ipk包方法
- 免费得到EnableQ在线问卷调查引擎V3.0商用版本的市场活动
- TranslateAnimation祥解
- 微软的mak与kms区别
- 项目管理:项目开发类型、模型、流程以及案例介绍
- 是不是不知道用什么命令查看mac系统信息?
- 微信OAuth授权获取用户OpenId
- Windows下mmap的等价实现
- 数字营销公司HubSpot成功的9个经验
- QQ2009 Preview 下载 图片大赏+简单评测