vue使用百度地图

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]
}