vue中百度地图api的使用，vue中百度地图标注

效果图

这里有vue百度地图官网

https://dafrok.github.io/vue-baidu-map/#/zh/overlay/point-collection 点击跳转
可以通过该网站进一步学习，并对代码进行调整，达到自己想要的样式

先去百度地图获取注册码

请看人家百度地图官方说明：点击跳转
http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey

Vue中安装百度地图

npm install vue-baidu-map --save

注册组件

我选择了全局注册组件
主要代码：

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: '你申请的key'
})

如图：

在组件中应用

组件template中：

  <baidu-map class="bm-view" ak="你的Key" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler">
        <!--缩放控件-->
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <!--定位-->
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        <!--点-->
        <div v-for="(point,index) in resultData">
          <bm-marker :position="{lng:point.lng,lat:point.lat}" :dragging="true">
            <bm-label :content="point.locale" :labelStyle="{color: 'red', fontSize : '10px'}" :offset="{width: -35, height: 30}"/>
          </bm-marker>
        </div>

      </baidu-map>

**data（）**中主要代码：

resultData:[],
 center: {lng: 0, lat: 0},
 zoom: 10,
 points: [],

其中resultData是我从后台请求回来的数据，是数组对象，格式如下，

methods中：

handler ({BMap, map}) {
    console.log(BMap, map)
       this.center.lng = 116.404
       this.center.lat = 39.915
       this.zoom = 14
   },

完整代码

由于我处理了跨域，从别的api中获取的数据，这里就写死了两个数据意思一下，多余的样式可以忽略。

<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div class="role">
    <div class="roleList">

      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/home/case' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>区域疫情防控</el-breadcrumb-item>
        <el-breadcrumb-item>确诊地点&小区查询</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="formContent">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="地点">
            <el-cascader
              size="large"
              :options="options"
              v-model="selectedOptions"
              placeholder="请选择要查询的区域"
              @change="handleChange">
            </el-cascader>
          </el-form-item>

          <el-form-item>
            <el-switch
              v-model="isShow"
              active-text="表格查看"
              inactive-text="地图查看">
            </el-switch>
          </el-form-item>

        </el-form>
      </div>

      <el-table v-loading="" :data="resultData" border row-key="id" v-if="isShow"
                style=" width:552px;margin:30px auto;" :header-cell-style="{background:'#f5f6fa'}">
        <el-table-column type="index" label="序号" width="50px" header-align="center" align="center"></el-table-column>
        <el-table-column prop="locale" label="小区名" width="200px" align="center"></el-table-column>
        <el-table-column prop="address" label="详细地址" width="300px" align="center"></el-table-column>
      </el-table>

      <baidu-map v-else class="bm-view" ak="N7YmCegdP5yeKl1IWukifknWQGvQ0pv2" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler">
        <!--缩放控件-->
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <!--定位-->
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        <!--点-->
        <div v-for="(point,index) in resultData">
          <bm-marker :position="{lng:point.lng,lat:point.lat}" :dragging="true">
            <bm-label :content="point.locale" :labelStyle="{color: 'red', fontSize : '10px'}" :offset="{width: -35, height: 30}"/>
          </bm-marker>
        </div>

      </baidu-map>

    </div>
  </div>
</template>

<script>
    import { regionData } from 'element-china-area-data'

    export default {
        components: {
        },
        data() {
            return {
                options: regionData,
                selectedOptions: [],
                resultData:[],
                center: {lng: 0, lat: 0},
                zoom: 10,
                points: [],
                isShow:false
            }
        },

        mounted() {
        },
        // 事件处理
        methods: {
            handler ({BMap, map}) {
                console.log(BMap, map)
                this.center.lng = 116.404
                this.center.lat = 39.915
                this.zoom = 14
            },
            handleChange (value) {
                let paramSel = {
                    province:'',
                    city:'',
                    district:''
                }
                //console.log(this.options)
                this.options.map(province=>{
                    if(province.value == value[0]){
                        paramSel.province = province.label;
                        province.children.map(city=>{
                           if(city.value == value[1]){
                              if(city.label == '市辖区'){
                                  paramSel.city = province.label
                              }else{
                                  paramSel.city = city.label
                              }
                              if(city.hasOwnProperty('children')){
                                  city.children.map(area=>{
                                      if(area.value == value[2]){
                                          paramSel.district = area.label
                                      }
                                  })
                              }else{

                              }
                           }
                        })
                    }
                })
                //console.log(paramSel)
                //let url = `/bpi/apis/dst/ncov/fynearby?province=${paramSel.province}&city=${paramSel.city}&district=${paramSel.district}`
                this.center = paramSel.province+paramSel.city+paramSel.district;
                this.resultData.push({locale: "电报局街小区",
                    address: "北京市丰台区丰台街道电报局街小区",
                    lng: "116.286903",
                    lat: "39.849232",
                    source: "北京日报", show:false})
                this.resultData.push({locale: "西府颐园",
                    address: "北京市丰台区卢沟桥街道西府颐园",
                    lng: "116.267921",
                    lat: "39.883171",
                    source: "北京日报",
                    show:false})
                //console.log(url);
                /*this.$axios.get(url, {headers:{apicode:'f1353145fd6c42ee9a9d10e61fc823ad'}}).then(result=>{
                    console.log(result.data.newslist)
                    this.resultData = result.data.newslist.map(res=>{
                        return {
                            locale:res.locale,
                            address:res.address,
                            lng:res.lng,
                            lat:res.lat,
                            source:res.source,
                            show:false
                        }
                    })
                })*/
            },
        }

    }
</script>
<style scoped>
  .bm-view {
    margin-top:0px;
    width: 100%;
    height: 450px;
  }
  .label {
    padding-left: 20px;
  }

  .role {
    width: 100%;
    height: 100%;
    overflow: scroll;
  }

  .seek {
    width: 98%;
    height: auto;
    margin: 10px auto;
    border: 1px solid #e6e6e6;
    background-color: #fff;
  }

  .roleList {
    width: 98%;
    height: auto;
    border: 1px solid #e6e6e6;
    margin: 10px auto;
    background-color: #fff;
    padding-bottom: 100px;
  }

  .formContent {
    width: 50%;
    height: 100%;
    margin: 0 auto;
    margin-top: 10px;
  }

  .roleTop {
    width: 100%;
    height: 59px;
    border-bottom: 1px solid #e6e6e6;
  }

  .addRole {
    padding-left: 30px;
    padding-top: 10px;
  }

  .tableForm {
    width: 100%;
    height: 100%;
  }

  .iconSize {
    font-size: 16px;
  }

  .paginationCon {
    float: right;
    margin-top: 12px;
    margin-right: 30px;
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }
  #box_center{
    margin:0 auto;
    margin-top: 30px;
  }
  .font{
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  }
  .cen_h{
    text-align: center;
    margin-bottom: 30px;
  }
  .breadcrumb{
    padding:20px;
  }
  .demonstration {
    display: inline-block;
    color: #606266;
    font-size: 14px;
    line-height: 40px;
    padding: 0 12px 0 0;
  }
</style>