kilo
2 years ago
7 changed files with 859 additions and 744 deletions
@ -1,115 +1,147 @@
|
||||
<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> |
||||
<div class="bmap" id="container" ></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: 50%; 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 { selectStockArticleAtlasInfo} from '@/api/distribution/distributionDeliveryList' |
||||
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); |
||||
console.log("details.item.id------------->",details.item.id); |
||||
selectStockArticleAtlasInfo(details.item.id).then(res=>{ |
||||
console.log("-------------->",res); |
||||
}) |
||||
console.log("------------->",details.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 |
||||
import { useStore } from 'vuex'; |
||||
import { getReservationAddr } from '@/api/distribution/distributionReservation'; |
||||
import { getDictionaryBiz } from '@/api/system/dict'; |
||||
import { selectStockArticleAtlasInfo } from '@/api/distribution/distributionDeliveryList'; |
||||
import { onMounted, reactive, toRefs, createApp } from 'vue'; |
||||
import { useRouter } from 'vue-router'; |
||||
import { ref, watch } from "vue" |
||||
|
||||
|
||||
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); |
||||
|
||||
console.log('details.item.id------------->', details.item.id); |
||||
|
||||
watch(details.item.id, (newValue, oldValue) => { |
||||
console.log("item变了", newValue, oldValue); |
||||
a(details.item); |
||||
},{immediate:true}); |
||||
console.log('------------->', details.item); |
||||
// setTimeout(()=>{ |
||||
// details.mapLoc.clearOverlays(); |
||||
|
||||
// },9500) |
||||
}); |
||||
|
||||
|
||||
|
||||
function a(data) { |
||||
selectStockArticleAtlasInfo(data.id).then(res => { |
||||
const data = res.data.data; |
||||
console.log('res------------->', data); |
||||
setTimeout(() => { |
||||
init(data); |
||||
}, 1500); |
||||
}); |
||||
} |
||||
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 init(data) { |
||||
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 |
||||
} |
||||
}); |
||||
} |
||||
function back() { |
||||
router.back(-1); |
||||
} |
||||
const { reservationIds }=toRefs(details) |
||||
let a = data; |
||||
a.forEach((item,index)=>{ |
||||
console.log('item------------->', item); |
||||
|
||||
maplabel(item.customerAddress, item.customerName+"--"+item.customerAddress+"--"+item.customerTelephone, index); |
||||
|
||||
// maplabel('中国四川省成都市简阳市石桥镇简阳市石桥镇红星美凯龙雄州商场-1-26-154', '周娅', 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; |
||||
} |
||||
.bmap { |
||||
margin-top: 2%; |
||||
width: 1800px; |
||||
height: 600px; |
||||
border: 1px solid pink; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue