vue

您所在的位置：网站首页 › 百度地图经纬度怎么找不到 › vue

vue

2024-07-10 14:53| 来源: 网络整理| 查看: 265

前言

开发中我们需要地图定位，就是用户输入位置，自动定位获取经纬度，传递给后端存在数据库

找了一圈发现千篇一律，最后也是使用element的搜索输入款配合原生百度地图实现这个功能

点击地图需要逆地址解析，输入地址时调用百度地图渲染在下拉框，选择传输地址，经纬度

一般是在添加时加载地图，可能会因为网络原因加载地图实例失败，所以需要一直加载到实例

在项目中工具文件形式引入，相当于创建了一个标签引入地图资源，挂在在全局上

效果图

获取经纬度

代码实现-直接复制需要申请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-需要换

添加信息 {{ item.title }} {{ item.address }} 取消确定 // 引入第三方工具包 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) } } } .conter { // 去除百度地图的图标 ::v-deep .anchorBL { display: none !important; } }

总结：

经过这一趟流程下来相信你也对 vue-使用Baidu（百度地图）实现输入位置获取定位经纬度有了初步的深刻印象，但在实际开发中我们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕

【本文地址】

vue

vue

今日新闻

推荐新闻