位置: IT常识 - 正文

在Vue中使用高德地图(vue调用高德js)

编辑:rootadmin
在Vue中使用高德地图 在Vue中使用高德地图一、如何在Vue中引入基础高德地图1、步骤一:注册并登录高德地图开放平台,申请密钥2、步骤二:安装高德地图加载器3、封装一个自定义地图组件,并初始化地图二、根据关键词搜索,并定位到搜索的位置三、添加放大缩小地图、转盘四、点击地图获取经纬度五、地图上绘制标记点、圆形、曲线、矩形和多边形等,及其绘制清除六、总结一、如何在Vue中引入基础高德地图

推荐整理分享在Vue中使用高德地图(vue调用高德js),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue调用高德js,vue3使用高德地图,vue调用高德地图实现导航,vue调用高德js,vue调用高德地图实现导航,vue中使用高德地图安全性问题,vue中使用高德地图首次进入地图页面不显示,vue中使用高德地图首次进入地图页面不显示,内容如对您有帮助,希望把文章链接给更多的朋友!

根据官网提示,在Web端,我们需要高德地图加载器:npm i @amap/amap-jsapi-loader -S

注意: * 此教程适用于Web端,移动端还未尝试,感兴趣的或者有需要的可单独联系我 * @amap/amap-jsapi-loader加载器npm地址

1、步骤一:注册并登录高德地图开放平台,申请密钥

高德地图开放平台 操作步骤如下图:

2、步骤二:安装高德地图加载器npm i @amap/amap-jsapi-loader -S3、封装一个自定义地图组件,并初始化地图<template> <!-- 百度地图 --> <div id="bai-du-map"> <!-- 技术支持和联系方式 --> </div></template><script>import AMapLoader from "@amap/amap-jsapi-loader";// 设置安全密钥window._AMapSecurityConfig = { securityJsCode: '安全密钥',}export default { data() { return { map : null, mouseTool : null, overlays : [], auto : null, placeSearch : null, } }, methods : { initMap() { AMapLoader.load({ "key": "申请好的Web端开发者Key,首次调用 load 时必填", "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 "plugins": [地图用到的插件], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 }).then((AMap)=>{ // 初始化地图 this.map = new AMap.Map('bai-du-map',{ viewMode : "2D", // 是否为3D地图模式 zoom : 13, // 初始化地图级别 center : [113.65553,34.748764], //中心点坐标 郑州 resizeEnable: true }); }).catch(e => { console.log(e); }); }};</script><style scoped>#bai-du-map { overflow: hidden; width: 100%; height: 100%; margin: 0; font-family: "微软雅黑";}</style><style>/* 隐藏高德logo */.amap-logo { display: none !important;}/* 隐藏高德版权 */.amap-copyright { display: none !important;}</style>在Vue中使用高德地图(vue调用高德js)

注意点:

2021年起,高德地图必须使用安全密钥 即是

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

