<template>
|
<el-dialog
|
v-dialogDrag
|
width="70%"
|
:visible.sync="MapTrue"
|
:before-close="cancelMap"
|
append-to-body>
|
<div class="bDiv">
|
<baidu-map
|
class="bm-view"
|
:center="center"
|
:zoom="zoom"
|
:dragging="true"
|
:scroll-wheel-zoom="true"
|
@ready="handler"
|
@click="getClickInfo"
|
:key="timeKey"
|
>
|
<!-- //地理位置的搜索功能-->
|
<!-- <bm-local-search-->
|
<!-- :keyword="keyword"-->
|
<!-- :auto-viewport="true"-->
|
<!-- :location="location"-->
|
<!-- ></bm-local-search>-->
|
<!-- //缩放比例尺的展示-->
|
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
|
<!-- //定位-->
|
<!-- <bm-geolocation-->
|
<!-- anchor="BMAP_ANCHOR_BOTTOM_RIGHT"-->
|
<!-- :showAddressBar="true"-->
|
<!-- :autoLocation="true"-->
|
<!-- ></bm-geolocation>-->
|
<!-- //添加一个小红点的，并将当前的经纬度写入数据中-->
|
<!-- <bm-marker :position="{lng:center.lng, lat: center.lat}"></bm-marker>-->
|
<bm-control :offset="{width: '10px', height: '10px'}">
|
<bm-auto-complete v-if="autoComplete" :sugStyle="{zIndex: 999999}" @confirm="handleConfirm" :key="`${timeKey}-BaiduMap`">
|
<el-input v-model="keyword" type="text" clearable placeholder="请输入搜索关键字" class="serachinput"/>
|
</bm-auto-complete>
|
</bm-control>
|
<bm-marker :position="position"></bm-marker>
|
</baidu-map>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submits">确 定</el-button>
|
<el-button @click="cancelMap">取 消</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import moment from "moment";
|
export default {
|
name: "index",
|
props:['MapTrue'],
|
data(){
|
return{
|
baidumapSwitch: false,
|
autoComplete: true,
|
center: {lng: 114.21148, lat: 36.41937},
|
zoom: 14,
|
// location: '北京市',
|
keyword: '请输入搜索关键词',
|
markers: [],
|
position: {},
|
timeKey: '',
|
mapes:{
|
center: {lng: 114.21148, lat: 36.41937 },
|
cilty: {
|
address: '石家庄',
|
addressComponents: {
|
city: '石家庄',
|
district: '',
|
province: '',
|
street: '',
|
streetNumber: '',
|
}
|
}
|
},
|
geocoder: {}, //解析器
|
}
|
},
|
created () {
|
this.timeKey = moment().locale('zh-cn').format('YYYY-MM-DD HH:mm:ss')
|
},
|
methods:{
|
handleConfirm ({ item }) {
|
this.queryString = `${item.value.city}${item.value.district}${item.value.business}`
|
this.querySearch(this.queryString)
|
console.log(item,'item')
|
this.mapes.cilty.address=this.queryString
|
this.mapes.cilty.addressComponents= item
|
// this.keyword = ''
|
console.log(this.keyword,'keyWORD======')
|
item = {}
|
},
|
querySearch (queryString, cb) {
|
var that = this
|
/* global BMap */
|
var myGeo = new BMap.Geocoder()
|
myGeo.getPoint(queryString, function (point) {
|
if (point) {
|
that.point = point
|
}
|
}, this.locationCity)
|
setTimeout(function () {
|
that.show(that.point.lng, that.point.lat)
|
}, 500)
|
},
|
show (gpsLongitude, gpsLatitude) {
|
if (gpsLongitude === undefined || (gpsLongitude === 0 && gpsLatitude === 0)) {
|
gpsLongitude = 114.21148
|
gpsLatitude = 36.41937
|
}
|
const position = { id: Math.random() * 40, lng: gpsLongitude, lat: gpsLatitude }
|
this.center = { lng: gpsLongitude, lat: gpsLatitude }
|
this.markers = []
|
this.markers.push(position)
|
this.position = position
|
this.mapes.center=position
|
},
|
// 百度地图初始化（这个一定要！否则地图回加载不出来）
|
handler ({ BMap, map }) {
|
console.log({ BMap, map },'{ BMap, map }')
|
//百度地图主题默认为白色，如上图所示
|
//百度地图使用黑色主题
|
//[百度地图更多主题](https://lbsyun.baidu.com/custom/list.htm)
|
var mapStyle = { style: 'white' }
|
map.setMapStyle(mapStyle)
|
this.geocoder = new BMap.Geocoder()
|
},
|
// 点击获取到当前经纬度
|
getClickInfo (e) {
|
this.geocoder.getLocation(e.point,res => {
|
console.log(res,'res=====')
|
const position = { id: Math.random() * 40, lng: e.point.lng, lat: e.point.lat }
|
// this.markers = []
|
// this.markers.push(position)
|
this.position = position
|
this.keyword = res.address
|
this.mapes.center=res.point
|
this.mapes.cilty.address = res.address
|
})
|
},
|
Mapinit(formMap){
|
this.$nextTick(()=>{
|
if (formMap.latitude==""||formMap==null){
|
this.center={lng: 114.21148, lat: 36.41937 }
|
}else {
|
const a = formMap.latitude.split(",")
|
this.center.lng = a[0]
|
this.center.lat = a[1]
|
this.position.lng=a[0]
|
this.position.lng=a[1]
|
// this.map.cilty.address = mapes.map
|
}
|
})
|
},
|
cancelMap(){
|
this.keyword = ''
|
this.$emit("cancelMap",false)
|
|
},
|
// 确定
|
submits() {
|
// console.log(this.map,'157665')
|
console.log(this.mapes,'this.mapes')
|
this.$emit("cancelMaps",this.mapes)
|
this.cancelMap();
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.bDiv{
|
height: 600px;
|
.bm-view {
|
width: calc(100%);
|
height: 600px;
|
float: left;
|
}
|
}
|
|
</style>
|
