前言
-
开发中我们需要地图定位，就是用户输入位置，自动定位获取经纬度，传递给后端存在数据库
-
找了一圈发现千篇一律，最后也是使用element的搜索输入款配合原生百度地图实现这个功能
-
点击地图需要逆地址解析，输入地址时调用百度地图渲染在下拉框，选择传输地址，经纬度
-
一般是在添加时加载地图，可能会因为网络原因加载地图实例失败，所以需要一直加载到实例
-
在项目中工具文件形式引入，相当于创建了一个<script>标签引入地图资源，挂在在全局上
效果图
获取经纬度
代码实现-直接复制需要申请AK-主页文章有
1.在工具文件下建立utils/loadBMap.js-内容如下
export default function loadBMap (ak) {
return new Promise(function (resolve, reject) {
if (typeof window.BMap !== 'undefined') {
resolve(window.BMap)
return true
}
window.onBMapCallback = function () {
resolve(window.BMap)
}
const script = document.createElement('script')
script.type = 'text/javascript'
script.src =
'https://api.map.baidu.com/api?v=3.0&ak=' +
ak +
'&callback=onBMapCallback'
script.onerror = reject
document.head.appendChild(script)
})
}
2.在页面中使用-注意没有写AK-需要换
<template>
<div class="conter">
<el-button type="primary" size="small" @click="addbaidu"
>添加信息</el-button
>
<el-dialog title="地图定位" :visible.sync="dialogVisible" @close="close" width="30%">
<el-form ref="form" :model="form" label-width="100px">
<el-form-item label="归属地址：" prop="building">
<el-autocomplete
style="width: 100%"
v-model="form.building"
:fetch-suggestions="querySearchAsync"
:trigger-on-focus="false"
placeholder="请先搜索地址"
clearable
@select="handleSelect"
>
<template slot-scope="{ item }">
<i class="el-icon-search fl mgr10" />
<div style="overflow: hidden">
<div class="title">{
{ item.title }}</div>
<span class="address ellipsis">{
{ item.address }}</span>
</div>
</template>
</el-autocomplete>
</el-form-item>
<el-form-item label="地图定位：">
<div id="map-container" style="width: 100%; height: 300px" />
</el-form-item>
<el-form-item label="经度：">
<el-input v-model="form.longitude" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="维度：">
<el-input v-model="form.latitude" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
// 引入第三方工具包
import loadBMap from '@/utils/loadBMap.js'
export default {
name: 'Baidu',
data() {
return {
// 地图实例
map: null,
// Marker实例
mk: null,
// 定时器
initMapeq: null,
// 表单开关
dialogVisible: false,
// 表单
form: {}
}
},
created() {},
mounted() {
// 页面加载完之后，加载百度地图
// 加载引入BMap
loadBMap('你的AK')-需要申请主页文章有
},
methods: {
close(){
this.form = {}
},
// 添加开关
addbaidu() {
// 打开表单
this.dialogVisible = true
// 加载地图
this.getbaidu()
},
// 加载地图方法
getbaidu() {
this.showDialog = true
this.initMapeq = setInterval(() => {
if (this.initMap()) {
clearInterval(this.initMapeq)
}
})
},
// 百度地图封装方法
// 初始化地图
initMap() {
try {
var that = this
// 1、挂载地图
// 创建地图实例
this.map = new BMap.Map('map-container')
// 设置中心经纬度 这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中120.872845表示经度，32.021089表示纬度。（为南通濠河风景区坐标） 作者：星银色飞行船
var point = new BMap.Point(
this.form.longitude || 116.41338729034514,
this.form.latitude || 39.910923647957596
)
// 3.在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作
this.map.centerAndZoom(point, 14)
// 滚轮缩放
this.map.enableScrollWheelZoom()
// 3、设置图像标注并绑定拖拽标注结束后事件
this.mk = new BMap.Marker(point, { enableDragging: true })
this.map.addOverlay(this.mk)
} catch (err) {
return false
}
// 4、添加（右上角）平移缩放控件
this.map.addControl(
new BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_RIGHT,
type: BMAP_NAVIGATION_CONTROL_SMALL
})
)
// 7、绑定点击地图任意点事件
this.map.addEventListener('click', function (e) {
console.log('点击了', e)
that.getAddrByPoint(e.point)
})
return true
},
// 2、逆地址解析函数 根据坐标点获取详细地址 point 百度地图坐标点，必传
getAddrByPoint(point) {
var that = this
var geco = new BMap.Geocoder()
geco.getLocation(point, function (res) {
// console.log(res);
that.mk.setPosition(point)
that.map.panTo(point)
that.form.building = res.address
that.form.longitude = res.point.lng
that.form.latitude = res.point.lat
})
},
// 8-1、地址搜索
querySearchAsync(str, cb) {
// 根据状态码
var options = {
onSearchComplete: function (res) {
var s = []
if (local.getStatus() == BMAP_STATUS_SUCCESS) {
for (var i = 0; i < res.getCurrentNumPois(); i++) {
s.push(res.getPoi(i))
}
cb(s)
} else {
cb(s)
}
}
}
var local = new BMap.LocalSearch(this.map, options)
local.search(str)
},
// 8-2、选择地址
handleSelect(item) {
this.form.building = item.address + item.title
console.log(item);
this.form.longitude = item.point.lng
this.form.latitude = item.point.lat
console.log('lng', item.point.lng)
console.log('lat', item.point.lat)
this.map.clearOverlays()
this.mk = new BMap.Marker(item.point)
this.map.addOverlay(this.mk)
this.map.panTo(item.point)
}
}
}
</script>
<style lang="scss" scoped>
.conter {
// 去除百度地图的图标
::v-deep .anchorBL {
display: none !important;
}
}
</style>总结：
经过这一趟流程下来相信你也对 vue-使用Baidu（百度地图）实现输入位置获取定位经纬度 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！
什么不足的地方请大家指出谢谢 -- 風过无痕