Vue引入百度地图

第一步先npmcnpm i -S vue-baidu-map
第二步 在main.js下添加下面的话 ak自己申请

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: ""
})

第三步 下面代码功能介绍：左侧有一个树形菜单 点击菜单上的地址，地图上的红点会自动标志到相应位置 ，点击红点会出来一个弹框，可以任意写东西进去

<!--实时数据-地图-->
<template>
  <div class="border">
    <div class="tree">
      <el-tree :data="datatree" :props="defaultProps" node-key="id" ref="tree" @node-click="handleCheck"> </el-tree> //我们左侧有一个树形菜单
    </div>
    <div style="width: 80%; margin-top: 0; height: 820px; float: left">
      <!-- <weather class="weather" mode="tag" showBgImg></weather> -->
      <baidu-map class="map" :center="{ lng: center.lng, lat: center.lat }" :zoom="zoom" scroll-wheel-zoom>
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
        <bm-map-type
                :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
                anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        ></bm-map-type>
        <bm-marker :position="{ lng: center.lng, lat: center.lat }" @click="infoWindowOpen">
          <bm-info-window :show="show" @close="infoWindowClose">
            <div>{{this.SCName}}</div>
          </bm-info-window>
        </bm-marker>
      </baidu-map>
    </div>
  </div>
</template>

<script>
  export default {
    name: "map",
    data(){
      return{
        zoom: 15,
        show: false,
        label: '1111',
        SCName: '',
        userid: '',
        ip: '',
        tableData: [],
        center: {
          lng: 89.195574,
          lat: 42.958251,
        },
        queryParam: [],
        datatree: [],
        defaultProps: {
          children: 'children',
          label: 'title',
        },
      }
    },
    mounted() {
      this.ip = localStorage.getItem('IP');
      this.userid = localStorage.getItem('USERID');
      this.tree()
    },
    methods:{
      tree() {
        this.axios({
          method: 'get',
          url: this.ip + '',
          params: {
            userid:this.userid,
          }
        })
                .then((res) => {
                  this.datatree = res.data.result
                })
                .catch((err) => {
                  console.log(err)
                })
      },
      handleCheck(data) {
        console.log(data.id)
        this.show = false
        this.SCName = data.title
        this.axios({
          method: 'post',
          url:this.ip+''+data.id,
        })
                .then((res) => {
                  this.center.lat = res.data.result[0].lat
                  this.center.lng = res.data.result[0].lng
                })
                .catch((err) => {
                  console.log(err)
                })
      },
      infoWindowOpen(marker) {
        this.show = true
        console.log("marker")
        console.log(marker.target.point.lat)
        console.log(marker.target.point.lng)
        this.axios({
          method: 'get',
          url:this.ip+'',
          params: {
            lat:marker.target.point.lat,
            lng:marker.target.point.lng,
          }
        })
                .then((res) => {
                  console.log(res)
                })
                .catch((err) => {
                  console.log(err)
                })
      },
      handleGet(scope){
        console.log(scope)

      },
      infoWindowClose() {
        this.show = false
      },
      onExpand(expandedKeys) {
        console.log('onExpand', expandedKeys)
        this.expandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      onCheck(checkedKeys) {
        console.log('onCheck', checkedKeys)
        this.checkedKeys = checkedKeys
      },
      onSelect(selectedKeys, info) {
        console.log('onSelect', info)
        this.selectedKeys = selectedKeys
      },
    }
  }
</script>

<style scoped>
  .border {
    padding: 0;
  }

  .map {
    width: 100%;
    height: 100%;
    margin-right: 0;
    float: left;
    margin-top: 0;
  }

  .tree {
    width: 13%;
    float: left;
    height: 600px;
  }
  .el-tree {
    position: relative;
    cursor: default;
    background: transparent;
    /*color: #FFFFFF;*/
  }
</style>