vue引入高德地图并绘制点线面的方法
作者：阿钧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引入高德地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！