vue 使用百度地图

引入 public /index 下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="referrer" content="no-referrer">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己申请的ak"></script>
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

element ui

<div
              title="地图"
              :visible.sync="dialogMap"
              width="65%"
              :append-to-body="true">
                <div class="el-modal-body">
                    <template>
                      <div>
                        <el-row :gutter="10">
                          <el-col :span="2"><el-button type="primary" @click="fixedPos">定位</el-button></el-col>
                          <el-col :span="2" class="map-top-label">当前经度</el-col>
                          <el-col :span="3">
                            <el-input v-model="longitude" />
                          </el-col>
                          <el-col :span="2" class="map-top-label">当前纬度</el-col>
                          <el-col :span="3">
                            <el-input v-model="latitude" />
                          </el-col>
                          <el-col :span="10"><el-input v-model="keyWords" placeholder="请输入要搜索的地址" /></el-col>
                          <el-col :span="2"><el-button type="primary" @click="setPlace">搜 索</el-button></el-col>
                        </el-row>
                        <div id="map" ></div>
                      </div>
                    </template>
                </div>

              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogMap = false">取 消</el-button>
                <el-button type="primary" @click="dialogMap = false">确 定</el-button>
              </span>
</div>

方法

export default {
     data() {
        return {
            map: null,//地图
            local: null,//地址
            mk: null,//标注
            latitude: '',//纬度
            longitude: '',//经度
            keyWords: '',//地图
         }
    },
      mounted() {
            this.initMap()
  },
  methods: {
           //地图
    initMap(){
     
      this.map = new BMap.Map('map')
      //设置初始地图显示在哪个地方，例如北京颐和园（116.278362,40.006076）
      let point = new BMap.Point(116.278362,40.006076)
      this.map.centerAndZoom(point, 10) //初始化地图，设置城市和地图级别
      this.map.addOverlay(new BMap.Marker(point));//定点坐标红点覆盖
      this.map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
      this.map.addControl(new BMap.NavigationControl())
      var that=this
      //点击事件
      this.map.addEventListener("click", function(e){
        that.latitude=that.latitude
        that.longitude = that.longitude
      //获取地图上所有的覆盖物，
        var allOverlay = that.map.getOverlays();
        for(var i = 0;i<allOverlay.length;i++) {
        if(allOverlay[i].toString()=="[object Marker]"){
                          if (allOverlay[i].getPosition().lng == that.longitude && allOverlay[i].getPosition().lat == that.latitude) {
                              that.map.removeOverlay(allOverlay[i]);
                            }
                  }
                }
      //通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度
      that.latitude = e.point.lat
      that.longitude =  e.point.lng
      point = new BMap.Point(that.longitude, that.latitude)
      that.map.addOverlay(new BMap.Marker(point));//定点坐标红点覆盖
      

      })
      },
    // 点击定位-定位到当前位置
    fixedPos() {
      const _this = this
      const geolocation = new BMap.Geolocation()
      this.confirmLoading = true
      geolocation.getCurrentPosition(function(r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          _this.handleMarker(_this, r.point)
          let myGeo = new BMap.Geocoder()
          myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result) {
            _this.confirmLoading = false
            if (result) {
              _this.latitude = result.point.lat
              _this.longitude =  result.point.lng
        
            }
          })
        } else {
          _this.$message.error('failed' + this.getStatus())
        }
      })
    },


    // 搜索地址
    setPlace() {
      this.local = new BMap.LocalSearch(this.map, {
        onSearchComplete: this.searchPlace
      })
      this.local.search(this.keyWords)
    },
    searchPlace() {
      if (this.local.getResults() != undefined) {
        this.map.clearOverlays() //清除地图上所有覆盖物
        if (this.local.getResults().getPoi(0)) {
          let point = this.local.getResults().getPoi(0).point //获取第一个智能搜索的结果
          this.map.centerAndZoom(point, 18)
          this.handleMarker(this, point)
          console.log('经度：'+ point.lng + '--' + '纬度' + point.lat)
          this.latitude = point.lat
          this.longitude =  point.lng
         

        } else {
          this.$message.error('未匹配到地点!')
        }
      } else {
        this.$message.error('未找到搜索结果!')
      }
    },
    // 设置标注
    handleMarker(obj, point) {
      obj.mk = new BMap.Marker(point)
      obj.map.addOverlay(obj.mk)
      obj.mk.enableDragging() // 可拖拽
      obj.mk.addEventListener('dragend', function(e) { // 监听标注的拖拽，获取拖拽后的经纬度
        this.latitude = point.lat
        this.longitude =  point.lng

      })
      obj.map.panTo(point)
    },
        
    
    },
}

备注：
记得给map地图长宽

<style lang="scss" scoped>
#map{
    height: 400px;
    width: 100%px;
  
</style>