vue高德地图使用小结，加载、添加标记点、圆、轨迹、文本标记

vue高德地图使用小结

地图加载 <script> mounted(){ this.findYourData(); //数据获取函数调用 let self = this; setTimeout(function () { self.initMap(); },800) //延时加载地图，保证数据获取成功 } methods:{ //地图 initMap() { this.location = [this.data.longitude,this.data.latitude]; this.$mapUtil.loadMap('2.0').then(AMap => { //地图调用需要的值已封装在loadMap函数中，有需要可以看我之前的blog this.map = new AMap.Map('Maps', { zoom: 14, //地图缩放级别 center: this.location, //初始化地图中心点 resizeEnable: true, mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式 viewMode: '2D', //设置地图模式 lang:'zh_cn', //设置地图语言类型 }) //这个后面跟的就是对于高德地图的一些修改，如添加标记点 }).catch(() => { console.log('地图加载失败！') }) } } </script> 地图添加标记点 //标记点图标样式设置 let icon = new AMap.Icon({ size: new AMap.Size(43, 50), // 图标尺寸 image: require('图像地址'), // Icon的图像 imageOffset: new AMap.Pixel(0,0), // 图像相对展示区域的偏移量，适于雪碧图等 imageSize: new AMap.Size(43, 50) // 根据所设置的大小拉伸或压缩图片 }); //标记点定义 var marker = new AMap.Marker({ position: [121.12,48.48], //标记点 map: that.map, icon: icon, // Icon的图像 offset: new AMap.Pixel(-25,-25) //标记点相对偏移量，可以固定其地址，不随着地图缩放而偏移，系统默认值为(-10,-34) }) //第一种添加标记点的方式 this.map.add(marker) //第二种添加标记点的方式 marker.setMap(this.map) // 缩放地图到合适的视野级别 this.map.setFitView(marker) 地图添加圆 //绘制预警半径 var circle = new AMap.Circle({ center: [121.12,48.48], radius: 1000, //半径 borderWeight: 1, strokeColor: "#3070FF", //边框颜色 strokeOpacity: 1, //边框透明度 strokeWeight: 1, //边框粗细 fillOpacity: 0.05, //填充色透明度 strokeStyle: 'solid', //边框实线solid虚线dashed strokeDasharray: [10, 10], fillColor: '#3096FF', //填充色 zIndex: 50, }) //添加圆形轨迹 circle.setMap(this.map) 地图添加轨迹 var polygon = new AMap.Polygon({ path:[[116.478935,39.997761],[116.484648,39.999861]], strokeColor: "#F56C6C", strokeWeight: 5, strokeOpacity: 0.6, fillOpacity: 0, fillColor: '#E6A23C', showDir:true, //轨迹箭头标记 zIndex: 50, }) polygon.setMap(this.map) 地图添加文本标记 // 创建纯文本标记 var text = new AMap.Text({ text:'纯文本标记', anchor:'center', // 设置文本标记锚点 draggable:true, //是否可拖拽 cursor:'pointer', //鼠标样式 angle:10, //旋度 style:{ 'padding': '.75rem 1.25rem', //文本边框 'margin-bottom': '1rem', //外边框 'border-radius': '.25rem', //圆弧度 'background-color': 'white', //背景色 'width': '15rem', //宽度 'height': '15rem', //高度 'border-width': 0, 'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)', //阴影 'text-align': 'center', //文本位置 'font-size': '20px', //字体大小 'color': 'blue' //字体颜色 }, position: [116.396923,39.918203] }); text.setMap(map);