Skip to content

S
SuperMan
Commit 5396e2ab authored by youjie's avatar youjie
Browse files
Options

no message

parent 24026294
Show whitespace changes
Inline Side-by-side
Showing with 74 additions and 130 deletions
src/components/busManagement/CharteringManagement/CharteringInfoManage.vue
View file @ 5396e2ab
...@@ -854,7 +854,7 @@ ...@@ -854,7 +854,7 @@
<el-form-item :label="`上车详细地址${index + 1}`" :prop="`PlaceList.${index}.Address`" :rules="rules.Address"> <el-form-item :label="`上车详细地址${index + 1}`" :prop="`PlaceList.${index}.Address`" :rules="rules.Address">
<el-input maxlength="300" placeholder="请输入上车详细地址" class="w300 addAddress" v-model="item.Address"> <el-input maxlength="300" placeholder="请输入上车详细地址" class="w300 addAddress" v-model="item.Address">
<el-button slot="append" @click="clickMapAddress(2, index, item.Address,)" <el-button slot="append" @click="clickMapAddress(2, index, item.Address)"
icon="iconfont icon-img_dw"></el-button> icon="iconfont icon-img_dw"></el-button>
</el-input> </el-input>
</el-form-item> </el-form-item>
...@@ -1262,9 +1262,10 @@ export default { ...@@ -1262,9 +1262,10 @@ export default {
this.PlaceShow = !this.PlaceShow this.PlaceShow = !this.PlaceShow
} }
}, },
clickMapAddress(type, index) { clickMapAddress(type, index, Address) {
this.index = index this.index = index
this.MapType = type this.MapType = type
this.Address = Address
this.selectAddress = true this.selectAddress = true
}, },
clickAirport(index, type) { clickAirport(index, type) {
......
src/components/busManagement/CharteringManagement/components/Map.vue
View file @ 5396e2ab
<template> <template>
<div> <div>
<div style="text-align: center;display: flex;justify-content: center;"> <baidu-map v-bind:style="mapStyle" class="bm-view"
<el-input class="w300" style="margin-right: 10px;" id="suggestId" v-model="city" placeholder="请输入需要检索的地名" ak="L5Qw0GlbbCIMwgR4Uug3ogM40Imkd3CV"
name="address_detail" @input="search" /> :center="center" :zoom="zoom" :scroll-wheel-zoom="true"
<!-- <input type="button" class="normalBtn sureBtn" value="搜索" @click="search"/> --> @click="getClickInfo" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
</div> <bm-view style="width: 100%; height:400px;"></bm-view>
<div style="height: 310px;width: 100%;margin-top: 15px;" :id="`allmap_${id}${type}_${index}`"></div> <bm-marker :position="{lng: center.lng, lat: center.lat}"
<div style="margin-top: 10px;" v-if="address_detail">已选地址：{{ address_detail }}</div> :dragging="true"
<div class="btnList"> animation="BMAP_ANIMATION_BOUNCE">
<input type="button" class="normalBtn sureBtn" value="确定" @click="sendMsg" /> </bm-marker>
<input type="button" class="hollowFixedBtn" value="取消" @click="closeDialog" /> <bm-control :offset="{width: '10px', height: '10px'}">
</div> <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
<input v-model="keyword" type="text" placeholder="请输入搜索关键字" class="serachinput">
</bm-auto-complete>
<button class="normalBtn" type="primary" @click="determineLngLat">
确定
</button>
</bm-control>
<bm-local-search :keyword="keyword" :auto-viewport="true"
style="width:0px;height:0px;overflow: hidden;"></bm-local-search>
</baidu-map>
</div> </div>
</template> </template>
<script> <script>
import {BaiduMap, BmControl,
BmView, BmAutoComplete,
BmLocalSearch, BmMarker} from 'vue-baidu-map'
export default { export default {
props: ["Address", "id", "type", "index"], props: ["Address", "id", "type", "index"],
components: {
BaiduMap,
BmControl,
BmView,
BmAutoComplete,
BmLocalSearch,
BmMarker
},
data() { data() {
return { return {
city: '', keyword: '',
address_detail: null, //详细地址 mapStyle: {
userlocation: null, width: '100%',
dataList: null, height: '100%'
point: {
lng: '',
lat: ''
}, },
center: {lng: 116.404, lat: 39.915},
zoom: 15,
} }
}, },
watch: { watch: {
Address: { Address: {
handler(newValue) { handler(newValue,onldValue) {
this.city = this.Address this.keyword = newValue
if (!newValue) {
this.getcity()
} else {
this.search()
}
}, },
immediate: true immediate: true
}, },
}, },
mounted() { mounted() {
this.city = this.Address this.keyword = this.Address
this.getcity()
}, },
methods: { methods: {
closeDialog() { getClickInfo (e) {
this.$emit("refList"); // console.log(e,'---')
// this.center.lng = e.point.lng
// this.center.lat = e.point.lat
}, },
sendMsg() { syncCenterAndZoom (e) {
if (!this.point.lng) { const {lng, lat} = e.target.getCenter()
this.Error("请点击地图上你需要选择的地址"); this.center.lng = lng
} else { this.center.lat = lat
this.$emit("headCallBack", this.point, this.type, this.index, this.address_detail); this.zoom = e.target.getZoom()
this.$emit("refList");
}
}, },
search() { // 经纬度
var that = this determineLngLat(){
var map = new BMap.Map(`allmap_${that.id}${that.type}_${that.index}`, { enableMapClick: false }) if(this.center.lng){
var local = new BMap.LocalSearch(map, { // 智能搜索 this.$emit("headCallBack", this.center, this.type, this.index, this.keyword);
onSearchComplete: function () { this.$emit("refList");
if (local.getResults() && local.getResults().getPoi(0) && local.getResults().getPoi(0).point) { }else{
that.userlocation = local.getResults().getPoi(0).point // 获取第一个智能搜索的结果 this.Error("请搜索您需要选择的地址");
that.point.lat = that.userlocation.lat
that.point.lng = that.userlocation.lng
map.centerAndZoom(that.userlocation, 15)
map.addOverlay(new BMap.Marker(that.userlocation)) // 添加标注
}
} }
})
local.search(that.city)
map.addEventListener('click', function (e, target) {
// var point = new BMap.Point(e.point.lng, e.point.lat) // 创建点坐标，汉得公司的经纬度坐标
// map.centerAndZoom(point, 11)
// that.point = e.point
})
var gc = new BMap.Geocoder();
map.addEventListener('mousedown', function (type) {
var pt = type.point;
gc.getLocation(pt, function (rs) {
var addComp = rs.addressComponents;
that.address_detail = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber
})
})
},
getcity() {
this.$nextTick(function () {
var that = this
// 创建Map实例
var map = new BMap.Map(`allmap_${that.id}${that.type}_${that.index}`, { enableMapClick: false })
// 获取当前位置
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function (r) {
if (r) {
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
// map.mapClick = false
that.address_detail = addComp.province + "" + addComp.city + "" + addComp.district + "" + addComp.street + "" + addComp.streetNumber
that.point.lng = r.point.lng
that.point.lat = r.point.lat
console.log(that.address_detail, '城市===')
console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
}
else {
console.log('failed');
}
});
// 点击地图
map.addEventListener('click', function (e, target) {
// var point = new BMap.Point(e.point.lng, e.point.lat) // 创建点坐标，汉得公司的经纬度坐标
// map.centerAndZoom(point, 11)
// that.point = e.point
})
var gc = new BMap.Geocoder();
map.addEventListener('mousedown', function (type) {
// map.centerAndZoom(type.point, 11)
that.point = type.point
var pt = type.point;
gc.getLocation(pt, function (rs) {
var addComp = rs.addressComponents;
that.address_detail = addComp.province + "" + addComp.city + "" + addComp.district + "" + addComp.street + "" + addComp.streetNumber
})
})
// 初始化地图,设置中心点坐标，
if (that.point.lat) {
var point = new BMap.Point(that.point.lat, that.point.lng) // 创建点坐标
map.centerAndZoom(point, 11)
} else {
map.centerAndZoom(new BMap.Point(104.073652, 30.664369), 11);
}
map.enableScrollWheelZoom()
if (that.Address) {
that.search()
}
})
}, },
} }
} }
</script> </script>
<style scoped> <style scoped>
.btnList { .serachinput{
margin: 15px 0 0 auto; margin-left: 10px;
text-align: right; margin-top: 10px;
margin-bottom: 15px; width: 350px;
height: 30px;
margin-right: 10px;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment