7 changed files with 147 additions and 15 deletions
@ -0,0 +1,109 @@
|
||||
<template> |
||||
<div class="bmap" id="container" style="float: left"></div> |
||||
<div |
||||
style=" |
||||
border: 1px solid pink; |
||||
margin-left: 5px; |
||||
height: 600px; |
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
||||
" |
||||
> |
||||
<!-- @change="handleCheckedCitiesChange"--> |
||||
<el-checkbox-group v-model="reservationIds"> |
||||
<el-col v-for="(item, index) in reservationData"> |
||||
<el-checkbox :label="item.id" :key="item.id" |
||||
>{{ item.consignee }} {{ item.deliveryAddress }} {{ |
||||
item.deliveryPhone |
||||
}}</el-checkbox |
||||
> |
||||
</el-col> |
||||
</el-checkbox-group> |
||||
</div> |
||||
|
||||
<div style="margin-left: 40%; margin-top: 5%; float: bottom"> |
||||
<el-button icon="el-icon-circle-close" @click="back">返 回</el-button> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup> |
||||
import { useStore } from 'vuex'; |
||||
import { getReservationAddr } from '@/api/distribution/distributionReservation'; |
||||
import { getDictionaryBiz } from '@/api/system/dict'; |
||||
import { onMounted, reactive, toRefs, watchEffect } from 'vue'; |
||||
import { useRouter } from 'vue-router'; |
||||
let router = useRouter(); |
||||
let details = reactive({ |
||||
name: 'BmapDemo', |
||||
item: null, |
||||
error: null, |
||||
addressList: [], |
||||
reservationData: [], |
||||
reservationIds: [], |
||||
mapLoc: null, |
||||
}); |
||||
onMounted(() => { |
||||
details.item = JSON.parse(router.currentRoute.value.query.item); |
||||
setTimeout(() => { |
||||
init(); |
||||
}, 1500); |
||||
// setTimeout(()=>{ |
||||
// details.mapLoc.clearOverlays(); |
||||
|
||||
// },9500) |
||||
}); |
||||
|
||||
function init() { |
||||
details.mapLoc = new BMapGL.Map('container'); // 创建地图实例 |
||||
let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标 |
||||
details.mapLoc.centerAndZoom(point, 12); |
||||
details.mapLoc.enableScrollWheelZoom(true); |
||||
// maplabel() |
||||
if (details.mapLoc) { |
||||
details.mapLoc.clearOverlays(); //清除地图的label |
||||
} |
||||
maplabel('四川成都龙泉驿区','展示的内容', 0); |
||||
} |
||||
function maplabel(address,contents, index) { |
||||
let myGeo = new BMapGL.Geocoder(); |
||||
myGeo.getPoint(address, function (point) { |
||||
if (point) { |
||||
console.log(point, '---------------'); |
||||
if (index == 0) { |
||||
details.mapLoc.centerAndZoom(point, 12); |
||||
} |
||||
let content = contents; |
||||
let label = new BMapGL.Label(content, { |
||||
// 创建文本标注 |
||||
position: point, |
||||
offset: new BMapGL.Size(10, 20), |
||||
}); |
||||
details.mapLoc.addOverlay(label); // 将标注添加到地图中 |
||||
label.setStyle({ |
||||
// 设置label的样式 |
||||
color: '#000', |
||||
fontSize: '10px', |
||||
border: '1px solid #1E90FF', |
||||
borderRadius: '20px', |
||||
padding: '5px 10px', |
||||
}); |
||||
console.log(label, '---------------'); |
||||
} else { |
||||
// alert('您选择的地址没有解析到结果！'); |
||||
console.log(point); |
||||
console.log('您选择的地址没有解析到结果！'); |
||||
} |
||||
}); |
||||
} |
||||
function back() { |
||||
router.back(-1); |
||||
} |
||||
const { reservationIds }=toRefs(details) |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.bmap { |
||||
width: 800px; |
||||
height: 600px; |
||||
border: 1px solid pink; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue