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 Router目前最新版本是4.X，本文主要主要介绍了10分钟快速上手VueRouter4.x教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章介绍了Vue项目中使用Bootstrap的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue3.2中的vuex使用详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
小编在开发使经常会碰到全局切换问题，今天小编给大家带来一篇教程给大家介绍vue 全局环境切换问题，感兴趣的朋友一起看看吧2019-10-10
这篇文章主要介绍了开发一个Parcel-vue脚手架工具(详细步骤)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了ElementUI Tag组件实现多标签生成的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了在vue中安装使用vux的教程，本文给大家记录了vuex的安装使用过程，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-09-09
想要实现一个简洁版的Mini-Vue框架，应该包含三个模块：分别是：渲染系统模块、可响应式系统模块、应用程序入库模块，本文主要介绍的是渲染系统模块的实现，需要的可以参考一下2023-07-07
这篇文章主要介绍了在vue中实现动态设置元素的高度，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue项目业务逻辑，不同的项目有不同的功能，不同的功能需要不同的实现，实现这些核心功能的代码就叫业务逻辑。所以说业务逻辑是指一个实体单元为了向另一个实体单元提供服务，应该具备的规则与流程2022-11-11
最新评论