vue引入高德地圖并繪制點(diǎn)線面的方法

更新時間：2024年03月12日 10:53:53 作者：阿鈞1018

這篇文章主要介紹了vue引入高德地圖并繪制點(diǎn)線面的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

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> //鼠標(biāo)繪制插件資源

2.在需要用到高德地圖的頁面準(zhǔn)備一個container容器，用來初始化地圖

<div class="container" id="container" ref="container">

3.在js里面寫入初始化代碼函數(shù)，并在mounted函數(shù)中進(jìn)行回調(diào)

methods:{
    //初始化地圖方法
	createMap() {
            var _this = this
            const map = new AMap.Map('container', {
                viewMode: '2D',  // 默認(rèn)使用 2D 模式
                zoom: 15,  //初始化地圖層級
                center: [114.01807, 34.72367]  //初始化地圖中心點(diǎn)
            });
            var toolBar = new AMap.ToolBar({
                position: {
                    top: '110px',
                    right: '30px'
                }
            })
            map.addControl(toolBar);
           	_this.map = map
        },
}
mounted(){
	//頁面渲染時回調(diào)執(zhí)行
	this.createMap()
}

vue在高德地圖中渲染點(diǎn)，線，面

1.添加一個點(diǎn)

addMarker(data) { //date表示傳進(jìn)來的數(shù)據(jù)，包括坐標(biāo)、圖標(biāo)、文字等信息
            let _this = this 
            let x = data.title.length * 10 + 10  //文字標(biāo)注偏移量位置計(jì)算（優(yōu)化頁面）
            data.markGaodeLocation = _this.filterPoint(data.markGaodeLocation)
            const icon = new AMap.Icon({
                size: new AMap.Size(30, 30),    // 圖標(biāo)尺寸
                image: data.iconUrl,  // Icon的圖像
                imageSize: new AMap.Size(30, 30)   // 根據(jù)所設(shè)置的大小拉伸或壓縮圖片
            });
            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),  //設(shè)置文本標(biāo)注偏移量
                content: `<span>${data.title}</span>`, //設(shè)置文本標(biāo)注內(nèi)容
                direction: 'right' //設(shè)置文本標(biāo)注方位
            });
            _this.map.add(marker);
            marker.on('click', function () { //添加監(jiān)聽事件
                //進(jìn)行監(jiān)聽操作
            })
        },

2.添加一條線

addMarker(data) { //date表示傳進(jìn)來的數(shù)據(jù)，包括坐標(biāo)、圖標(biāo)、文字等信息
            let _this = this 
            let x = data.title.length * 10 + 10  //文字標(biāo)注偏移量位置計(jì)算（優(yōu)化頁面）
            data.markGaodeLocation = _this.filterPoint(data.markGaodeLocation)
            const icon = new AMap.Icon({
                size: new AMap.Size(30, 30),    // 圖標(biāo)尺寸
                image: data.iconUrl,  // Icon的圖像
                imageSize: new AMap.Size(30, 30)   // 根據(jù)所設(shè)置的大小拉伸或壓縮圖片
            });
            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),  //設(shè)置文本標(biāo)注偏移量
                content: `<span>${data.title}</span>`, //設(shè)置文本標(biāo)注內(nèi)容
                direction: 'right' //設(shè)置文本標(biāo)注方位
            });
            _this.map.add(marker);
            marker.on('click', function () { //添加監(jiān)聽事件
                //進(jìn)行監(jiān)聽操作
            })
        },

3.添加一個多邊形

addGon(data) {
            let _this = this
            let array = [] //計(jì)算中心點(diǎn)需要的數(shù)據(jù)
            data.markGaodeLocation = _this.filterPoint(data.markGaodeLocation)
            var lineArray = [] // 線的點(diǎn)的集合
            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) //計(jì)算出中心點(diǎn)
            var polygon = new AMap.Polygon({
                path: lineArray,
                opacity:0.1,
                fillOpacity:0.3,
                fillColor: '#fff', // 多邊形填充顏色
                borderWeight: 2, // 線條寬度，默認(rèn)為 1
                strokeColor: 'blue', // 線條顏色
            });
            _this.map.add(polygon)
            _this.addLabel01(latArray,data.title) //在多邊形中心點(diǎn)添加文字標(biāo)注
            polygon.on('click', function () { //監(jiān)聽點(diǎn)擊事件
                //監(jiān)聽到的事件執(zhí)行操作
            })
        },

4.添加文字標(biāo)注

addLabel(data, title) {
            let _this = this
            var text = new AMap.Text({
                text: title,
                anchor: 'center', // 設(shè)置文本標(biāo)記錨點(diǎn)
                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在高德地圖中手動繪制點(diǎn)，線，面

1.創(chuàng)建繪制工具

draw(type) {
            switch (type) {
                case 'marker': {
                    this.mouseTool.marker({})
                    break;
                }
                case 'polyline': {
                    this.mouseTool.polyline({
                        strokeColor: '#80d8ff'
                        //同Polyline的Option設(shè)置
                    });
                    break;
                }
                case 'polygon': {
                    this.mouseTool.polygon({
                        fillColor: '#00b0ff',
                        strokeColor: '#80d8ff'
                        //同Polygon的Option設(shè)置
                    });
                    break;
                }
            }
        },

2.監(jiān)聽繪制完成事件

//監(jiān)聽draw事件可獲取畫好的覆蓋物
        _this.mouseTool.on('draw', function (e) {
            if (e.obj.CLASS_NAME == "AMap.Marker") {
                console.log(e.obj.w.position.lat) //繪制完成后點(diǎn)的緯度
                console.log(e.obj.w.position.lng) //繪制完成后點(diǎn)的經(jīng)度
            } else if (e.obj.CLASS_NAME == "AMap.Polyline") {
                let locat = e.obj.getPath() //獲取繪制完成后的線的所有坐標(biāo)點(diǎn)
            } else if (e.obj.CLASS_NAME == "AMap.Polygon") {
                let locat = e.obj.getPath() //獲取繪制完成后的多邊形的所有坐標(biāo)點(diǎn)
            }
            _this.mouseTool.close(true) //最后關(guān)閉繪制工具
        })

以上內(nèi)容就是在vue中添加點(diǎn)線面的所有方法，以及手動繪制的一些操作，如果還有疑惑的小伙伴，請移步至高德地圖api中進(jìn)行查看

到此這篇關(guān)于vue引入高德地圖并繪制點(diǎn)線面的文章就介紹到這了,更多相關(guān)vue引入高德地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: