vue | 您所在的位置:网站首页 › 百度地图经纬度怎么找不到 › vue |
前言
开发中我们需要地图定位,就是用户输入位置,自动定位获取经纬度,传递给后端存在数据库 找了一圈发现千篇一律,最后也是使用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(百度地图)实现输入位置获取定位经纬度 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人! 什么不足的地方请大家指出谢谢 -- 風过无痕 |
CopyRight 2018-2019 实验室设备网 版权所有 |