vue引入高德地图并绘制点线面的方法

 更新时间:2024年03月12日 10:53:53   作者:阿钧1018  
这篇文章主要介绍了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引入高德地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue 解决form表单提交但不跳转页面的问题

    vue 解决form表单提交但不跳转页面的问题

    今天小编就为大家分享一篇vue 解决form表单提交但不跳转页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • van-uploader保存文件到后端回显后端接口返回的数据

    van-uploader保存文件到后端回显后端接口返回的数据

    前端开发想省时间就是要找框架呀,下面这篇文章主要给大家介绍了关于van-uploader保存文件到后端回显后端接口返回的数据,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • Vue3如何使用Vue-Router进行路由控制

    Vue3如何使用Vue-Router进行路由控制

    无论是小型项目还是中大型项目,Vue-Router都是必选的一个组件,Vue-Router提供了便捷的方式进行路由跳转,在使用过程中有一些坑,希望能给在编码找不到问题时的码农提供一点灵感
    2022-06-06
  • vue+elementUI实现简单日历功能

    vue+elementUI实现简单日历功能

    这篇文章主要为大家详细介绍了vue+elementUI实现简单日历功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • vue3 reactive定义的引用类型直接赋值导致数据失去响应式问题

    vue3 reactive定义的引用类型直接赋值导致数据失去响应式问题

    这篇文章主要介绍了vue3 reactive定义的引用类型直接赋值导致数据失去响应式问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 详解Vuejs2.0之异步跨域请求

    详解Vuejs2.0之异步跨域请求

    这篇文章主要介绍了详解Vuejs2.0之异步跨域请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 基于Vue3创建一个简单的倒计时组件

    基于Vue3创建一个简单的倒计时组件

    这篇文章主要给大家介绍了基于Vue3创建一个简单的倒计时组件的代码示例,文中通过代码示例介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下
    2023-11-11
  • 使用vue构建移动应用实战代码

    使用vue构建移动应用实战代码

    本篇文章主要介绍了使用vue构建移动应用实战代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue鼠标hover(悬停)改变background-color移入变色问题

    vue鼠标hover(悬停)改变background-color移入变色问题

    这篇文章主要介绍了vue鼠标hover(悬停)改变background-color移入变色问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue2+elementUI的el-tree的选中、高亮、定位功能的实现

    vue2+elementUI的el-tree的选中、高亮、定位功能的实现

    这篇文章主要介绍了vue2+elementUI的el-tree的选中、高亮、定位功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09

最新评论