使用element-ui弹框实现点击地图实现定位
后台管理项目添加设备的时候，需要给设备进行定位，用vue.js和element-ui。效果图如下：
点击新增按钮的时候会弹出如上图所示的弹框然， 设备地址点击后面定位的小图标，会接着弹出一个弹框进行百度地图点击定位。如下图
点击确定的时候，上面显示的地址就会出现在请输入设备安装地址的表单里面，这个用到的是vue.js里面的数据绑定，下面是代码
<!-- 新增设备弹框 -->
<el-dialog title="新增设备" :visible.sync="addequipmentDialog" width="500px">
<el-form :model="addobjequipment">
<el-form-item label="设备IMEI" prop="deviceNumber" label-width="100px">
<el-input
v-model="addobjequipment.deviceNumber"
autocomplete="off"
placeholder="请输入设备背面15位IMEI号"
></el-input>
</el-form-item>
<el-form-item label="设备名称" prop="devicename" label-width="100px">
<el-input v-model="addobjequipment.devicename" placeholder="请输入设备名称" autocomplete="off"></el-input>
</el-form-item>
<!-- <el-form-item label="产品类型" prop="email" label-width="100px">
<el-select class="mySelect" v-model="addobjequipment.line" placeholder="请选择选择产品类型">
<el-option label="NB烟雾传感器" value="zaixian"></el-option>
<el-option label="NB烟雾传感器" value="lixian"></el-option>
</el-select>
</el-form-item>-->
<el-form-item label="设备地址" prop="address" label-width="100px" style="position:relative">
<el-input
id="myInput"
v-model="addobjequipment.address"
autocomplete="off"
disabled
placeholder="请输入设备安装地址"
></el-input>
<a href="javascript:;" id="myGprs">
<img src="@/assets/images/location_gray.png" @click=" getGpsList">
</a>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelAddobj">取 消</el-button>
<el-button type="primary" @click="addClick">确 定</el-button>
</span>
</el-dialog>
<!-- 点击新增设备定位按钮弹框 -->
<el-dialog title="地图定位" :visible.sync="mapequipmentDialog" width="930px">
<div class="selectAddress">
<!-- <p>
<img src="@/assets/images/location_green.png">
<input class="deviceAddressInput" type="text" value v-model="addobjequipment.dizhiInput">
<el-input type="text" class="deviceAddressInput"></el-input>
</p>-->
<p class="deviceAddressText">{{dizhiMap}}</p>
</div>
<div id="container"></div>
<span slot="footer" class="dialog-footer">
<el-button @click="mapequipmentDialog = false">取 消</el-button>
<el-button type="primary" @click="getClick">确 定</el-button>
</span>
</el-dialog>
data () {
return {
// 默认新增设备弹框控制器
addequipmentDialog: false,
// 新增设备的数据源
addobjequipment: {
deviceNumber: '',
// 地图弹框的数据源
devicename: '',
address: '',
latitude: '',
longitude: ''
},
// 地图弹框
mapequipmentDialog: false,
// 地图弹框的数据源
dizhiMap: ''
}
}
getGpsList () {
var that = this
this.mapequipmentDialog = true
this.$nextTick(function () {
// 创建变量，用于存储地址
var address
var dizhi
var marker
if (marker === undefined) {
// 初始化百度地图
var map = new BMap.Map('container')
// 创建地图实例
var point = new BMap.Point(116.404, 39.915)
// 创建点坐标
map.centerAndZoom(point, 15)
// var marker = new BMap.Marker(point);
// map.addOverlay(marker);
map.enableScrollWheelZoom(true)
map.addEventListener('click', function (e) {
// console.log(e);
// 移除标注
map.removeOverlay(marker)
// 创建变量，用于存储经纬度
var point = e.point
// console.log(point)
// 设置lng的值
window.localStorage.setItem('lng', point.lng)
// 设置lat的值
window.localStorage.setItem('lat', point.lat)
// 创建标注实例
marker = new BMap.Marker(point)
// 添加标注
map.addOverlay(marker)
// 创建地理编码实例
var geoc = new BMap.Geocoder()
geoc.getLocation(point, function (rs) {
// console.log(rs)
dizhi = rs.address
address = rs.addressComponents
// console.log(address)
// 设置currentProvince的值
window.localStorage.setItem('currentProvince', address.province)
// 设置currentCity的值
window.localStorage.setItem('currentCity', address.city)
// 设置地址的值
window.localStorage.setItem('dizhi', dizhi)
that.dizhiMap = window.localStorage.getItem('dizhi')
})
})
}
})
},
getClick () {
this.mapequipmentDialog = false
// console.log(that.addobjequipment.dizhiInput)
this.addobjequipment.address = window.localStorage.getItem('dizhi')
this.addobjequipment.latitude = window.localStorage.getItem('lat')
this.addobjequipment.longitude = window.localStorage.getItem('lng')
this.editobjequipment.address = window.localStorage.getItem('dizhi')
this.editobjequipment.latitude = window.localStorage.getItem('lat')
this.editobjequipment.longitude = window.localStorage.getItem('lng')
},
async addClick () {
// this.addobjequipment = {}
if (this.addobjequipment.deviceNumber === '') {
this.$message.error('请输入设备号')
return
}
if (this.addobjequipment.devicename === '') {
this.$message.error('请输入设备名')
return
}
if (this.addobjequipment.address === '') {
this.$message.error('请选择地址')
return
}
this.addequipmentDialog = false
var res = await this.$http.post(url, {
deviceNumber: this.addobjequipment.deviceNumber,
devicename: this.addobjequipment.devicename,
address: this.addobjequipment.address,
latitude: this.addobjequipment.latitude,
longitude: this.addobjequipment.longitude
})
console.log(res)
var data = res.data
if (res.status === 200) {
if (data.success === true) {
this.$message({
message: data.results,
type: 'success'
})
this.getStreetList()
this.cancelAddobj()
} else {
this.$message.error(data.msg)
}
} else {
this.$message.error(data.results)
}
},
这样就可以了。