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函数中，有需要可以看我之前的blogthis.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虚线dashedstrokeDasharray: [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);