二、根据关键词搜索,并定位到搜索的位置<template> <!-- 百度地图 --> <div id="bai-du-map"> <!-- 技术支持和联系方式 --> </div></template><script>import AMapLoader from "@amap/amap-jsapi-loader";window._AMapSecurityConfig = { // 设置安全密钥 securityJsCode: '安全密钥',}export default { props : ["iptId"], data() { return { map : null, mouseTool : null, overlays : [], auto : null, placeSearch : null, } }, methods : { initMap() { AMapLoader.load({ "key": "密钥", // 申请好的Web端开发者Key,首次调用 load 时必填 "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 "plugins": ["AMap.AutoComplete","AMap.PlaceSearch"], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 // "plugins": [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 }).then((AMap)=>{ this.map = new AMap.Map('bai-du-map',{ viewMode : "2D", // 是否为3D地图模式 zoom : 13, // 初始化地图级别 center : [113.65553,34.748764], //中心点坐标 郑州 resizeEnable: true }); this.auto = new AMap.AutoComplete({ input : this.iptId // 搜索框的id }); this.placeSearch = new AMap.PlaceSearch({ map: this.map, panel: "panel", // 结果列表将在此容器中进行展示。 // city: "010", // 兴趣点城市 autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围 extensions: 'base' //返回基本地址信息 }); this.auto.on("select", this.select);//注册监听,当选中某条记录时会触发 }).catch(e => { console.log(e); }); }, select(e) { this.placeSearch.setCity(e.poi.adcode); this.placeSearch.search(e.poi.name); //关键字查询查询 } }, mounted() { this.initMap(); },};</script>

三、添加放大缩小地图、转盘<template> <!-- 百度地图 --> <div id="bai-du-map"> <!-- 技术支持和联系方式 --> </div></template><script>import AMapLoader from "@amap/amap-jsapi-loader";window._AMapSecurityConfig = { // 设置安全密钥 securityJsCode: '安全密钥',}export default { props : ["iptId"], data() { return { map : null, mouseTool : null, overlays : [], auto : null, placeSearch : null, } }, methods : { initMap() { AMapLoader.load({ "key": "密钥", // 申请好的Web端开发者Key,首次调用 load 时必填 "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 "plugins": ["AMap.Scale","AMap.ToolBar","AMap.ControlBar","AMap.MouseTool","AMap.MapType","AMap.HawkEye"], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 // "plugins": [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 }).then((AMap)=>{ this.map = new AMap.Map('bai-du-map',{ viewMode : "2D", // 是否为3D地图模式 zoom : 13, // 初始化地图级别 center : [113.65553,34.748764], //中心点坐标 郑州 resizeEnable: true }); this.map.addControl(new AMap.Scale()); // 添加左下角的比例尺 let toolBar = new AMap.ToolBar({ position: { bottom: '210px', right: '35px' } }); let controlBar = new AMap.ControlBar({ position: { bottom: '280px', right: '10px', }, }); this.map.addControl(toolBar); // 添加右下角的放大缩小 this.map.addControl(controlBar); // 方向盘 this.map.addControl(new AMap.MapType()); // 添加右上角的标准图和卫星图 和路况 this.map.addControl(new AMap.HawkEye()); // 添加地图放大镜 }).catch(e => { console.log(e); }); }, }, mounted() { this.initMap(); },};</script>四、点击地图获取经纬度initMap() { AMapLoader.load({ "key": "key", // 申请好的Web端开发者Key,首次调用 load 时必填 "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 "plugins": ["AMap.Scale","AMap.ToolBar","AMap.AutoComplete","AMap.PlaceSearch","AMap.ControlBar","AMap.MouseTool"], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 // "plugins": [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 }).then((AMap)=>{ // 鼠标点击获取经纬度 this.map.on('click', function(e) { console.log("经度",e.lnglat.getLng()) console.log("纬度",e.lnglat.getLat()) }); }).catch(e => { console.log(e); }); },五、地图上绘制标记点、圆形、曲线、矩形和多边形等,及其绘制清除<template> <!-- 百度地图 --> <div id="bai-du-map"> <!-- 技术支持和联系方式 --> </div></template><script>import AMapLoader from "@amap/amap-jsapi-loader";window._AMapSecurityConfig = { // 设置安全密钥 securityJsCode: '安全密钥',}export default { data() { return { map : null, mouseTool : null, overlays : [], auto : null, placeSearch : null, } }, methods : { initMap() { AMapLoader.load({ "key": "密钥", // 申请好的Web端开发者Key,首次调用 load 时必填 "version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 "plugins": ["AMap.Scale","AMap.ToolBar","AMap.AutoComplete","AMap.PlaceSearch","AMap.ControlBar","AMap.MouseTool"], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 // "plugins": [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 }).then((AMap)=>{ this.map = new AMap.Map('bai-du-map',{ viewMode : "2D", // 是否为3D地图模式 zoom : 13, // 初始化地图级别 center : [113.65553,34.748764], //中心点坐标 郑州 resizeEnable: true }); this.mouseTool = new AMap.MouseTool(this.map); // 监听draw事件可获取画好的覆盖物 this.mouseTool.on('draw',function(e){ this.overlays.push(e.obj); }.bind(this)) }).catch(e => { console.log(e); }); }, draw(type) { switch(type){ case 'marker':{ this.mouseTool.marker({ //同Marker的Option设置 }); break; } case 'polyline':{ this.mouseTool.polyline({ strokeColor:'#80d8ff' //同Polyline的Option设置 }); break; } case 'polygon':{ this.mouseTool.polygon({ fillColor:'#00b0ff', strokeColor:'#80d8ff' //同Polygon的Option设置 }); break; } case 'rectangle':{ this.mouseTool.rectangle({ fillColor:'#00b0ff', strokeColor:'#80d8ff' //同Polygon的Option设置 }); break; } case 'circle':{ this.mouseTool.circle({ fillColor:'#00b0ff', strokeColor:'#80d8ff' //同Circle的Option设置 }); break; } } }, }, mounted() { this.initMap(); },};</script>

清除绘制

// 清除 // map.remove(overlays) // overlays = []; // 或者 // mouseTool.close(true)//关闭,并清除覆盖物六、总结

一般的,使用高德地图,不需要参考其他博主写的,基本上就是安装一个加载器@amap/amap-jsapi-loader,然后参考高德地图开放webjs文档,就完全可以自己实现业务需求

高德地图开放webjs文档 ,这个API文档写的很好,包括了针对于Vue和React的基本引用,以及相关地图需求都有API满足

本文链接地址:https://www.jiuchutong.com/zhishi/296000.html 转载请保留说明!

上一篇:如何在 Vue 3 中使用 Ant Design(vue3怎么样)

下一篇:Chrome浏览器快捷键大全(chrome浏览器快捷方式)

  • 征信高风险是什么意思
  • 电子商务公司开业活动流程
  • 现金日记账1月怎么算
  • 一般纳税人废业怎么办
  • 进项税额有留底怎么做分录
  • 工地工资是人走账清吗
  • 非营利性企业要交企业所得税吗
  • 营改增后小规模纳税人所得税
  • 收派服务费入什么科目
  • 延期缴纳税款的条件是什么
  • 减税降费在中国 应形成制度性
  • 销售商品代垫的运杂费会计分录
  • 支付测量费的补贴费用怎么记账
  • 营销策划费用计算公式
  • 发票遗失如何补开
  • 法人个人账户收钱算不算公司收钱
  • 腾讯电脑管家上的steam可以吗
  • js时间格式转换时间戳
  • 每季度预缴所得税怎么算
  • php unset()
  • 苹果官网
  • 股东帮企业还款违法吗
  • linux解压安装
  • 怀特霍尔
  • 存货跌价准备减少
  • 销售货物价格明显偏低且无正当理由
  • 企业获得境外咨询费
  • 金税三期税收管理系统响应异常返回信息:没有查询
  • 餐饮发票可以计入福利费吗
  • 销售费用属于损益类科目的收入还是费用
  • vue操作excel
  • tftp传输命令
  • 长期股权投资的账面价值怎么计算
  • 资金占用费怎么开票
  • 去年多计提的工资今年怎么冲
  • 旅行社的增值税税率
  • 预缴税款可以抵扣简易计税
  • 专家评审费属于咨询费吗
  • msdn sql server
  • SQL server 2008中的数据库能否只包含数据文件
  • mysql Non-Transactional Database Only(只支持MyISAM)
  • 一般纳税人提供财政部和国家税务总局规定的
  • 以前年度损益调整借贷方向
  • 抵消递延所得税资产会计处理
  • 软件开发服务费计入什么科目
  • 过路费怎么抵扣进项税额报表怎么填
  • 去国外参加展会办什么签证
  • 股权转让如何缴纳个人所得税举例说明
  • 低预算高要求
  • 质量问题举例
  • 金融存款利率
  • 运杂费扣除增值税进项税额
  • 应付票据的概述
  • 仓储费用分配率
  • 公允价值模式下出售投资性房地产
  • 会议费是指参加会议还是举办会议
  • mysql中的rand函数
  • mysql全部语法
  • sqlserver 中文字符集
  • sqlserver数据类型real
  • ubuntu20.4配置ip
  • 装了ntfs for mac os后找不到磁盘了
  • 常用宏操作的参数设置方法
  • mac系统怎么删除用户
  • pcalc是什么软件
  • window10关闭
  • windows7 无线服务
  • chm文件打不开的解决方法
  • window10系统连接wifi
  • 网页制作颜色搭配
  • unity unit
  • 细说java
  • Javascript & DHTML 实例编程(教程)DOM基础和基本API
  • java语言基于对象
  • javascript如何学
  • 没有交税,个人税可以低房子利息嘛
  • 电子发票开票失败怎么回事?
  • 临时占用耕地是否需要缴纳城镇土地使用税
  • 建筑工程异地预缴税款时间限制
  • 税务窗口岗位职责
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设