vue引入高德地图并绘制点线面的方法
vue引入高德地图
1.首先在public文件夹下得index.html文件中的head里面通过src引入高德api文件
<script src="https://webapi.amap.com/maps?v=2.0&key=你的ak"></script> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的ak&plugin=AMap.MouseTool,AMap.Geolocation,AMap.ControlBar,Map3D,AMap.DistrictSearch,AMap.RangingTool,AMap.PolyEditor,AMap.ToolBar"></script> //鼠标绘制插件资源
2.在需要用到高德地图的页面准备一个container容器,用来初始化地图
<div class="container" id="container" ref="container">
3.在js里面写入初始化代码函数,并在mounted函数中进行回调
methods:{ //初始化地图方法 createMap() { var _this = this const map = new AMap.Map('container', { viewMode: '2D', // 默认使用 2D 模式 zoom: 15, //初始化地图层级 center: [114.01807, 34.72367] //初始化地图中心点 }); var toolBar = new AMap.ToolBar({ position: { top: '110px', right: '30px' } }) map.addControl(toolBar); _this.map = map }, } mounted(){ //页面渲染时回调执行 this.createMap() }
vue在高德地图中渲染点,线,面
1.添加一个点
addMarker(data) { //date表示传进来的数据,包括坐标、图标、文字等信息 let _this = this let x = data.title.length * 10 + 10 //文字标注偏移量位置计算(优化页面) data.markGaodeLocation = _this.filterPoint(data.markGaodeLocation) const icon = new AMap.Icon({ size: new AMap.Size(30, 30), // 图标尺寸 image: data.iconUrl, // Icon的图像 imageSize: new AMap.Size(30, 30) // 根据所设置的大小拉伸或压缩图片 }); const marker = new AMap.Marker({ icon: icon, position: new AMap.LngLat(data.markGaodeLocation[0].markLongitude, data.markGaodeLocation[0].markLatitude), // content:data.title }); marker.setLabel({ offset: new AMap.Pixel(-x, 30), //设置文本标注偏移量 content: `<span>${data.title}</span>`, //设置文本标注内容 direction: 'right' //设置文本标注方位 }); _this.map.add(marker); marker.on('click', function () { //添加监听事件 //进行监听操作 }) },
2.添加一条线
addMarker(data) { //date表示传进来的数据,包括坐标、图标、文字等信息 let _this = this let x = data.title.length * 10 + 10 //文字标注偏移量位置计算(优化页面) data.markGaodeLocation = _this.filterPoint(data.markGaodeLocation) const icon = new AMap.Icon({ size: new AMap.Size(30, 30), // 图标尺寸 image: data.iconUrl, // Icon的图像 imageSize: new AMap.Size(30, 30) // 根据所设置的大小拉伸或压缩图片 }); const marker = new AMap.Marker({ icon: icon, position: new AMap.LngLat(data.markGaodeLocation[0].markLongitude, data.markGaodeLocation[0].markLatitude), // content:data.title }); marker.setLabel({ offset: new AMap.Pixel(-x, 30), //设置文本标注偏移量 content: `<span>${data.title}</span>`, //设置文本标注内容 direction: 'right' //设置文本标注方位 }); _this.map.add(marker); marker.on('click', function () { //添加监听事件 //进行监听操作 }) },
3.添加一个多边形
addGon(data) { let _this = this let array = [] //计算中心点需要的数据 data.markGaodeLocation = _this.filterPoint(data.markGaodeLocation) var lineArray = [] // 线的点的集合 data.markGaodeLocation.forEach(item => { lineArray.push(new AMap.LngLat(item.markLongitude, item.markLatitude)) }) data.markGaodeLocation.forEach((item) => { array.push([item.markLatitude, item.markLongitude]) }) let latArray = _this.mapGetCenter(array) //计算出中心点 var polygon = new AMap.Polygon({ path: lineArray, opacity:0.1, fillOpacity:0.3, fillColor: '#fff', // 多边形填充颜色 borderWeight: 2, // 线条宽度,默认为 1 strokeColor: 'blue', // 线条颜色 }); _this.map.add(polygon) _this.addLabel01(latArray,data.title) //在多边形中心点添加文字标注 polygon.on('click', function () { //监听点击事件 //监听到的事件执行操作 }) },
4.添加文字标注
addLabel(data, title) { let _this = this var text = new AMap.Text({ text: title, anchor: 'center', // 设置文本标记锚点 draggable: false, cursor: 'pointer', angle: 10, style: { // 'padding': '.75rem 1.25rem', 'margin-bottom': '1rem', 'border-radius': '.25rem', 'background-color': 'transparent', // 'width': '15rem', 'border-width': 0, 'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)', 'text-align': 'center', 'font-size': '12px', 'color': 'blue' }, position: [data[0], data[1]] }); text.setMap(_this.map) },
vue在高德地图中手动绘制点,线,面
1.创建绘制工具
draw(type) { switch (type) { case 'marker': { this.mouseTool.marker({}) break; } case 'polyline': { this.mouseTool.polyline({ strokeColor: '#80d8ff' //同Polyline的Option设置 }); break; } case 'polygon': { this.mouseTool.polygon({ fillColor: '#00b0ff', strokeColor: '#80d8ff' //同Polygon的Option设置 }); break; } } },
2.监听绘制完成事件
//监听draw事件可获取画好的覆盖物 _this.mouseTool.on('draw', function (e) { if (e.obj.CLASS_NAME == "AMap.Marker") { console.log(e.obj.w.position.lat) //绘制完成后点的纬度 console.log(e.obj.w.position.lng) //绘制完成后点的经度 } else if (e.obj.CLASS_NAME == "AMap.Polyline") { let locat = e.obj.getPath() //获取绘制完成后的线的所有坐标点 } else if (e.obj.CLASS_NAME == "AMap.Polygon") { let locat = e.obj.getPath() //获取绘制完成后的多边形的所有坐标点 } _this.mouseTool.close(true) //最后关闭绘制工具 })
以上内容就是在vue中添加点线面的所有方法,以及手动绘制的一些操作,如果还有疑惑的小伙伴,请移步至高德地图api中进行查看
到此这篇关于vue引入高德地图并绘制点线面的文章就介绍到这了,更多相关vue引入高德地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
van-uploader保存文件到后端回显后端接口返回的数据
前端开发想省时间就是要找框架呀,下面这篇文章主要给大家介绍了关于van-uploader保存文件到后端回显后端接口返回的数据,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06vue3 reactive定义的引用类型直接赋值导致数据失去响应式问题
这篇文章主要介绍了vue3 reactive定义的引用类型直接赋值导致数据失去响应式问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-06-06vue鼠标hover(悬停)改变background-color移入变色问题
这篇文章主要介绍了vue鼠标hover(悬停)改变background-color移入变色问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10vue2+elementUI的el-tree的选中、高亮、定位功能的实现
这篇文章主要介绍了vue2+elementUI的el-tree的选中、高亮、定位功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09
最新评论