在Vue企业管理系统定制开发中使用高德地图
一、如何在Vue企业管理系统定制开发中引入基础高德地图
企业管理系统定制开发根据官网提示，在Web端，企业管理系统定制开发我们需要高德地图加载器：npm i @amap/amap-jsapi-loader -S
注意：
* 企业管理系统定制开发此教程适用于Web端，移动端还未尝试，感兴趣的或者有需要的可单独联系我
*
1、步骤一：注册并登录高德地图开放平台，申请密钥
操作步骤如下图：
2、步骤二：安装高德地图加载器
npm i @amap/amap-jsapi-loader -S- 1
3、封装一个自定义地图组件，并初始化地图
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
注意点：
2021年起，高德地图必须使用安全密钥 即是
window._AMapSecurityConfig = { securityJsCode: '安全密钥',}- 1
- 2
- 3
二、根据关键词搜索，并定位到搜索的位置
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
三、添加放大缩小地图、转盘
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
四、点击地图获取
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); }); },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
五、地图上绘制标记点、圆形、曲线、矩形和多边形等,及其绘制清除
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
清除绘制
// 清除 // map.remove(overlays) // overlays = []; // 或者 // mouseTool.close(true)//关闭，并清除覆盖物- 1
- 2
- 3
- 4
- 5
六、总结
一般的，使用高德地图，不需要参考其他博主写的，基本上就是安装一个加载器@amap/amap-jsapi-loader，然后参考高德地图开放webjs文档，就完全可以自己实现业务需求
,这个写的很好，包括了针对于Vue和React的基本引用，以及相关地图需求都有API满足