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里面寫入初始化代碼函數(shù)，并在mounted函數(shù)中進行回調
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(){
//頁面渲染時回調執(zhí)行
this.createMap()
}vue在高德地圖中渲染點，線，面
1.添加一個點
addMarker(data) { //date表示傳進來的數(shù)據(jù)，包括坐標、圖標、文字等信息
let _this = this
let x = data.title.length * 10 + 10 //文字標注偏移量位置計算（優(yōu)化頁面）
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) // 根據(jù)所設置的大小拉伸或壓縮圖片
});
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 () { //添加監(jiān)聽事件
//進行監(jiān)聽操作
})
},2.添加一條線
addMarker(data) { //date表示傳進來的數(shù)據(jù)，包括坐標、圖標、文字等信息
let _this = this
let x = data.title.length * 10 + 10 //文字標注偏移量位置計算（優(yōu)化頁面）
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) // 根據(jù)所設置的大小拉伸或壓縮圖片
});
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 () { //添加監(jiān)聽事件
//進行監(jiān)聽操作
})
},3.添加一個多邊形
addGon(data) {
let _this = this
let array = [] //計算中心點需要的數(shù)據(jù)
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 () { //監(jiān)聽點擊事件
//監(jiān)聽到的事件執(zhí)行操作
})
},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.創(chuàng)建繪制工具
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.監(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) //繪制完成后點的緯度
console.log(e.obj.w.position.lng) //繪制完成后點的經(jīng)度
} 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引入高德地圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue Router目前最新版本是4.X，本文主要主要介紹了10分鐘快速上手VueRouter4.x教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章介紹了Vue項目中使用Bootstrap的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue3.2中的vuex使用詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
小編在開發(fā)使經(jīng)常會碰到全局切換問題，今天小編給大家?guī)硪黄坛探o大家介紹vue 全局環(huán)境切換問題，感興趣的朋友一起看看吧2019-10-10
這篇文章主要介紹了開發(fā)一個Parcel-vue腳手架工具(詳細步驟)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
ElementUI Tag組件實現(xiàn)多標簽生成的方法示例
這篇文章主要介紹了ElementUI Tag組件實現(xiàn)多標簽生成的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
這篇文章主要介紹了在vue中安裝使用vux的教程，本文給大家記錄了vuex的安裝使用過程，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09
想要實現(xiàn)一個簡潔版的Mini-Vue框架，應該包含三個模塊：分別是：渲染系統(tǒng)模塊、可響應式系統(tǒng)模塊、應用程序入庫模塊，本文主要介紹的是渲染系統(tǒng)模塊的實現(xiàn)，需要的可以參考一下2023-07-07
這篇文章主要介紹了在vue中實現(xiàn)動態(tài)設置元素的高度，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue項目業(yè)務邏輯，不同的項目有不同的功能，不同的功能需要不同的實現(xiàn)，實現(xiàn)這些核心功能的代碼就叫業(yè)務邏輯。所以說業(yè)務邏輯是指一個實體單元為了向另一個實體單元提供服務，應該具備的規(guī)則與流程2022-11-11