1.main.js
import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap, { // 自己申请的ak码 ak: '' })2.组件使用
注意：css设置宽高
<template> <div class="map-div"> <!-- 输入搜索地址 --> <el-input v-model="value" prefix-icon="el-icon-search" class="search" /> <!-- 地图 --> <baidu-map class="map" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @zoomend="onZoomEnd" @ready="onReady"> <!-- 根据位置搜索地址 --> <bm-local-search :keyword="value" :panel="false" :auto-viewport="true"></bm-local-search> </baidu-map> </div> </template> <script> import { bd09togcj02, gcj02tobd09 } from '@/utils/methods' export default { props: { form: Object, edit: Boolean }, data() { return { zoom: 15, // 地图展示级别,缩放的倍数 BMap: '', // 存储全局地图 map: '', value: '', // 搜索的地址 center: { lng: 0, lat: 0 } // 中心点 } }, methods: { onReady({ BMap, map }) { this.BMap = BMap this.map = map let _this = this if (this.edit) { this._transilateToGc(this, this.form.lng, this.form.lat) this._addMarker(this, this.center.lng, this.center.lat) } else { this.value = '广州' } this.zoom = 15 map.setDefaultCursor('crosshair') // 改变鼠标样式 map.addEventListener('click', function (e) { // 获取经纬度 _this.value = '' _this._transilateToGc(_this, e.point.lng, e.point.lat) }) }, // 监听缩放时改变zoom的值 onZoomEnd(e) { this.zoom = e.target.getZoom() }, // 添加标注 _addMarker(_this, lng, lat) { let BMap = this.BMap _this.map.clearOverlays() // 清空标注 let newPoint = new BMap.Point(lng, lat) var marker = new BMap.Marker(newPoint)// 创建标注 _this._getLocationName(BMap, newPoint) _this.map.addOverlay(marker) // 将标注添加到地图中 marker.disableDragging() marker.addEventListener('click', function (e) { _this._openInfoWindow(_this, newPoint) e.domEvent.stopPropagation() }) }, // 根据经纬度获取详细地址 _getLocationName(BMap, newPoint) { let _this = this // 获取定位名称 let gc = new BMap.Geocoder() // 初始化，Geocoder类 gc.getLocation(newPoint, function (rs) { // getLocation函数用来解析地址信息，分别返回省市区街等 let addComp = rs.addressComponents _this.form.province = addComp.province // 获取省份 _this.form.city = addComp.city // 获取城市 _this.form.county = addComp.district // 区 let street = addComp.street // 街 let streetNumber = addComp.streetNumber ? addComp.streetNumber : '' _this.form.address = _this.form.province + _this.form.city + _this.form.county + street + streetNumber _this._openInfoWindow(_this, newPoint) }) }, // 打开信息窗口 _openInfoWindow(_this, newPoint) { var opts = { width: 250, // 信息窗口宽度 height: 80, // 信息窗口高度 title: '信息' // 信息窗口标题 } var infoWindow = new _this.BMap.InfoWindow(_this.form.address, opts) // 创建信息窗口对象 _this.map.openInfoWindow(infoWindow, newPoint) }, // 转成百度坐标 _transilateToBd() { let result = gcj02tobd09(this.form.lng, this.form.lat) this.center = { lng: result[0], lat: result[1] } }, // 转成火星坐标 _transilateToGc(_this, lng, lat) { let result = bd09togcj02(lng, lat) _this.form.lng = result[0].toString() _this.form.lat = result[1].toString() } } } </script>火星坐标和百度地图坐标的转换
// 百度地图坐标转火星坐标 export const bd09togcj02 = (lng, lat) => { const PI = Math.PI var x = lng - 0.0065 var y = lat - 0.006 var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * PI) var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * PI) var gLng = z * Math.cos(theta) var gLat = z * Math.sin(theta) return [gLng, gLat] } // 火星转百度 export const gcj02tobd09 = (lng, lat) => { const PI = Math.PI var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * PI) var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * PI) var bLng = z * Math.cos(theta) + 0.0065 var bLat = z * Math.sin(theta) + 0.006 return [bLng, bLat] }
