vue3 高德地图实现测距

2024-07-13 21:30| 来源: 网络整理| 查看: 265

vue3 数据可视化大屏开发中，有个要求，地图要可以实现测距，搜索了一下高德地图支持这个功能，将实现方法记录一下。

vue3 高德地图实现测距

演示实例

引入高德地图

测距需要使用AMap.RangingTool 所以要引入AMap.RangingTool

代码测距 export default { data() { return { map: null, ceju: false, ruler1: null, type: -1, } }, components: {}, created() { }, watch: { type() { if (this.type != -1) { store.changeItemIndex(this.type) } this.ceju = false this.getGdMap() }, ceju() { if (this.ceju) { this.ruler1.turnOn() } else { this.ruler1.turnOff() } } }, mounted() { this.getGdMap() }, methods: { // 高德地图相关 getGdMap() { var that = this; that.map = new AMap.Map(this.$refs.allmap, { scrollWheel: true, viewMode: '2D', resizeEnable: true, zoom: 13, maxZoom: 30, minZoom: 0, center: [121.22989570399066, 31.02782839832306], }); //自定义样式 var startMarkerOptions = { icon: new AMap.Icon({ size: new AMap.Size(19, 31),//图标大小 imageSize: new AMap.Size(19, 31), image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png" }) }; var endMarkerOptions = { icon: new AMap.Icon({ size: new AMap.Size(19, 31),//图标大小 imageSize: new AMap.Size(19, 31), image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png" }), offset: new AMap.Pixel(-9, -31) }; var midMarkerOptions = { icon: new AMap.Icon({ size: new AMap.Size(19, 31),//图标大小 imageSize: new AMap.Size(19, 31), image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png" }), offset: new AMap.Pixel(-9, -31) }; var lineOptions = { strokeStyle: "solid", strokeColor: "#FF33FF", strokeOpacity: 1, strokeWeight: 2 }; var rulerOptions = { startMarkerOptions: startMarkerOptions, midMarkerOptions: midMarkerOptions, endMarkerOptions: endMarkerOptions, lineOptions: lineOptions }; this.ruler1 = new AMap.RangingTool(this.map, rulerOptions); }, }, filters: {} } .bm-view { width: 100%; height: 100%; position: relative; } .bodymap { width: 100%; height: 100%; position: relative; } .maps { width: 100%; height: 100%; position: relative; .info { position: absolute; right: 20px; top: 20px; height: 60px; z-index: 100; padding: 0 20px; display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; flex-direction: row; align-content: flex-start; background: rgba(8, 31, 66, 1.00); border-radius: 5px; .el-input { background: rgba(10, 32, 68, 1.00); border: 1px solid rgba(1, 119, 255, 1.00); //.el-input__wrapper{ // background: rgba(61, 131, 198, 1.00); //} } } } .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { background: none !important; } .gdPopWin { background: rgba(9, 31, 67, 1.00); width: 400px; height: auto; min-height: 200px; p { line-height: 30px; color: #fff; font-size: 14px; } h4 { font-size: 16px; } } .amap-info-content { background: rgba(10, 31, 67, 1.00); } .middle-left .amap-info-sharp { border-right: 8px solid rgba(10, 31, 67, 1.00); } .markerlnglat { img { width: 40px; } } .infoTitle { margin-left: 20px; margin-right: 20px; } .amap-ranging-label span { color: #000; } 喜欢 (0)

【本文地址】

公司简介

联系我们