位置: 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浏览器快捷方式)

  • 分公司销售给总公司的印花税
  • 增值税纳税义务确认时间
  • 增值税专用发票抵扣期限
  • 上月留抵进项本月抵扣会计分录
  • 投资性房地产处置的账务处理
  • 税务信用级别为m级
  • 更改增值税申报表有退税会很麻烦吗
  • 农业生产成本二级科目有福利费支出吗
  • 员工住院的发票可以做账吗
  • 回购股份限售
  • 小规模纳税人转让土地使用权
  • 装修项目展示厅费用支出列什么科目?
  • 劳保统筹费用
  • 应付未付的职工工资属于什么会计科目
  • 无法读取金税盘时间版本怎么解决
  • 按季度计提利息
  • 小规模纳税人可以抵扣增值税专用发票吗
  • 多计提的社保费,可否计入营业外收入
  • 营业外收入怎么申报
  • 营改增的销售额规定
  • 付款后多久开发发票
  • 纳税人哪些支出不用交税
  • 扣缴公积金的会计分录
  • 建筑工程简易计税可以抵扣吗
  • linux 管道命令详解
  • 授权经销书模板
  • linux内存缓存
  • PHP:zip_entry_read()的用法_Zip函数
  • 一般纳税人辅导期什么意思
  • 餐饮行业采购
  • python中各种颜色
  • 一条指令可以完成一项复杂任务吗
  • 房屋所在地的房子怎么查
  • 融资租赁会计处理流程
  • ubuntu20.04.1安装
  • vue项目使用百度地图怎么长久使用
  • 进项税额转出是好事还是坏事
  • 退回社保怎么做分录
  • 商业承兑汇票贴现会计分录
  • dedecms主页修改
  • sql防御
  • el-form表单
  • 织梦是啥
  • 季度所得税收入多报,年度可以调整吗
  • 公司从个人手中购买二手车
  • 增值税附表3
  • 托盘入账哪个科目最好
  • 所有者权益包括哪些会计科目
  • 机关事业单位体育协会举办体育赛事活动应当
  • shell取命令执行结果
  • mysql命令行删除库中的所有表
  • 个人对企业的例子
  • 员工的医药费计入什么科目
  • 营改增会计分录怎么做
  • 以前年度负债调整
  • 公司员工借款后还款收据怎么填
  • 小规模纳税人开专票税率是多少?
  • 企业当年实现的净利润即为企业当年可供分配的利润
  • 坏账准备的会计核算
  • mysql 模型
  • unix的文件系统采用
  • 联想s5s531笔记本M2
  • windows8出现蓝屏
  • Win10 64位系统下鼠标右键刷新没反应的解决方案
  • vista正版破解
  • linux find -perm 详解
  • win7下安装XP
  • ubuntu和windows比较有什么好处
  • 怎么看win8还是win10
  • win7桌面文件夹路径
  • windows7文件操作步骤
  • unity协程yield
  • script在html中的用法
  • perl read
  • jquery$符号
  • 深入解读2023年一号文件
  • AnalogClock
  • windows下安装python环境
  • aiclod
  • 广西2023新农合报销政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设